/* YCT Trẻ lớn (body.kid trên /giao-trinh/bai.html): hoạt hình NHẸ hợp lứa tuổi lớn hơn (khoảng 8-13 tuổi),
kết hợp chia từng bước thành trang riêng kéo ngang (trái <-> phải), giảm bớt chữ và thêm Sticker + âm thanh khích lệ.
05/11/2026, anh Hạnh:
- Chia từng bước sang trang mới kiểu kéo trang từ phải sang trái như phần Đi làm.
- Giảm bớt chữ để trẻ không nản.
- Chuyển bước có hiệu ứng vui vẻ, sticker hoặc âm thanh khích lệ, hiệu ứng cartoon phù hợp lứa tuổi.
- KHÔNG dùng nhân vật Anh Đậu Đậu (chỉ dành cho cổng Trẻ nhỏ).
Nạp SAU lo-trinh-dilam.css và lo-trinh-trang.css. Chỉ có hiệu lực với body.kid. */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap");
/* ---- 1. Đầu trang: thêm hình vẽ nét trắng (ngôi sao, hành tinh, bút chì) ở lề phải ---- */
html body.kid .ls-head.lt-head { position: relative; overflow: hidden; padding: 18px 0 16px; }
html body.kid .ls-head.lt-head::after {
content: ""; position: absolute; right: max(12px, calc(50% - 640px)); top: 10px; width: 280px; height: 150px;
pointer-events: none; opacity: .9;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='150' viewBox='0 0 280 150'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 30l5 11 12 2-9 8 2 12-10-6-10 6 2-12-9-8 12-2z'/%3E%3Ccircle cx='206' cy='44' r='20'/%3E%3Cpath d='M176 52c20-12 44-16 62-12'/%3E%3Cpath d='M96 118c22-16 46-16 68 0' stroke-dasharray='2 9'/%3E%3Cpath d='M250 92l-34 34-8 2 2-8 34-34z M240 98l6 6'/%3E%3C/g%3E%3Cg fill='%23FDE68A'%3E%3Ccircle cx='100' cy='28' r='4'/%3E%3Ccircle cx='150' cy='76' r='3'/%3E%3Ccircle cx='262' cy='16' r='3'/%3E%3Ccircle cx='24' cy='96' r='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top / contain;
animation: ylFloat 6s ease-in-out infinite;
}
html body.kid .ls-head.lt-head .wrap { position: relative; z-index: 1; }
html body.kid .ls-head.lt-head h1 { font-family: Arial, "Lexend", sans-serif !important; font-weight: 800 !important; letter-spacing: .2px; margin: 4px 0 6px; }
@keyframes ylFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* Nút bật/tắt âm khích lệ trên đầu trang & thanh bước */
html body.kid [data-kid-sound-toggle].is-off { opacity: .75; }
html body.kid .kid-nav-st { color: #B45309; font-weight: 800; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 999px; padding: 2px 9px; font-size: 12px; }
html body.kid .kid-snd-mini {
border: 1px solid #CBD5E1; background: #F8FAFC; border-radius: 999px; padding: 1px 7px;
font-size: 12.5px; cursor: pointer; line-height: 1.4; vertical-align: middle;
}
html body.kid .kid-snd-mini:hover { background: #EFF6FF; border-color: #93C5FD; }
/* ---- 2. Thanh bước + thanh tiến độ ---- */
html body.kid .lt-dot b { font-family: Arial, sans-serif; font-weight: 800; }
html body.kid .lt-bar i {
background-image: repeating-linear-gradient(-45deg, #0B6CF3 0 10px, #3B8BFF 10px 20px) !important;
background-size: 28px 28px; animation: ylStripe 1.2s linear infinite;
}
@keyframes ylStripe { from { background-position: 0 0; } to { background-position: 28px 0; } }
/* ---- 3. Khung từng bước: bo tròn hơn, bóng khối mỏng như trang truyện tranh ---- */
html body.kid .lt-main .lt-step { border: 2px solid #DCE6F3; border-radius: 22px; box-shadow: 0 5px 0 #E3ECF9; }
html body.kid .lt-main .lt-step.cur { border-color: #0B6CF3; box-shadow: 0 5px 0 #BFD6FB; }
html body.kid .lt-sht h2,
html body.kid .lt-intro h2,
html body.kid .lt-phase-ban h2 { font-family: Arial, "Lexend", sans-serif; font-weight: 700; letter-spacing: .1px; }
html body.kid .lt-sht h2 { font-size: 22px; line-height: 1.2; }
/* số bước kiểu nhãn dán, hơi nghiêng; xong bước thì có ngôi sao vàng */
html body.kid .lt-no {
position: relative; border-radius: 12px; width: 42px; height: 42px; transform: rotate(-4deg);
background: linear-gradient(160deg, #1E3A8A, #0B1B3F); font-family: Arial, sans-serif; font-size: 20px;
box-shadow: 0 3px 0 #C7D7F0;
}
html body.kid .lt-step.cur .lt-no { background: linear-gradient(160deg, #3B8BFF, #0B6CF3); }
html body.kid .lt-step.ok .lt-no { background: linear-gradient(160deg, #10B981, #059669); }
html body.kid .lt-step.ok .lt-no::after {
content: "★"; position: absolute; right: -8px; top: -9px; width: 20px; height: 20px; border-radius: 50%;
display: grid; place-items: center; font-size: 12px; line-height: 1; color: #92400E; background: #FDE68A;
border: 2px solid #fff; transform: rotate(4deg); animation: ylPop .35s ease both;
}
@keyframes ylPop { from { transform: scale(.3) rotate(4deg); opacity: 0; } to { transform: scale(1) rotate(4deg); opacity: 1; } }
/* ---- 4. Huy hiệu Sticker gắn ngay đầu mỗi bước (.kid-step-sticker) ---- */
html body.kid .kid-step-sticker {
display: inline-flex; align-items: center; gap: 7px;
background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
border: 2px solid #FCD34D; border-radius: 999px;
padding: 3px 11px 3px 5px; box-shadow: 0 3px 0 #FDE68A;
margin-left: auto; flex-shrink: 0;
animation: kidStickerBob 3.2s ease-in-out infinite;
}
html body.kid .kid-step-sticker svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.1)); }
html body.kid .kid-step-sticker .kid-st-lbl {
font-family: Arial, "Lexend", sans-serif; font-weight: 700; font-size: 13.5px; color: #92400E; white-space: nowrap;
}
html body.kid .lt-step.ok .kid-step-sticker {
background: linear-gradient(135deg, #ECFDF5, #D1FAE5); border-color: #34D399; box-shadow: 0 3px 0 #A7F3D0;
}
html body.kid .lt-step.ok .kid-step-sticker .kid-st-lbl { color: #065F46; }
@keyframes kidStickerBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
/* ---- 5. Ô hướng dẫn bước kiểu viên thuốc ngắn gọn (.lt-kid-do) ---- */
html body.kid .lt-do.lt-kid-do {
background: #FFFBEB; border: 1.5px solid #FDE68A; border-left: 5px solid #F59E0B;
border-radius: 14px; padding: 9px 13px; margin: 0 0 14px;
display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
}
html body.kid .kid-do-lbl {
font-family: Arial, "Lexend", sans-serif; font-weight: 800; font-size: 14.5px; color: #92400E; white-space: nowrap;
}
html body.kid .kid-do-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html body.kid .kid-do-pill {
display: inline-flex; align-items: center; gap: 6px;
background: #FFFFFF; border: 1.5px solid #FCD34D; border-radius: 999px;
padding: 4px 11px 4px 6px; font-size: 13.5px; color: #1E293B; box-shadow: 0 2px 0 #FEF3C7;
}
html body.kid .kid-do-pill b {
width: 20px; height: 20px; border-radius: 50%; background: #F59E0B; color: #fff;
font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; flex-shrink: 0;
}
/* ---- 6. Bộ sưu tập Sticker trên trang Lộ trình (#kidStickerRack) ---- */
html body.kid .kid-sticker-rack {
background: linear-gradient(135deg, #FFFBEB 0%, #EFF6FF 100%);
border: 2px dashed #93C5FD; border-radius: 18px;
padding: 13px 15px; margin: 0 0 14px;
}
html body.kid .kid-sr-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px;
}
html body.kid .kid-sr-head b {
font-family: Arial, "Lexend", sans-serif; font-size: 17px; color: #1E3A8A; display: block;
}
html body.kid .kid-sr-head span { font-size: 13px; color: #475569; }
html body.kid .kid-sr-count {
background: #FEF3C7; border: 1.5px solid #F59E0B; color: #92400E !important;
border-radius: 999px; padding: 3px 12px; font-size: 13px !important; font-weight: 700;
}
html body.kid .kid-sr-count b { display: inline; font-size: 14px; color: #B45309; }
html body.kid .kid-sr-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px;
}
html body.kid .kid-sr-item {
display: flex; flex-direction: column; align-items: center; text-align: center;
background: rgba(255, 255, 255, .82); border: 2px dashed #CBD5E1; border-radius: 14px;
padding: 9px 7px 8px; text-decoration: none; color: #475569;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
html body.kid .kid-sr-item:hover { transform: translateY(-3px); border-color: #60A5FA; background: #fff; }
html body.kid .kid-sr-item .kid-sr-ico {
width: 46px; height: 46px; display: grid; place-items: center;
filter: grayscale(.78) opacity(.65); transition: transform .2s ease, filter .2s ease;
}
html body.kid .kid-sr-item:hover .kid-sr-ico { filter: grayscale(.2) opacity(.95); transform: scale(1.06); }
html body.kid .kid-sr-item.is-cur {
border-style: solid; border-color: #3B82F6; background: #EFF6FF; box-shadow: 0 3px 0 #BFDBFE;
}
html body.kid .kid-sr-item.is-cur .kid-sr-ico { filter: none; }
html body.kid .kid-sr-item.is-ok {
border-style: solid; border-color: #F59E0B; background: #FFFBEB; box-shadow: 0 3px 0 #FDE68A; color: #1E293B;
}
html body.kid .kid-sr-item.is-ok .kid-sr-ico { filter: drop-shadow(0 2px 3px rgba(245, 158, 11, .28)); transform: scale(1.05); }
html body.kid .kid-sr-name { font-size: 12px; font-weight: 700; line-height: 1.25; margin: 5px 0 3px; color: #1E293B; }
html body.kid .kid-sr-tag {
font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
background: #F1F5F9; color: #64748B;
}
html body.kid .kid-sr-item.is-cur .kid-sr-tag { background: #DBEAFE; color: #1D4ED8; }
html body.kid .kid-sr-item.is-ok .kid-sr-tag { background: #D1FAE5; color: #047857; }
/* ---- 7. Giảm chữ trên thẻ từ mới, chữ Hán, góc văn hoá, ngữ pháp ---- */
html body.kid .kid-how-short { margin: 0 0 12px !important; padding: 9px 14px 9px 30px !important; }
html body.kid #tu-moi:not(.show-ex) .word:not(.show-ex) .ex { display: none; }
html body.kid #tu-moi .word.show-ex .ex { animation: ylPop .22s ease both; }
html body.kid .kid-ex-tog {
display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
color: #1E3A8A; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 999px; padding: 4px 11px; cursor: pointer;
}
html body.kid .w-ex-btn {
border: 1px solid #FCD34D !important; background: #FFFBEB !important; color: #92400E !important;
border-radius: 999px !important; padding: 3px 9px !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer;
}
html body.kid .w-ex-btn:hover { background: #FEF3C7 !important; }
/* Ô mở rộng gọn (.kid-tip, .kid-fold) */
html body.kid details.kid-tip {
margin-top: 5px; font-size: 12.5px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; padding: 4px 8px;
}
html body.kid details.kid-tip > summary { cursor: pointer; font-weight: 700; color: #B45309; list-style: none; }
html body.kid details.kid-tip > summary::-webkit-details-marker { display: none; }
html body.kid details.kid-tip > div { margin-top: 4px; color: #475569; }
html body.kid details.kid-fold {
background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 8px 12px; margin: 10px 0;
}
html body.kid details.kid-fold > summary {
cursor: pointer; font-weight: 700; font-size: 13.5px; color: #1E3A8A; list-style: none;
}
html body.kid details.kid-fold > summary::-webkit-details-marker { display: none; }
html body.kid details.kid-fold[open] > summary { margin-bottom: 6px; }
/* ---- 8. Nút chuyển bước: to rõ, viền tròn, bóng khối mỏng, hiệu ứng kéo trang ---- */
html body.kid .lt-main .btn-blue,
html body.kid .lt-main .btn-gold { border-radius: 999px; box-shadow: 0 3px 0 #0848A8; transition: transform .12s ease, box-shadow .12s ease; }
html body.kid .lt-main .btn-gold { box-shadow: 0 3px 0 #B45309; }
html body.kid .lt-main .btn-blue:hover,
html body.kid .lt-main .btn-gold:hover { transform: translateY(-1px); }
html body.kid .lt-main .btn-blue:active,
html body.kid .lt-main .btn-gold:active { transform: translateY(2px); box-shadow: 0 1px 0 #0848A8; }
html body.kid .lt-main .btn-line { border-radius: 999px; }
html body.kid .lt-foot .ltp-next {
font-family: Arial, "Lexend", sans-serif; font-size: 16px; letter-spacing: .2px; padding: 10px 20px;
}
/* ---- 9. Thẻ từ, chữ Hán, bong bóng hội thoại: bo tròn, nhích nhẹ khi rê chuột ---- */
html body.kid .lt-main .word,
html body.kid .lt-main .hanzi .c { border-radius: 16px !important; transition: transform .15s ease, border-color .15s ease; }
html body.kid .lt-main .word:hover,
html body.kid .lt-main .hanzi .c:hover { transform: translateY(-2px) !important; border-color: #9CC4FD !important; }
html body.kid .lt-main .line:not(.kara) .bub { border-radius: 18px !important; border: 1.5px solid #D5E3FA !important; }
/* ---- 10. Sân khấu hiệu ứng Sticker & Ngôi sao khích lệ khi chuyển bước (#kidCheerStage) ---- */
.kid-cheer-stage {
position: fixed; inset: 0; pointer-events: none; z-index: 9990; overflow: hidden;
}
.kid-cheer-toast {
position: fixed; right: 18px; top: 76px; max-width: min(370px, calc(100vw - 28px));
display: flex; align-items: center; gap: 12px;
background: var(--st-bg, linear-gradient(135deg, #FEF3C7, #FDE68A));
border: 2.5px solid var(--st-color, #F59E0B);
border-radius: 20px; padding: 10px 14px 10px 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, .16), 0 4px 0 rgba(255, 255, 255, .9) inset;
opacity: 0; transform: translate3d(60px, -10px, 0) scale(.86);
transition: opacity .26s ease, transform .32s cubic-bezier(.22, 1.3, .36, 1);
}
.kid-cheer-toast.is-on {
opacity: 1; transform: translate3d(0, 0, 0) scale(1);
}
.kid-cheer-toast.is-victory {
border-width: 3px; box-shadow: 0 10px 28px rgba(245, 158, 11, .32);
}
.kid-ct-art {
width: 52px; height: 52px; border-radius: 16px; background: #fff;
display: grid; place-items: center; flex-shrink: 0;
box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
animation: kidArtPop .5s cubic-bezier(.22, 1.4, .36, 1) both;
}
@keyframes kidArtPop {
0% { transform: scale(.4) rotate(-18deg); }
70% { transform: scale(1.12) rotate(6deg); }
100% { transform: scale(1) rotate(0deg); }
}
.kid-ct-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kid-ct-badge {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
color: #92400E; background: rgba(255, 255, 255, .78); border-radius: 999px;
padding: 1px 8px; align-self: flex-start;
}
.kid-ct-title {
font-family: Arial, "Lexend", sans-serif; font-size: 17px; font-weight: 800;
color: #0F172A; line-height: 1.15;
}
.kid-ct-sub { font-size: 12.5px; font-weight: 600; color: #334155; line-height: 1.3; }
/* Hạt ngôi sao tung bay khi xong bước / qua bước */
.kid-star-p {
position: fixed; right: 140px; top: 110px; font-size: 20px; line-height: 1;
pointer-events: none; will-change: transform, opacity;
animation: kidStarBurst .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes kidStarBurst {
0% { opacity: 1; transform: translate3d(0, 0, 0) scale(.4) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate3d(var(--dx, 60px), var(--dy, -60px), 0) scale(1.25) rotate(var(--rot, 140deg)); }
}
/* Nhãn khen nhanh khi trả lời đúng câu đố / thẻ nhớ */
.kid-mini-pop {
position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
font-family: Arial, "Lexend", sans-serif; font-size: 16px; font-weight: 800;
padding: 7px 18px; border-radius: 999px;
box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
animation: kidMiniUp 1.25s cubic-bezier(.22, 1, .36, 1) forwards;
}
.kid-mini-pop.ok { background: #FEF3C7; color: #92400E; border: 2px solid #F59E0B; }
.kid-mini-pop.try { background: #EFF6FF; color: #1E40AF; border: 2px solid #60A5FA; }
@keyframes kidMiniUp {
0% { opacity: 0; transform: translate(-50%, 16px) scale(.85); }
20% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
80% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -18px) scale(.95); }
}
@media (max-width: 640px) {
html body.kid .ls-head.lt-head::after { width: 150px; height: 80px; right: 6px; top: 6px; opacity: .55; }
html body.kid .lt-sht h2 { font-size: 19px; }
html body.kid .lt-no { width: 36px; height: 36px; font-size: 17px; }
html body.kid .kid-step-sticker .kid-st-lbl { display: none; }
html body.kid .kid-step-sticker { padding: 3px; }
html body.kid .kid-sr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kid-cheer-toast { right: 10px; left: 10px; top: auto; bottom: 14px; max-width: none; }
.kid-star-p { right: 50%; top: auto; bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
html body.kid .ls-head.lt-head::after,
html body.kid .lt-bar i,
html body.kid .lt-step.ok .lt-no::after,
html body.kid .kid-step-sticker,
.kid-ct-art,
.kid-star-p,
.kid-mini-pop { animation: none !important; }
html body.kid .lt-main .word,
html body.kid .lt-main .hanzi .c,
html body.kid .lt-main .btn-blue,
html body.kid .lt-main .btn-gold,
.kid-cheer-toast { transition: none !important; }
}