/* ============================================================
   AKB-Elearning — ธีมสำหรับเด็กประถม (โหลดต่อจาก app.css)
   ธีม: school (แดง–ส้ม ตามเว็บ akb.ac.th) · sky · candy
   ธีม classic = หน้าตาเดิมทั้งหมด (ไม่มีกฎในไฟล์นี้มีผล เพราะทุกกฎผูกกับ .akb-fun หรือ data-akb-theme)
   ============================================================ */

/* ---------- 1. Tokens ต่อธีม ---------- */
html[data-akb-theme="school"] {
  --akb-primary: #C0392B; --akb-primary-rgb: 192, 57, 43; --akb-primary-dark: #922B21;
  --akb-accent: #F39C12;
  --akb-bg: #fdf7ef; --akb-surface: #ffffff; --akb-surface-2: #fff6ea; --akb-border: #f2e2cc;
  --akb-text: #2b1d16; --akb-muted: #7a6555;
  --akb-grad: linear-gradient(135deg, #C0392B 0%, #E8710A 60%, #F39C12 100%);
  --akb-band: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
  --akb-deep: #1a1a2e;
  --akb-zone: #fff3e3; --akb-zone-2: #eaf3fc; --akb-zone-line: #e67e22;
  --akb-sun: #FFD43B; --akb-sun-dark: #E0A800; --akb-sun-text: #3b2400;
  --k1: #e74c3c; --k2: #f39c12; --k3: #27ae60; --k4: #2e86de; --k5: #8e44ad; --k6: #e84393;
}
html[data-akb-theme="sky"] {
  --akb-primary: #1976d2; --akb-primary-rgb: 25, 118, 210; --akb-primary-dark: #115293;
  --akb-accent: #ffc107;
  --akb-bg: #f0f8ff; --akb-surface: #ffffff; --akb-surface-2: #eaf5ff; --akb-border: #d3e7fa;
  --akb-text: #13283f; --akb-muted: #5a7088;
  --akb-grad: linear-gradient(135deg, #1976d2 0%, #29b6f6 60%, #4dd0e1 100%);
  --akb-band: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
  --akb-deep: #0b2545;
  --akb-zone: #e6f4ff; --akb-zone-2: #ecf9ec; --akb-zone-line: #29b6f6;
  --akb-sun: #FFD43B; --akb-sun-dark: #E0A800; --akb-sun-text: #3b2400;
  --k1: #ef5350; --k2: #ffa726; --k3: #66bb6a; --k4: #29b6f6; --k5: #7e57c2; --k6: #ec407a;
}
html[data-akb-theme="candy"] {
  --akb-primary: #d6337f; --akb-primary-rgb: 214, 51, 127; --akb-primary-dark: #a8235f;
  --akb-accent: #8e5cf7;
  --akb-bg: #fff5fa; --akb-surface: #ffffff; --akb-surface-2: #fff0f7; --akb-border: #f7d6e7;
  --akb-text: #33162a; --akb-muted: #7f5a71;
  --akb-grad: linear-gradient(135deg, #d6337f 0%, #b44fd6 55%, #8e5cf7 100%);
  --akb-band: linear-gradient(135deg, #4a1d6b 0%, #6a2c91 100%);
  --akb-deep: #2a0f3a;
  --akb-zone: #ffeef6; --akb-zone-2: #f1ecff; --akb-zone-line: #e879b0;
  --akb-sun: #6ee7d8; --akb-sun-dark: #2fbfad; --akb-sun-text: #053b35;
  --k1: #f06292; --k2: #ffb74d; --k3: #4db6ac; --k4: #64b5f6; --k5: #9575cd; --k6: #ba68c8;
}

/* โหมดมืดของแต่ละธีม */
html.akb-fun[data-bs-theme="dark"] {
  --akb-surface: #1d1a22; --akb-surface-2: #26222c; --akb-border: #37313f;
  --akb-text: #f1ecf2; --akb-muted: #b4a9b8;
  --akb-deep: #0e0c12;
  --akb-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3);
  --akb-glass: rgba(29, 26, 34, .8);
  --bs-body-bg: var(--akb-bg); --bs-body-color: var(--akb-text);
}
html[data-akb-theme="school"][data-bs-theme="dark"] {
  --akb-primary: #ff7a5c; --akb-primary-rgb: 255, 122, 92; --akb-primary-dark: #e85f41;
  --akb-bg: #15110e; --akb-surface: #1f1a16; --akb-surface-2: #29221c; --akb-border: #3b3028;
  --akb-text: #f6ede5; --akb-muted: #bba897;
  --akb-zone: #22190f; --akb-zone-2: #12223a;
}
html[data-akb-theme="sky"][data-bs-theme="dark"] {
  --akb-primary: #64b5f6; --akb-primary-rgb: 100, 181, 246; --akb-primary-dark: #42a5f5;
  --akb-bg: #0b1622; --akb-surface: #12202f; --akb-surface-2: #182a3c; --akb-border: #24384d;
  --akb-text: #e7f1fb; --akb-muted: #9fb3c8;
  --akb-zone: #0f2133; --akb-zone-2: #10271a;
}
html[data-akb-theme="candy"][data-bs-theme="dark"] {
  --akb-primary: #ff7ac0; --akb-primary-rgb: 255, 122, 192; --akb-primary-dark: #f45aa9;
  --akb-bg: #170f17; --akb-surface: #221722; --akb-surface-2: #2c1e2c; --akb-border: #3e2b3e;
  --akb-text: #f8ecf4; --akb-muted: #c3a8ba;
  --akb-zone: #26121e; --akb-zone-2: #1e1931;
}

/* ---------- 2. พื้นฐาน: ตัวอักษรมีหัว อ่านง่ายสำหรับเด็ก, มุมโค้งมน ---------- */
html.akb-fun {
  --akb-radius: 20px;
  --akb-head: "Mali", "Sarabun", system-ui, sans-serif;
  --bs-primary-text-emphasis: var(--akb-primary-dark);
  --bs-primary-bg-subtle: rgba(var(--akb-primary-rgb), .12);
  --bs-primary-border-subtle: rgba(var(--akb-primary-rgb), .3);
  --bs-border-radius: 12px;
}
/* พื้นหลังลายสัตว์การ์ตูน (ยีราฟ สิงโต ลิง หมี ช้าง แพนด้า ม้าลาย กระต่าย — Fluent Emoji, MIT) */
.akb-fun body {
  font-size: 1.05rem;
  background-color: var(--akb-bg);
  background-image: url("../images/animals/pattern-light.svg");
  background-size: 400px 400px;
  background-attachment: fixed;
}
.akb-fun[data-bs-theme="dark"] body { background-image: url("../images/animals/pattern-dark.svg"); }
.akb-fun h1, .akb-fun h2, .akb-fun h3, .akb-fun h4, .akb-fun h5,
.akb-fun .akb-brand, .akb-fun .akb-heading, .akb-fun .akb-stat-value, .akb-fun .akb-timer, .akb-fun .akb-time {
  font-family: var(--akb-head); font-weight: 700;
}

/* ปุ่ม: ทรงเม็ดยา มีเงาด้านล่างเหมือนปุ่มของเล่น */
.akb-fun .btn { border-radius: 999px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.akb-fun .btn:active { transform: translateY(2px); }
.akb-fun .btn-primary {
  --bs-btn-bg: var(--akb-primary); --bs-btn-border-color: var(--akb-primary);
  --bs-btn-hover-bg: var(--akb-primary-dark); --bs-btn-hover-border-color: var(--akb-primary-dark);
  --bs-btn-active-bg: var(--akb-primary-dark); --bs-btn-active-border-color: var(--akb-primary-dark);
  --bs-btn-disabled-bg: var(--akb-primary); --bs-btn-disabled-border-color: var(--akb-primary);
  box-shadow: 0 3px 0 var(--akb-primary-dark);
}
.akb-fun .btn-primary:active { box-shadow: 0 1px 0 var(--akb-primary-dark); }
.akb-fun .btn-outline-primary {
  --bs-btn-color: var(--akb-primary); --bs-btn-border-color: var(--akb-primary);
  --bs-btn-hover-bg: var(--akb-primary); --bs-btn-hover-border-color: var(--akb-primary);
  --bs-btn-active-bg: var(--akb-primary-dark); --bs-btn-active-border-color: var(--akb-primary-dark);
  border-width: 2px;
}
.akb-fun .btn-success { box-shadow: 0 3px 0 #146c43; }
.akb-fun .btn-danger { box-shadow: 0 3px 0 #a52834; }
.akb-fun .btn-warning { box-shadow: 0 3px 0 #c79100; }
.akb-fun .form-control, .akb-fun .form-select { border-radius: 14px; border-width: 2px; }
.akb-fun .input-group > .input-group-text { border-width: 2px; border-radius: 14px 0 0 14px; }
.akb-fun .input-group > .form-control:not(:first-child) { border-radius: 0 14px 14px 0; }
.akb-fun .input-group > .form-control:not(:last-child) { border-radius: 14px 0 0 14px; }
.akb-fun .input-group > .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.akb-fun .input-group > .btn:last-child { border-radius: 0 14px 14px 0; box-shadow: none; }
.akb-fun .form-check-input:checked { background-color: var(--akb-primary); border-color: var(--akb-primary); }
.akb-fun .form-check-input:focus, .akb-fun .form-select:focus { border-color: var(--akb-primary); box-shadow: 0 0 0 .2rem rgba(var(--akb-primary-rgb), .18); }
.akb-fun .nav-pills { --bs-nav-pills-link-active-bg: var(--akb-primary); --bs-nav-pills-border-radius: 999px; }
.akb-fun .nav-link { --bs-nav-link-color: var(--akb-primary); --bs-nav-link-hover-color: var(--akb-primary-dark); }
.akb-fun .dropdown-menu { --bs-dropdown-link-active-bg: var(--akb-primary); --bs-dropdown-border-radius: 16px; }
.akb-fun .pagination { --bs-pagination-active-bg: var(--akb-primary); --bs-pagination-active-border-color: var(--akb-primary); --bs-pagination-color: var(--akb-primary); }
.akb-fun .progress { --bs-progress-bar-bg: var(--akb-primary); border-radius: 999px; }
.akb-fun .list-group { --bs-list-group-active-bg: var(--akb-primary); --bs-list-group-active-border-color: var(--akb-primary); }
.akb-fun .badge { border-radius: 999px; font-weight: 600; }
.akb-fun .table { --bs-table-bg: transparent; }

/* ---------- 3. โครงหน้าหลังเข้าสู่ระบบ ---------- */
.akb-school-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; background: #fff; padding: 3px; flex: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.akb-fun .akb-sidebar { background: var(--akb-surface); border-right: 0; box-shadow: 4px 0 24px rgba(var(--akb-primary-rgb), .08); }
.akb-fun .akb-sidebar .akb-brand { background: var(--akb-grad); color: #fff; margin: .75rem; border-radius: 18px; padding: .8rem .9rem; line-height: 1.25; }
.akb-fun .akb-sidebar .akb-brand small { color: rgba(255, 255, 255, .85); }
.akb-fun .akb-nav-group { font-family: var(--akb-head); text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; color: var(--akb-muted); }
.akb-fun .akb-nav a, .akb-fun .akb-nav .akb-nav-soon { border-radius: 14px; padding: .5rem .65rem; }
.akb-fun .akb-nav a i, .akb-fun .akb-nav .akb-nav-soon i {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; flex: none;
  color: #fff; background: var(--k4);
}
.akb-fun .akb-nav a:nth-of-type(6n+1) i { background: var(--k1); }
.akb-fun .akb-nav a:nth-of-type(6n+2) i { background: var(--k2); }
.akb-fun .akb-nav a:nth-of-type(6n+3) i { background: var(--k3); }
.akb-fun .akb-nav a:nth-of-type(6n+4) i { background: var(--k4); }
.akb-fun .akb-nav a:nth-of-type(6n+5) i { background: var(--k5); }
.akb-fun .akb-nav a:nth-of-type(6n) i { background: var(--k6); }
.akb-fun .akb-nav .akb-nav-soon i { background: var(--akb-surface-2); color: var(--akb-muted); }
.akb-fun .akb-nav a:hover { background: var(--akb-surface-2); }
.akb-fun .akb-nav a:hover i { transform: rotate(-8deg) scale(1.06); }
.akb-fun .akb-nav a i { transition: transform .15s ease; }
.akb-fun .akb-nav a.active { background: rgba(var(--akb-primary-rgb), .12); color: var(--akb-primary); font-weight: 700; }
.akb-fun .akb-nav a.active i { box-shadow: 0 4px 10px rgba(0, 0, 0, .18); color: #fff; }

.akb-fun .akb-topbar { background: var(--akb-grad); border-bottom: 0; color: #fff; box-shadow: 0 4px 18px rgba(var(--akb-primary-rgb), .25); }
.akb-fun .akb-topbar .akb-heading { color: #fff; }
.akb-fun .akb-topbar .badge { background: rgba(255, 255, 255, .2) !important; color: #fff !important; border-color: transparent !important; }
.akb-fun .akb-topbar .akb-icon-btn { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; border-radius: 50%; }
.akb-fun .akb-topbar .akb-icon-btn:hover { background: rgba(255, 255, 255, .3); }
.akb-fun .akb-topbar > div > .dropdown > .btn, .akb-fun .akb-topbar > div > .dropdown > .btn .akb-muted { color: #fff !important; }
.akb-fun .akb-topbar .akb-avatar { background: #fff; color: var(--akb-primary); }
.akb-fun .akb-footer { text-align: center; }

/* การ์ด */
.akb-fun .akb-card { border: 2px solid var(--akb-border); box-shadow: 0 4px 0 rgba(var(--akb-primary-rgb), .06), 0 10px 26px rgba(var(--akb-primary-rgb), .07); }
.akb-fun .akb-card-header h2 { font-size: 1.12rem; }
.akb-fun .akb-stat-icon { border-radius: 16px; width: 54px; height: 54px; font-size: 1.5rem; }
.akb-fun .akb-hero { background: var(--akb-grad); border-radius: 24px; padding: 1.75rem; box-shadow: 0 10px 30px rgba(var(--akb-primary-rgb), .25); }
.akb-fun .akb-hero h1 { font-size: 1.7rem; }
/* สัตว์การ์ตูนโผล่มุมขวาของแถบทักทาย */
.akb-fun .akb-hero::before {
  content: ""; position: absolute; right: 1rem; bottom: -6px; width: 270px; height: 112px; z-index: 1; pointer-events: none;
  background: url("../images/animals/bear.png") right 0 bottom / 96px no-repeat, url("../images/animals/lion.png") right 84px bottom / 104px no-repeat,
              url("../images/animals/monkey.png") right 176px bottom / 92px no-repeat;
  animation: kid-bob 4s ease-in-out infinite;
}
@media (max-width: 767.98px) { .akb-fun .akb-hero::before { width: 120px; height: 70px; right: .25rem; opacity: .9; background-size: 60px, 64px, 0; background-position: right 0 bottom, right 52px bottom, right 0 bottom; } }
.akb-fun .akb-hero > * { position: relative; z-index: 2; }
.akb-fun .akb-hero .btn-light { color: var(--akb-primary); }

.akb-fun .akb-course, .akb-fun .akb-course-card { border: 2px solid var(--akb-border); border-radius: 18px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.akb-fun .akb-course:hover, .akb-fun .akb-course-card:hover { transform: translateY(-3px) rotate(-.4deg); border-color: rgba(var(--akb-primary-rgb), .45); box-shadow: 0 10px 24px rgba(var(--akb-primary-rgb), .14); }
.akb-fun .akb-progress { height: 10px; background: var(--akb-surface-2); border: 1px solid var(--akb-border); }
.akb-fun .akb-progress > span {
  background: var(--akb-grad);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%), var(--akb-grad);
  background-size: 16px 16px, 100% 100%;
}
.akb-fun .akb-lesson-no { background: rgba(var(--akb-primary-rgb), .14); }
.akb-fun .akb-lesson-no.akb-done { background: #22a35a; }
.akb-fun .akb-lesson-no.akb-doing { background: var(--akb-grad); }
.akb-fun .akb-section-head { border-radius: 18px 18px 0 0; }
.akb-fun .akb-shortcut { border-radius: 16px; border-width: 2px; }
.akb-fun .akb-week-day { border-radius: 14px; }
.akb-fun .akb-slot { border-radius: 8px; border-left-width: 4px; }
.akb-fun .akb-choice { border-width: 2px; border-radius: 14px; }
.akb-fun .akb-empty i { font-size: 2.6rem; opacity: .8; color: var(--akb-primary); }
.akb-fun .akb-auth-card, .akb-fun .akb-cover { border-radius: 16px; }
.akb-fun .akb-banner { border-radius: 24px; }
.akb-fun .breadcrumb { --bs-breadcrumb-divider-color: var(--akb-muted); }
.akb-fun .swal2-popup { border-radius: 24px; font-family: "Sarabun", sans-serif; }
.akb-fun .swal2-title { font-family: var(--akb-head); }
.akb-fun .swal2-styled { border-radius: 999px !important; }

/* ---------- 4. ปุ่มเลือกธีม ---------- */
.akb-theme-menu { min-width: 270px; }
.akb-theme-item { display: flex; align-items: center; gap: .75rem; border-radius: 12px; padding: .55rem .6rem; white-space: normal; }
.akb-theme-item .akb-theme-desc { color: var(--akb-muted); }
.akb-theme-item.active, .akb-theme-item:active { background: rgba(var(--akb-primary-rgb), .1); color: var(--akb-text); }
.akb-theme-item .akb-theme-check { color: var(--akb-primary); visibility: hidden; }
.akb-theme-item.active .akb-theme-check { visibility: visible; }
.akb-swatch { display: inline-flex; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; transform: rotate(-30deg);
  box-shadow: 0 0 0 2px var(--akb-surface), 0 0 0 3px var(--akb-border); }
.akb-swatch span { flex: 1; }

/* ---------- 5. หน้าสาธารณะ (layouts/kids.php) ---------- */
.kid-body { background-color: var(--akb-bg); }
.kid-topbar { background: var(--akb-deep); color: rgba(255, 255, 255, .8); font-size: .85rem; padding: .35rem 0; }
.kid-topbar a { color: rgba(255, 255, 255, .85); }
.kid-topbar a:hover { color: #fff; }
.kid-navbar { background: var(--akb-grad); box-shadow: 0 4px 20px rgba(var(--akb-primary-rgb), .3); padding: .55rem 0; }
.kid-navbar .nav-link { color: rgba(255, 255, 255, .92); font-weight: 600; border-radius: 999px; padding: .45rem .9rem !important; }
.kid-navbar .nav-link:hover, .kid-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .18); }
.kid-navbar .akb-icon-btn { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; border-radius: 50%; }
.kid-navbar .navbar-toggler { color: #fff; }
.kid-navbar .dropdown-menu { --bs-dropdown-bg: var(--akb-surface); --bs-dropdown-color: var(--akb-text); --bs-dropdown-link-color: var(--akb-text); --bs-dropdown-link-hover-bg: var(--akb-surface-2); --bs-dropdown-link-hover-color: var(--akb-text); }
.kid-brand { display: flex; align-items: center; gap: .65rem; color: #fff !important; }
.kid-brand-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.kid-brand-name { display: block; font-family: var(--akb-head); font-weight: 700; font-size: 1.2rem; }
.kid-brand-sub { display: block; font-size: .78rem; opacity: .9; }
@media (max-width: 575.98px) { .kid-brand-sub { display: none; } .kid-brand-logo { width: 42px; height: 42px; } }
@media (max-width: 991.98px) { .kid-navbar .navbar-collapse { padding: .5rem 0; } }

.kid-btn-sun { background: var(--akb-sun); color: var(--akb-sun-text) !important; border: 0; box-shadow: 0 4px 0 var(--akb-sun-dark); }
.kid-btn-sun:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kid-btn-sun:active { box-shadow: 0 1px 0 var(--akb-sun-dark); }
.kid-btn-ghost { background: rgba(255, 255, 255, .18); color: #fff !important; border: 2px solid rgba(255, 255, 255, .55); }
.kid-btn-ghost:hover { background: rgba(255, 255, 255, .28); }

/* สไลด์หน้าแรก: เต็มความกว้างจอ ชั้นเดียว — สไลด์แรกคือข้อความต้อนรับ + สัตว์การ์ตูน ตามด้วยแบนเนอร์จาก Admin */
.kid-slider { position: relative; background: var(--akb-grad); color: #fff; }
.kid-slider .carousel-item { height: clamp(300px, min(31.25vw, 55vh), 600px); overflow: hidden; } /* สัดส่วน 1920×600 และไม่สูงเกิน 55% ของจอ */
.kid-slide-hero { background: var(--akb-grad); }
.kid-slide-hero::before, .kid-slide-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.kid-slide-hero::before { width: 520px; height: 520px; right: -140px; top: -220px; }
.kid-slide-hero::after { width: 300px; height: 300px; left: -120px; bottom: -170px; }
.kid-slide-text { position: relative; z-index: 3; padding: 1.25rem 0 2.5rem; }
.kid-hero-title { font-family: var(--akb-head); font-weight: 700; font-size: clamp(1.8rem, min(3.6vw, 6.2vh), 3rem); line-height: 1.2; margin-bottom: .5rem; text-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.kid-hero-text { font-size: 1.08rem; max-width: 540px; opacity: .95; margin-bottom: 1.1rem; }
.kid-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .22); font-weight: 600; }

/* กลุ่มสัตว์ยืนบนหญ้า ด้านขวาของสไลด์แรก — กล่องย่อ/ขยายตามความสูงสไลด์ (กว้าง = 1.45 × สูง) */
.kid-animals { position: absolute; right: 1%; bottom: 0; height: 94%; aspect-ratio: 1.45; z-index: 2; pointer-events: none; }
.kid-animal { position: absolute; width: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .22)); animation: kid-bob 5s ease-in-out infinite; }
.a-giraffe { height: 80%; left: 6%; bottom: 10%; animation-delay: -1s; }
.a-elephant { height: 54%; right: 0; bottom: 18%; animation-delay: -2.2s; }
.a-monkey { height: 42%; left: 0; bottom: 2%; animation-delay: -3.1s; }
.a-lion { height: 50%; left: 34%; bottom: 0; animation-delay: -.4s; }
.a-bear { height: 47%; right: 8%; bottom: 1%; animation-delay: -1.8s; }
@media (min-width: 768px) and (max-width: 991.98px) { .kid-animals { height: 66%; } }
.kid-grass { position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; z-index: 1; pointer-events: none;
  background: radial-gradient(34px 30px at 34px 46px, rgba(255, 255, 255, .22) 98%, transparent 100%) repeat-x; background-size: 68px 46px; }

.kid-float { position: absolute; font-size: 2rem; z-index: 2; pointer-events: none; animation: kid-bob 5s ease-in-out infinite; }
.kid-float-1 { top: 12%; left: 44%; }
.kid-float-2 { top: 9%; right: 5%; font-size: 2.6rem; animation-delay: -1.2s; }
.kid-float-3 { bottom: 10%; left: 52%; animation-delay: -2.4s; }
.kid-float-4 { top: 30%; right: 42%; animation-delay: -3.6s; }
@keyframes kid-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* สไลด์แบนเนอร์: รูปเต็มสไลด์ ไม่ถูกตัด (พื้นหลังเป็นรูปเดียวกันแบบเบลอ) */
.kid-slide-banner { background: var(--akb-deep); }
.kid-slide-blur { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(24px) brightness(.8); }
.kid-slide-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.kid-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 0 3.2rem; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); }
.kid-slide-caption h2 { font-family: var(--akb-head); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.4rem); margin: 0 0 .3rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.kid-slide-caption p { margin: 0 0 .8rem; max-width: 640px; opacity: .95; }

.kid-slider .carousel-indicators { z-index: 4; margin-bottom: .9rem; }
.kid-slider .carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; border: 0; margin: 0 5px; opacity: .55; }
.kid-slider .carousel-indicators .active { opacity: 1; width: 30px; border-radius: 99px; background: var(--akb-sun); }
.kid-slider .carousel-control-prev, .kid-slider .carousel-control-next { z-index: 4; width: 56px; opacity: .7; }
.kid-slider .carousel-control-prev:hover, .kid-slider .carousel-control-next:hover { opacity: 1; }
@media (max-width: 1199.98px) { .kid-slider .carousel-control-prev, .kid-slider .carousel-control-next { display: none; } }
.kid-slider .carousel-control-prev-icon, .kid-slider .carousel-control-next-icon { width: 44px; height: 44px; border-radius: 50%; background-color: rgba(0, 0, 0, .2); background-size: 45%; }

@media (max-width: 767.98px) {
  .kid-slider .carousel-item { height: 450px; }
  .kid-slide-text { padding: 1.25rem .25rem 0; align-self: flex-start; }
  .kid-animals { height: 120px; right: 50%; transform: translateX(50%); }
  .kid-float-1, .kid-float-3, .kid-float-4 { display: none; }
  .kid-float { font-size: 1.6rem; opacity: .8; }
  .kid-hero-text { font-size: 1.02rem; }
  .kid-slide-caption { padding: 3rem 0 2.8rem; }
  .kid-slide-caption p { display: none; }
  .kid-slider .carousel-control-prev, .kid-slider .carousel-control-next { display: none; }
}

/* แถบทางลัด (สีน้ำเงินเข้มแบบเว็บหลัก) */
.kid-band { background: var(--akb-band); padding: 2rem 0; }
.kid-tile { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem .5rem; border-radius: 20px; height: 100%; text-align: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: transform .15s ease, background .15s ease; }
.kid-tile:hover { color: #fff; background: rgba(255, 255, 255, .14); transform: translateY(-4px); }
.kid-tile:hover .kid-tile-icon { transform: scale(1.1) rotate(-6deg); }
.kid-tile-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.7rem; color: #fff; transition: transform .2s ease;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .2); }
.kid-tile-icon.t1 { background: var(--k1); } .kid-tile-icon.t2 { background: var(--k2); } .kid-tile-icon.t3 { background: var(--k3); }
.kid-tile-icon.t4 { background: var(--k4); } .kid-tile-icon.t5 { background: var(--k5); } .kid-tile-icon.t6 { background: var(--k6); }
.kid-tile-label { font-weight: 600; font-size: .95rem; }
@media (max-width: 575.98px) { .kid-tile-icon { width: 48px; height: 48px; font-size: 1.35rem; border-radius: 14px; } .kid-tile-label { font-size: .85rem; } }

/* โซนเนื้อหา: พื้นสีอ่อน + ภาพตกแต่งด้านข้าง */
.kid-zone { position: relative; isolation: isolate; overflow: hidden; padding: 3rem 0 3.5rem; background: var(--akb-zone);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--akb-zone-line) 55%, transparent); }
.kid-zone-alt { background: var(--akb-zone-2); }
.kid-zone::before, .kid-zone::after { content: ""; position: absolute; bottom: 0; z-index: -1; pointer-events: none; }
/* school: ภาพป่าเขตร้อนจากเว็บหลัก */
[data-akb-theme="school"] .kid-zone::before, [data-akb-theme="school"] .kid-zone::after {
  height: min(100%, 400px); aspect-ratio: 250 / 417; background-size: cover; background-repeat: no-repeat; mix-blend-mode: multiply; opacity: .78;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
[data-akb-theme="school"] .kid-zone::before { left: 0; background-image: url("../images/amazon-left.jpg"); background-position: left bottom;
  -webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%), linear-gradient(to top, #000 60%, transparent 100%);
  mask-image: linear-gradient(to right, #000 45%, transparent 100%), linear-gradient(to top, #000 60%, transparent 100%); }
[data-akb-theme="school"] .kid-zone::after { right: 0; background-image: url("../images/amazon-right.jpg"); background-position: right bottom;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to top, #000 60%, transparent 100%);
  mask-image: linear-gradient(to left, #000 45%, transparent 100%), linear-gradient(to top, #000 60%, transparent 100%); }
[data-akb-theme="school"][data-bs-theme="dark"] .kid-zone::before, [data-akb-theme="school"][data-bs-theme="dark"] .kid-zone::after { mix-blend-mode: normal; opacity: .18; }
@media (max-width: 991.98px) { [data-akb-theme="school"] .kid-zone::before, [data-akb-theme="school"] .kid-zone::after { opacity: .4; height: min(100%, 280px); } }
/* sky: ก้อนเมฆ */
[data-akb-theme="sky"] .kid-zone::before, [data-akb-theme="sky"] .kid-zone::after {
  width: 260px; height: 110px; opacity: .9;
  background: radial-gradient(circle at 30% 70%, #fff 34px, transparent 35px), radial-gradient(circle at 55% 45%, #fff 46px, transparent 47px),
              radial-gradient(circle at 78% 70%, #fff 32px, transparent 33px), radial-gradient(ellipse 120px 26px at 55% 88%, #fff 98%, transparent 100%);
}
[data-akb-theme="sky"] .kid-zone::before { left: -40px; top: 18px; bottom: auto; }
[data-akb-theme="sky"] .kid-zone::after { right: -50px; bottom: 10px; transform: scale(.8); }
[data-akb-theme="sky"][data-bs-theme="dark"] .kid-zone::before, [data-akb-theme="sky"][data-bs-theme="dark"] .kid-zone::after { opacity: .07; }
/* candy: จุดสีเหมือนลูกกวาด */
[data-akb-theme="candy"] .kid-zone::before, [data-akb-theme="candy"] .kid-zone::after {
  inset: 0; opacity: .5;
  background:
    radial-gradient(circle at 6% 20%, #f9a8d4 9px, transparent 10px), radial-gradient(circle at 12% 78%, #c4b5fd 12px, transparent 13px),
    radial-gradient(circle at 3% 55%, #99f6e4 7px, transparent 8px), radial-gradient(circle at 95% 15%, #c4b5fd 10px, transparent 11px),
    radial-gradient(circle at 90% 60%, #fbcfe8 14px, transparent 15px), radial-gradient(circle at 97% 88%, #99f6e4 9px, transparent 10px);
}
[data-akb-theme="candy"] .kid-zone::after { display: none; }
[data-akb-theme="candy"][data-bs-theme="dark"] .kid-zone::before { opacity: .15; }

.kid-title { text-align: center; font-family: var(--akb-head); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .25rem; }
.kid-title span { display: inline-flex; align-items: center; gap: 18px; }
.kid-title span::before, .kid-title span::after { content: ""; width: clamp(28px, 6vw, 64px); height: 4px; border-radius: 4px; flex: none; }
.kid-title span::before { background: linear-gradient(90deg, transparent, var(--akb-primary)); }
.kid-title span::after { background: linear-gradient(90deg, var(--akb-accent), transparent); }
.kid-subtitle { text-align: center; color: var(--akb-muted); margin-bottom: 2rem; font-size: 1.05rem; }

.kid-course { background: var(--akb-surface); border: 2px solid var(--akb-border); border-radius: 22px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 5px 0 rgba(var(--akb-primary-rgb), .08); }
.kid-course:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 14px 30px rgba(var(--akb-primary-rgb), .18); }
.kid-course-cover { border-radius: 0 !important; }
.kid-course-title { font-family: var(--akb-head); font-weight: 700; font-size: 1.1rem; margin: .45rem 0 .25rem; line-height: 1.35; }
.kid-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(var(--akb-primary-rgb), .12); color: var(--akb-primary); }
.kid-tag-hot { background: rgba(231, 76, 60, .14); color: #d63c2c; margin-bottom: .2rem; }

.kid-step { position: relative; background: var(--akb-surface); border: 2px dashed rgba(var(--akb-primary-rgb), .35); border-radius: 24px; padding: 1.75rem 1.5rem 1.5rem; text-align: center; }
.kid-step-no { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--akb-head); font-weight: 700; font-size: 1.2rem; color: #fff; background: var(--akb-grad); box-shadow: 0 4px 0 var(--akb-primary-dark); }
.kid-step-emoji { display: block; font-size: 2.8rem; margin: .25rem 0 .4rem; }
.kid-step-head { font-family: var(--akb-head); font-weight: 700; font-size: 1.2rem; margin-bottom: .25rem; }

.kid-news { display: flex; gap: 1rem; align-items: flex-start; background: var(--akb-surface); border: 2px solid var(--akb-border); border-radius: 20px; padding: 1rem 1.1rem; }
.kid-date { flex: none; width: 60px; border-radius: 16px; text-align: center; color: #fff; background: var(--akb-grad); padding: .35rem 0 .45rem; line-height: 1.1;
  box-shadow: 0 4px 0 var(--akb-primary-dark); }
.kid-date strong { display: block; font-family: var(--akb-head); font-size: 1.6rem; }
.kid-date span { font-size: .8rem; }
.kid-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kid-empty-emoji { display: block; font-size: 2.6rem; margin-bottom: .35rem; }

.kid-banner .akb-banner-caption h2 { font-family: var(--akb-head); }

.kid-footer { position: relative; margin-top: 3.5rem; color: #fff; background: var(--akb-deep); }
.kid-footer-wave { position: absolute; left: 0; right: 0; top: -28px; height: 30px;
  background: radial-gradient(28px 30px at 28px 30px, var(--akb-deep) 98%, transparent 100%) repeat-x; background-size: 56px 30px; }
.kid-footer-logo { width: 58px; height: 58px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; }
.kid-footer-title { font-family: var(--akb-head); font-weight: 700; font-size: 1.2rem; }
.kid-footer-link { color: #fff; display: inline-flex; align-items: center; padding: .4rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.kid-footer-link:hover { color: #fff; background: rgba(255, 255, 255, .2); }

/* หน้าเข้าสู่ระบบ */
.kid-auth { position: relative; overflow: hidden; min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: var(--akb-grad); }
.kid-auth::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .18) 2px, transparent 2.5px); background-size: 28px 28px; }
.kid-auth-card { position: relative; z-index: 2; width: 100%; max-width: 860px; display: grid; grid-template-columns: 5fr 6fr; border-radius: 30px; overflow: hidden;
  background: var(--akb-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.kid-auth-side { position: relative; padding: 2.5rem 2rem; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--akb-band); }
.kid-auth-logo { width: 120px; height: 120px; object-fit: contain; border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); margin-bottom: 1.25rem;
  animation: kid-bob 5s ease-in-out infinite; }
.kid-auth-hello { font-family: var(--akb-head); font-weight: 700; font-size: 2rem; margin-bottom: .35rem; }
.kid-auth-form { padding: 2.25rem 2rem; }
.kid-auth-title { font-family: var(--akb-head); font-weight: 700; font-size: 1.45rem; color: var(--akb-primary); }
@media (max-width: 767.98px) {
  .kid-auth-card { grid-template-columns: 1fr; max-width: 440px; }
  .kid-auth-side { padding: 1.5rem 1.25rem; }
  .kid-auth-logo { width: 84px; height: 84px; margin-bottom: .75rem; }
  .kid-auth-hello { font-size: 1.5rem; }
  .kid-auth-form { padding: 1.5rem 1.25rem; }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .kid-float, .kid-animal, .kid-auth-logo, .akb-fun .akb-hero::before { animation: none; }
  .akb-fun .btn, .kid-tile, .kid-course, .akb-fun .akb-course, .akb-fun .akb-course-card { transition: none; }
}

/* จอโทรศัพท์: ให้แถบเมนูบนพอดีจอ */
@media (max-width: 575.98px) {
  .kid-navbar .container { flex-wrap: nowrap; gap: .4rem; }
  .kid-navbar .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; background: var(--akb-grad); padding: .5rem 1rem 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, .15); }
  .kid-brand { gap: .45rem; min-width: 0; margin-right: 0; }
  .kid-brand-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kid-navbar .akb-icon-btn { width: 34px; height: 34px; }
  .kid-navbar .kid-btn-sun { padding: .35rem .65rem; }
  .kid-navbar .order-lg-last { gap: .35rem !important; flex: none; }
  .kid-hero-text { font-size: 1.02rem; }
}

/* สัตว์การ์ตูนในหน้าเข้าสู่ระบบ */
.kid-auth-animals { display: flex; align-items: flex-end; justify-content: center; gap: .25rem; margin-top: 1.5rem; }
.kid-auth-animals img { width: 68px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); animation: kid-bob 4.5s ease-in-out infinite; }
.kid-auth-animals img:nth-child(2) { animation-delay: -1s; width: 74px; }
.kid-auth-animals img:nth-child(3) { animation-delay: -2s; width: 82px; }
.kid-auth-animals img:nth-child(4) { animation-delay: -3s; }
@media (max-width: 767.98px) { .kid-auth-animals { margin-top: .75rem; } .kid-auth-animals img { width: 46px !important; } }
@media (prefers-reduced-motion: reduce) { .kid-auth-animals img { animation: none; } }

/* สมัครสมาชิก */
.kid-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kid-register-card { max-width: 920px; }
.kid-steps-mini { text-align: left; margin: 1.25rem 0 0; padding-left: 1.2rem; font-weight: 600; }
.kid-steps-mini li { margin-bottom: .35rem; }
.kid-auth-single { grid-template-columns: 1fr; max-width: 480px; }
.kid-big-emoji { display: block; font-size: 3.5rem; margin-bottom: .5rem; }

/* ธีมเดิม: ค่าสีสำรองให้หน้าที่ใช้ร่วมกัน (สมัครสมาชิก / รายวิชาสาธารณะ) */
html[data-akb-theme="classic"] {
  --akb-grad: linear-gradient(120deg, #2f5bea 0%, #5b3df5 60%, #7c4dff 100%);
  --akb-band: linear-gradient(135deg, #1e2a5a 0%, #2a2f6e 100%);
  --akb-deep: #141a33; --akb-primary-dark: #2449c9;
  --akb-sun: #ffd43b; --akb-sun-dark: #e0a800; --akb-sun-text: #3b2400;
  --akb-head: "Prompt", "Sarabun", sans-serif;
  --akb-zone: #eef2ff; --akb-zone-2: #f4f6fb; --akb-zone-line: #2f5bea;
  --k1: #e74c3c; --k2: #f39c12; --k3: #27ae60; --k4: #2e86de; --k5: #8e44ad; --k6: #e84393;
}

/* การ์ดเกมสังข์ทองบนหน้าแรก */
.kid-game-wrap { padding: 2.5rem 0 1rem; background: var(--akb-bg); }
.kid-game { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; border-radius: 28px; overflow: hidden;
  background: var(--akb-band); color: #fff; box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.kid-game-img { display: block; position: relative; min-height: 240px; }
.kid-game-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.kid-game-img:hover img { transform: scale(1.03); }
.kid-game-body { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .75rem; }
.kid-game-title { font-family: var(--akb-head); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 0; }
.kid-game-text { opacity: .92; margin: 0 0 .5rem; font-size: 1.05rem; }
@media (max-width: 767.98px) { .kid-game { grid-template-columns: 1fr; } .kid-game-img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .kid-game-img img { transition: none; } }