/* CO-CHU-0311 */
/* Giao diện trang Khóa học & Bài học (02/11/2026):
   - Mặc định (HSK, Đi làm): Phong cách MIX (Hiện đại + Soft-Cartoon tươi tắn, có gờ 3D mềm và màu sắc điểm nhấn).
   - Riêng YCT Kids Trẻ lớn (body.kid): giao diện gọn, không hoạt hình (sửa 04/11/2026). */

body {
  background: radial-gradient(ellipse at top right, #E0F2FE 0%, transparent 55%), #F4F8FB;
  color: #0F172A;
}

/* --- 1. PHONG CÁCH MIX CHO BÀI HỌC NGƯỜI LỚN / HSK / ĐI LÀM --- */
.ls-head {
  background: radial-gradient(900px 300px at 85% 0%, rgba(59, 139, 247, .35), transparent 65%),
              linear-gradient(135deg, #0B1B3F 0%, #1E3A8A 55%, #0B6CF3 100%) !important;
  color: #FFFFFF !important;
  border-bottom: 3px solid #3B82F6;
  position: relative;
}
.ls-head h1, .ls-head h1 .zh { color: #FFFFFF !important; }
.ls-head h1 .zh {
  display: inline-block;
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  color: #0B1B3F !important;
  border: 2px solid #3B82F6;
  border-radius: 12px;
  padding: 0 11px;
  box-shadow: 0 3px 0 #1D4ED8;
}
.ls-head .meta, .ls-head p, .ls-head a { color: #E2E8F0 !important; }

.ls-nav { background: rgba(255, 255, 255, .96) !important; border-bottom: 2px solid #DCE6F7 !important; }
.ls-nav a {
  border: 1.5px solid transparent;
  border-radius: 999px !important;
  font-size: 14.5px !important;
  font-family: Arial, sans-serif;
  transition: transform .15s, background .15s, border-color .15s;
}
.ls-nav a:hover { background: #EFF6FF !important; border-color: #3B82F6; color: #0B1B3F !important; transform: translateY(-1px); }

.blk {
  border: 1.5px solid #BFDBFE !important;
  border-top: 4px solid #2563EB !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 0 #DBEAFE, 0 10px 24px rgba(15, 23, 42, .05) !important;
  background: #FFFFFF !important;
  position: relative;
}
.blk:nth-of-type(3n+2) { border-color: #A7F3D0 !important; border-top-color: #1056B9 !important; box-shadow: 0 4px 0 #D1FAE5, 0 10px 24px rgba(15, 23, 42, .05) !important; }
.blk:nth-of-type(3n) { border-color: #BFDBFE !important; border-top-color: #3B82F6 !important; box-shadow: 0 4px 0 #DBEAFE, 0 10px 24px rgba(15, 23, 42, .05) !important; }
.blk > h2 { font-family: Arial, sans-serif; }

.word {
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  box-shadow: 0 3px 0 #E2E8F0;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), border-color .15s, box-shadow .18s;
}
.word:hover {
  transform: translateY(-3px);
  border-color: #3B82F6 !important;
  box-shadow: 0 5px 0 #BFDBFE, 0 8px 18px rgba(15, 23, 42, .07);
}
.snd {
  border: 1.5px solid #3B82F6 !important;
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE) !important;
  color: #1E3A8A !important;
  box-shadow: 0 2px 0 #2563EB !important;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.snd:hover { background: #93C5FD !important; color: #0B1B3F !important; transform: scale(1.08); }
.snd:active { transform: translateY(1px); box-shadow: none !important; }

.line .bub {
  border: 1.5px solid #CBD5E1;
  background: #FFFFFF !important;
  border-radius: 6px 18px 18px 18px !important;
  box-shadow: 0 3px 0 #E2E8F0;
}
.line.r .bub {
  background: #EFF6FF !important;
  border-color: #93C5FD;
  border-radius: 18px 6px 18px 18px !important;
  box-shadow: 0 3px 0 #DBEAFE;
}
.line .av { border: 2px solid #FFFFFF; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); }
.line.playing .bub { box-shadow: 0 0 0 3px #3B82F6 !important; }

.hanzi .c {
  border: 1.5px solid #93C5FD !important;
  border-radius: 18px !important;
  background: linear-gradient(160deg, #EFF6FF, #FFFFFF) !important;
  box-shadow: 0 3px 0 #BFDBFE !important;
  transition: transform .18s;
}
.hanzi .c:hover { transform: translateY(-2px); }

.qz .qt .n {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE) !important;
  color: #0B1B3F !important;
  border: 1.5px solid #3B82F6;
  box-shadow: 0 2px 0 #2563EB;
  border-radius: 50% !important;
}
.ch-opts button, .pairs button, .chips2 button {
  border: 1.5px solid #93C5FD !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 0 #DBEAFE !important;
  background: #FFFFFF;
  font-weight: 600;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.ch-opts button:hover, .pairs button:hover, .chips2 button:hover {
  transform: translateY(-2px);
  background: #EFF6FF;
  border-color: #3B82F6 !important;
  box-shadow: 0 4px 0 #BFDBFE !important;
}
.ch-opts button.right, .pairs button.right { background: #DBEAFE !important; border-color: #16A34A !important; box-shadow: 0 3px 0 #86EFAC !important; animation: lc-pop .4s; }
.ch-opts button.wrong, .pairs button.wrong { background: #E4EFFF !important; border-color: #1D6FE1 !important; box-shadow: 0 3px 0 #A4C9FD !important; animation: lc-shake .35s; }
.ls-bar { border: 1.5px solid #CBD5E1; border-radius: 999px !important; overflow: hidden; }
.ls-bar > * { background: linear-gradient(90deg, #1056B9, #3B82F6) !important; }
body.ls-body:not(.kid):not(.learning-playful)::after { display: none !important; }

/* --- 2. YCT KIDS PHONG CÁCH TRẺ LỚN (body.kid), 04/11/2026 22:13: bỏ chất hoạt hình (nền chấm bi, viền dày, bóng khối cứng,
   chữ nghiêng lệch, linh vật nổi). Bài Trẻ lớn dùng giao diện gọn như bài HSK, màu theo quy ước site. --- */
body.kid { background: #F7F9FC !important; background-image: none !important; }
body.kid .ls-head h1 .zh { border: 0 !important; box-shadow: none !important; transform: none !important; }
body.kid .blk { border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(11, 27, 63, .06) !important; }
body.kid .word, body.kid .hanzi .c, body.kid .line .bub { border: 1px solid #D5E3FA !important; box-shadow: none !important; transform: none !important; }
body.kid .snd { border: 1px solid #9CC4FD !important; box-shadow: none !important; transform: none !important; }
body.kid .ch-opts button, body.kid .pairs button, body.kid .chips2 button { border: 1px solid #D5E3FA !important; border-radius: 12px !important; box-shadow: none !important; }
body.kid::after { content: none !important; display: none !important; }
@keyframes lc-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes lc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes lc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ===== RÀ SOÁT MÀU 04/11/2026: tối đa 3 màu (trung tính, xanh dương #0B6CF3, đỏ nhấn). Báo cáo: bao-cao/ra-soat-mau-2026-11-04.md ===== */
html body .ls-head { background: radial-gradient(900px 300px at 85% 0%, rgba(43, 130, 251, .35), transparent 65%), linear-gradient(135deg, #0B1B3F 0%, #0450C2 100%) !important; }
html body .blk:nth-of-type(3n+2) { border-color: #BFDBFE !important; border-top-color: #0B6CF3 !important; box-shadow: 0 4px 0 #DBEAFE, 0 10px 24px rgba(15, 23, 42, .05) !important; }
html body .ls-bar > * { background: linear-gradient(90deg, #0450C2, #2B82FB) !important; }
html body .ch-opts button.right, html body .pairs button.right { background: #E7F0FE !important; border-color: #0B6CF3 !important; box-shadow: 0 3px 0 #9CC4FD !important; }
html body .w-links .w-app { background: #EFF6FF !important; border-color: #BFDBFE !important; }
html body .hanzi .c { background: linear-gradient(160deg, #F7F9FC, #fff) !important; border-color: #D5E3FA !important; }
html body .culture { background: linear-gradient(135deg, #F7F9FC, #FFFFFF) !important; border-color: #D5E3FA !important; }
html body .ls-nav .ls-pct { background: #E7F0FE !important; color: #0450C2 !important; }
html body .ls-nav a.on .ls-pct { background: #0B6CF3 !important; color: #fff !important; }
html body #nhom-luyen .grp-no { background: #0B6CF3 !important; }
html body .pg-num { background: #E7F0FE !important; border-color: #0B6CF3 !important; }
html body .pg-num b, html body .pg-g li.ok a { color: #0450C2 !important; }
html body .kid .blk > h2 { color: #0450C2 !important; }
/* Chế độ trẻ em / vui nhộn: bỏ nền kem, bạc hà, cam, tím, đổi sang xanh dương nhạt */
html body.kid .ls-head, html body.learning-playful .ls-head, html body .kid .ls-head { background: radial-gradient(900px 300px at 85% -10%, rgba(156, 196, 253, .6), transparent 60%), linear-gradient(160deg, #D5E3FA, #E7F0FE) !important; }
html body.kid .ls-head h1 .zh, html body.learning-playful .ls-head h1 .zh { background: #FFFFFF !important; }
html body.kid .ls-nav, html body.learning-playful .ls-nav, html body.kid::after, html body.learning-playful::after { background: #F7F9FC !important; }
html body.kid .ls-nav a.on, html body.learning-playful .ls-nav a.on, html body.kid .word, html body.learning-playful .word, html body.kid .hanzi .c, html body.learning-playful .hanzi .c { background: #E7F0FE !important; }
html body.kid .blk, html body.learning-playful .blk { background: #FFFFFF !important; }
html body.kid .blk:nth-of-type(odd), html body.learning-playful .blk:nth-of-type(odd) { background: #F7F9FC !important; }
html body .pill[style*="DCFCE7"], html body .fb.ok { background: #E7F0FE !important; color: #0450C2 !important; }