/* ธีมรวมทั้งเว็บ (22 ก.ย. 2569) · หลัก Berry Red + Navy + Champagne · สีเสริมกลมกลืน: ทอง · เขียวหยก · ฟ้า
   โหลดเป็นไฟล์สุดท้าย ปรับทุกหน้าให้เป็นแนวแอปเดียวกับหน้าแรก */
:root{--t-berry:#C32148;--t-berry-d:#9F1937;--t-berry-s:#FBE9EE;--t-navy:#172A46;--t-navy-2:#2A4670;--t-navy-s:#E9EEF6;--t-champ:#F7E7CE;--t-cream:#FFF8EF;--t-gold:#D9982B;--t-gold-s:#FFF3DC;--t-teal:#1E8C85;--t-teal-s:#E2F4F1;--t-sky:#3F7CC4;--t-sky-s:#E8F1FB;--t-ink:#172A46;--t-muted:#5E6878;--t-line:#EFE2D0;--t-shadow:0 4px 18px #172A4614}
html body,html body .workspace{background:var(--t-cream)!important;color:var(--t-ink)}
body .topbar{background:#fffffff2!important;backdrop-filter:blur(8px);border-bottom:1px solid var(--t-line)!important;box-shadow:0 2px 12px #172A460d!important}
body .sidebar{background:#fff!important;border-right:1px solid var(--t-line)}
body .sidebar #navigation a{border-radius:12px}
body .sidebar #navigation a.active{background:var(--t-berry-s)!important;color:var(--t-berry)!important;font-weight:800}
body .sidebar-note{background:linear-gradient(145deg,var(--t-champ),#fff 70%)!important;border:1px solid var(--t-line)}

/* หัวของแต่ละหน้า = แบนเนอร์สี (สีเปลี่ยนตามหน้า) */
body #main .page-heading{position:relative;overflow:hidden;border-radius:22px;padding:26px 22px!important;margin-bottom:18px;color:#fff;background:linear-gradient(125deg,var(--h1,#172A46),var(--h2,#2A4670))!important;box-shadow:0 10px 26px #172A4626;border:0!important;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
body #main .page-heading:before,body #main .page-heading:after{content:"";position:absolute;border-radius:50%;background:#ffffff1a;pointer-events:none}
body #main .page-heading:before{width:190px;height:190px;right:-50px;top:-70px}
body #main .page-heading:after{width:110px;height:110px;right:70px;bottom:-60px;background:#ffffff12}
body #main .page-heading>div{position:relative;z-index:1}
body #main .page-heading h1{color:#fff!important;margin:6px 0!important;font-size:clamp(24px,5vw,34px)}
body #main .page-heading p{color:#ffffffe0!important;margin:0}
body #main .page-heading .eyebrow{display:inline-block;color:#fff!important;background:#ffffff26;padding:3px 11px;border-radius:99px;font-size:11px;letter-spacing:.06em}
body #main .page-heading .date-pill{position:relative;z-index:1;background:#fff!important;color:var(--h1,#172A46)!important;border:0!important;white-space:nowrap}
body[data-route=rooms]{--h1:#C32148;--h2:#7E1330}
body[data-route=courses],body[data-route=plans]{--h1:#172A46;--h2:#3F7CC4}
body[data-route=affiliate],body[data-route=affiliate-wallet]{--h1:#D9982B;--h2:#C32148}
body[data-route=booking]{--h1:#1E8C85;--h2:#172A46}
body[data-route=books],body[data-route=cart]{--h1:#3F7CC4;--h2:#1E8C85}
body[data-route=level-test]{--h1:#1E8C85;--h2:#3F7CC4}
body[data-route=about],body[data-route=contact]{--h1:#172A46;--h2:#C32148}

/* การ์ด / แผง */
body #main .panel,body #main .course-card,body #main .room-card,body #main .teacher-card,body #main .shop-product,body #main .status-card,body #main .notice-card,body #main .intro-banner{background:#fff;border:1px solid var(--t-line)!important;border-radius:18px!important;box-shadow:var(--t-shadow)!important}
body #main .panel{position:relative;overflow:hidden}
body #main .panel:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--acc,var(--t-berry))}
body #main .panel:nth-of-type(4n+2){--acc:var(--t-teal)}body #main .panel:nth-of-type(4n+3){--acc:var(--t-gold)}body #main .panel:nth-of-type(4n+4){--acc:var(--t-sky)}
body #main .panel h2,body #main .panel h3{color:var(--t-navy)}
body #main .status-card.warning{background:var(--t-gold-s)!important;border-color:#F1D9A8!important;color:#6b4a10}
body #main .note,body #main .muted{color:var(--t-muted)}
body #main .intro-banner{background:linear-gradient(135deg,var(--t-champ),#fff)!important}

/* หัวข้อย่อย = แถบเม็ดยาแบบหน้าแรก */
body #main .section-heading{background:linear-gradient(90deg,var(--t-navy),var(--t-navy-2))!important;color:#fff;border-radius:99px;padding:10px 18px!important;margin:20px 0 12px}
body #main .section-heading *{color:#fff!important;margin:0}

/* ปุ่ม */
body #main .btn,body dialog .btn{border-radius:12px!important;font-weight:800;background:var(--t-berry);color:#fff;border:1.5px solid var(--t-berry);box-shadow:0 3px 10px #C3214830;transition:transform .12s,filter .12s}
body #main .btn:hover,body dialog .btn:hover{filter:brightness(1.06)}
body #main .btn:active,body dialog .btn:active{transform:scale(.97)}
body #main .btn.outline,body dialog .btn.outline{background:#fff!important;color:var(--t-navy)!important;border-color:#CBD5E3!important;box-shadow:none}
body #main .btn.mint,body dialog .btn.mint{background:var(--t-teal)!important;border-color:var(--t-teal)!important;color:#fff!important;box-shadow:0 3px 10px #1E8C8533}
body #main .btn:disabled{opacity:.55;box-shadow:none}

/* ป้ายสีโทนอ่อนหลายสี */
body #main .tag,body #main .teacher-tags span{border-radius:99px!important;padding:3px 10px;font-weight:700;background:var(--t-berry-s)!important;color:var(--t-berry)!important;border:0}
body #main .teacher-tags span:nth-child(2),body #main .course-card:nth-child(4n+2) .tag{background:var(--t-teal-s)!important;color:var(--t-teal)!important}
body #main .teacher-tags span:nth-child(3),body #main .course-card:nth-child(4n+3) .tag{background:var(--t-gold-s)!important;color:#9a6512!important}
body #main .course-card:nth-child(4n+4) .tag{background:var(--t-sky-s)!important;color:var(--t-sky)!important}

/* ปุ่มกรอง */
body #main .filter-tabs button,body #main .filter-bar button,body #main .inline-options button{border-radius:99px!important;border:1.5px solid #D9E1EC!important;background:#fff!important;color:var(--t-navy)!important;font-weight:700}
body #main .filter-tabs .active,body #main .filter-tabs [aria-pressed=true],body #main .filter-bar .active,body #main .filter-bar [aria-pressed=true],body #main .inline-options .active,body #main .inline-options .selected{background:var(--t-navy)!important;color:#fff!important;border-color:var(--t-navy)!important}

/* ช่องกรอก */
body .field input,body .field select,body .field textarea,body #main input[type=text],body #main input[type=email],body #main input[type=number],body #main input[type=password],body dialog input{border-radius:12px!important;border:1.5px solid #DCE3EC!important;background:#fff}
body .field input:focus,body #main input:focus,body dialog input:focus,body .field select:focus,body .field textarea:focus{outline:none;border-color:var(--t-berry)!important;box-shadow:0 0 0 4px #C3214822}

/* คอร์ส / แพ็กเกจ: แถบสีบนการ์ดไม่ซ้ำกัน */
body #main .course-card{overflow:hidden;position:relative}
body #main .course-card:after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--t-berry)}
body #main .course-card:nth-child(4n+2):after{background:var(--t-teal)}body #main .course-card:nth-child(4n+3):after{background:var(--t-gold)}body #main .course-card:nth-child(4n+4):after{background:var(--t-sky)}
body #main .course-days,body #main .plan-number{color:var(--t-navy)}
body #main .course-card p b{color:var(--t-berry)}

/* ห้องเรียน */
body #main .room-card .room-letter{border-radius:16px;background:linear-gradient(135deg,var(--t-berry),var(--t-berry-d))!important;color:#fff!important}
body #main .room-card:nth-child(2) .room-letter{background:linear-gradient(135deg,var(--t-teal),#135f5a)!important}

/* ครูต่างชาติ: พื้นรูปหลายสี */
body #main .teacher-photo.mint{background:linear-gradient(160deg,#2AA79E,#1E8C85)!important}body #main .teacher-photo.navy{background:linear-gradient(160deg,#2A4670,#172A46)!important}
body #main .teacher-photo.coral{background:linear-gradient(160deg,#E96A6A,#C32148)!important}body #main .teacher-photo.gold{background:linear-gradient(160deg,#EDB456,#D9982B)!important}
body #main .teacher-photo.purple{background:linear-gradient(160deg,#8C6BC8,#5E45A0)!important}body #main .teacher-photo.blue{background:linear-gradient(160deg,#5C95D6,#3F7CC4)!important}
body #main .teacher-photo.orange{background:linear-gradient(160deg,#F09A4B,#D9772B)!important}body #main .teacher-photo.rose{background:linear-gradient(160deg,#E77C99,#C32148)!important}
body #main .teacher-photo,body #main .teacher-photo *{color:#fff!important}
body #main .teacher-card-top b,body #main .profile-rate{color:var(--t-berry)}
body .time-slot{border-radius:12px!important}
body .time-slot:not(.taken):hover{border-color:var(--t-teal)!important;background:var(--t-teal-s)!important}

/* ร้านหนังสือ / ตะกร้า */
body #main .shop-product-buy>strong,body #main .cart-page-row>strong,body #main .total{color:var(--t-berry)}
body #main .shop-banner{border-radius:20px!important;background-color:var(--t-sky-s)!important}

/* แนะนำเพื่อน / รายได้ */
body #main .affiliate-stats>*{border-radius:16px!important}
body #main .affiliate-stats>*:nth-child(4n+1){background:var(--t-berry-s)!important}body #main .affiliate-stats>*:nth-child(4n+2){background:var(--t-teal-s)!important}
body #main .affiliate-stats>*:nth-child(4n+3){background:var(--t-gold-s)!important}body #main .affiliate-stats>*:nth-child(4n+4){background:var(--t-sky-s)!important}

/* ตาราง */
body #main table{border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden}
body #main th{background:var(--t-navy-s);color:var(--t-navy)}

/* หน้าต่าง popup */
body dialog{border:0!important;border-radius:22px!important;box-shadow:0 24px 60px #172A4640!important}
body dialog .dialog-top .mini-label{color:var(--t-berry)!important}
body dialog::backdrop{background:#172A4680;backdrop-filter:blur(2px)}

/* แจ้งเตือน */
body #toast{border-radius:14px!important;background:var(--t-navy)!important;color:#fff!important}

/* ส่วนท้าย */
body .site-footer{background:linear-gradient(160deg,#172A46,#0f1e33)!important;color:#E9EEF6!important;border-radius:26px 26px 0 0}
body .site-footer a,body .site-footer b,body .site-footer h3{color:#fff!important}
body .site-footer p{color:#D5DCE7!important}
body .site-footer .footer-line{background:linear-gradient(90deg,var(--t-berry),#E0506F)!important;border-radius:16px!important;color:#fff!important}
body .site-footer small{color:#ffffffa0!important}

/* หน้าแรก: เพิ่มสีเสริม */
.kj-home .teal{background:var(--t-teal);color:#fff}.kj-home .sky{background:var(--t-sky);color:#fff}
.kj-bar.teal{background:linear-gradient(90deg,var(--t-teal),#146a64)}.kj-bar.berry{background:linear-gradient(90deg,var(--t-berry),var(--t-berry-d))}
.kj-coupon:nth-child(2) .kj-coupon-left{background:var(--t-teal)}.kj-coupon:nth-child(3) .kj-coupon-left{background:var(--t-gold)}.kj-coupon:nth-child(4) .kj-coupon-left{background:var(--t-navy)}

@media(max-width:600px){body #main .page-heading{padding:22px 18px!important;flex-direction:column;align-items:flex-start}body #main .page-heading .date-pill{font-size:11px}}
/* แพ็กเกจแนะนำ (6 เดือน): พื้นไล่สีน้ำเงิน ตัวอักษรขาว */
body #main .plan.featured{background:linear-gradient(150deg,#172A46,#2A4670)!important;color:#fff!important;border-color:#172A46!important}
body #main .plan.featured h2,body #main .plan.featured h3,body #main .plan.featured b,body #main .plan.featured strong,body #main .plan.featured li,body #main .plan.featured p{color:#fff!important}
body #main .plan.featured .muted{color:#F7E7CE!important}
body #main .plan.featured .tag{background:#F7E7CE!important;color:#9F1937!important}
body #main .plan.featured .btn{background:#fff!important;color:#C32148!important;border-color:#fff!important}
body #main .plan.featured:before{background:#D9982B}
/* เมนูล่าง: ปุ่มที่เลือกอยู่ไม่ต้องมีกล่องชมพู แค่เปลี่ยนสี */
body .kj-tabbar .active{background:none!important;color:#C32148!important}
body .kj-tabbar .active:not(.kj-tab-center):after{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:#C32148}
body .kj-tabbar span{white-space:nowrap}
body #main .plan.featured .plan-number{color:#fff!important}
/* คอมพิวเตอร์: เมนูข้างแสดงครบทุกเมนู ไม่ต้องเลื่อนในกล่อง */
@media(min-width:901px){body .sidebar{overflow-y:auto!important}body .sidebar #navigation{overflow:visible!important;max-height:none!important;height:auto!important;flex:none!important}body .sidebar #navigation a{min-height:0!important;padding-top:9px!important;padding-bottom:9px!important}body .sidebar .sidebar-note{display:none!important}}

/* ── ไอคอนภาพประกอบหลายสี (app-art.js) ── */
.kj-ico-box.art,.kj-big-ic.art{overflow:hidden;position:relative}
.kj-ico-box.art svg{width:48px!important;height:48px!important;filter:drop-shadow(0 2px 2px #0000001f)}
.kj-ico-box.art.berry{background:linear-gradient(150deg,#E4466B,#C32148)!important}
.kj-ico-box.art.navy{background:linear-gradient(150deg,#34588A,#172A46)!important}
.kj-ico-box.art.sky{background:linear-gradient(150deg,#6FA6E4,#3F7CC4)!important}
.kj-ico-box.art.teal{background:linear-gradient(150deg,#3DB3A8,#1E8C85)!important}
.kj-ico-box.art.gold{background:linear-gradient(150deg,#F3C466,#D9982B)!important}
.kj-ico-box.art:after{content:"";position:absolute;width:70%;height:70%;border-radius:50%;background:#ffffff26;top:-25%;right:-25%}
.kj-big-ic.art{width:68px!important;height:68px!important}
.kj-big-ic.art svg{width:52px!important;height:52px!important;filter:drop-shadow(0 2px 2px #0000001f)}
.kj-big-ic.art.berry{background:linear-gradient(150deg,#E4466B,#C32148)!important}
.kj-big-ic.art.navy{background:linear-gradient(150deg,#34588A,#172A46)!important}
.kj-big-ic.art.gold{background:linear-gradient(150deg,#F3C466,#D9982B)!important}
/* ไอคอนภาพบนแบนเนอร์หัวแต่ละหน้า */
body #main .page-heading .kj-head-art{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:92px;height:92px;border-radius:26px;background:#ffffff2e;display:grid;place-items:center;z-index:1;box-shadow:inset 0 0 0 1px #ffffff40}
body #main .page-heading .kj-head-art svg{width:72px;height:72px;filter:drop-shadow(0 3px 4px #0003)}
body #main .page-heading{padding-right:130px!important;min-height:120px}
body #main .page-heading .date-pill{display:none!important}
@media(max-width:600px){body #main .page-heading .kj-head-art{width:66px;height:66px;border-radius:20px;right:14px;top:18px;transform:none}body #main .page-heading .kj-head-art svg{width:52px;height:52px}body #main .page-heading{padding-right:92px!important}}

/* ภาพหัวหน้าเมนู: ภาพจริงอยู่ขวา · ข้อความระบบอยู่ซ้าย อ่านชัดทุกขนาด */
body #main .page-heading.kj-head-photo{background:#172A46!important;padding-right:28%!important}
body #main .page-heading.kj-head-photo:before,body #main .page-heading.kj-head-photo:after{display:none}
body #main .page-heading .kj-head-photo-img,body #main .page-heading .kj-head-photo-shade{position:absolute;inset:0;width:100%;height:100%}
body #main .page-heading .kj-head-photo-img{z-index:0;object-fit:cover}
body #main .page-heading .kj-head-photo-shade{z-index:0;background:linear-gradient(90deg,rgba(10,23,43,.5) 0%,rgba(10,23,43,.28) 42%,rgba(10,23,43,.04) 72%,transparent 100%)}
body #main .page-heading.kj-head-photo .kj-head-art{display:none!important}
@media(max-width:600px){body #main .page-heading.kj-head-photo{padding-right:96px!important}.page-heading.kj-head-photo .kj-head-photo-img{object-position:70% center}.page-heading.kj-head-photo .kj-head-photo-shade{background:linear-gradient(90deg,rgba(10,23,43,.82),rgba(10,23,43,.35) 78%,transparent)}}

/* ── กรอบรอภาพจาก GPT ── */
.gpt-slot{position:relative;margin:0 0 16px;border-radius:18px;overflow:hidden;border:2px dashed #D9C3A5;background:repeating-linear-gradient(135deg,#FFF3DC 0 14px,#FBE9EE 14px 28px);display:grid;place-items:center}
.gpt-slot-hint{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:12px;color:#172A46}
.gpt-slot-hint b{background:#172A46;color:#fff;border-radius:99px;padding:3px 12px;font-size:12px}
.gpt-slot-hint small{font-size:12.5px;font-weight:700;max-width:30ch}
.gpt-slot-hint code{font-size:11px;background:#fff;border-radius:8px;padding:2px 8px;color:#9F1937}
.gpt-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gpt-slot.has-img{border:0;background:none}.gpt-slot.has-img .gpt-slot-hint{visibility:hidden}
.kj-panel-img{margin:4px 0 14px}
/* รูปครูต่างชาติ / ห้องเรียน: ภาพจริงทับกรอบ */
body #main .teacher-photo{position:relative;overflow:hidden}
body #main .teacher-photo small{font-size:9px!important;line-height:1.4;text-align:center;letter-spacing:0!important;opacity:.9}
.kj-teacher-img,.kj-room-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
body #main .room-top{position:relative;overflow:hidden}
.gpt-slot:not(.has-img){display:none!important} /* ซ่อนกรอบภาพจนกว่าจะมีไฟล์ภาพจริง */
/* วิดีโอตัวอย่างการสอนของครู (ใส่จากหน้าแอดมิน) */
.teacher-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#172A46;margin:12px 0}
.teacher-video iframe,.teacher-video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.kc-tabs{margin:4px 0 12px;display:flex;flex-wrap:wrap;gap:8px}
/* 23 ก.ย. 2569 · ตารางสอน · ครูของเรา · วิดีโอย้อนหลัง · รีวิวจากภาพ */
.kl-schedule .kl-day{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #F1E6D8}
.kl-schedule .kl-day:last-child{border-bottom:0}
.kl-schedule .kl-day>b{color:#C32148}
.kl-slot{display:block;margin-bottom:4px}
.kl-teachers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kl-teacher{background:#fff;border:1px solid #EFE2D0;border-radius:18px;overflow:hidden;box-shadow:0 5px 18px #172A460d;display:flex;flex-direction:column}
.kl-teacher-photo{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#F7E7CE,#EFD9BE);display:grid;place-items:center;font-size:40px;font-weight:900;color:#9F1937}
.kl-teacher-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kl-teacher-body{padding:14px;display:flex;flex-direction:column;gap:6px}
.kl-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kl-video{background:#fff;border:1px solid #EFE2D0;border-radius:16px;overflow:hidden;box-shadow:0 5px 18px #172A460d;display:flex;flex-direction:column}
.kl-video-top{position:relative;border:0;padding:0;aspect-ratio:16/9;background:#172A46;cursor:pointer;display:grid;place-items:center;width:100%}
.kl-video-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kl-video-icon{font-size:34px}
.kl-play{position:relative;z-index:1;width:52px;height:52px;border-radius:50%;background:#C32148;color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px #0004}
.kl-video-body{padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.kl-video-body h3{font-size:16px;margin:0}
.kl-reviews{margin-top:8px}
.kl-review-row{display:flex;gap:12px;overflow-x:auto;padding:12px 2px;scrollbar-width:none}
.kl-review-row::-webkit-scrollbar{display:none}
.kl-review{flex:0 0 200px;border:1px solid #EFE2D0;border-radius:14px;background:#fff;padding:8px;cursor:pointer;text-align:center}
.kl-review img{width:100%;border-radius:10px;display:block}
.kl-review small{display:block;margin-top:6px;color:#5b6475}
.kl-review-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kl-review-grid .kl-review{flex:none}
.kl-review-big{width:100%;border-radius:14px;margin:10px 0}
@media(max-width:900px){.kl-videos{grid-template-columns:repeat(2,minmax(0,1fr))}.kl-review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.kl-videos,.kl-teachers{grid-template-columns:1fr}.kl-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kl-schedule .kl-day{grid-template-columns:90px 1fr}}
/* 23 ก.ย. 2569 · ร้านหนังสือ: ตัดแบนเนอร์หัวหน้าและภาพประกอบออก เหลือกล่องข้อความ + ปุ่มตะกร้า */
body #main .shop-banner{min-height:0!important;background-image:none!important;background:linear-gradient(120deg,#FFF9F3,#FBEFE1)!important;border:1px solid #EFE2D0;padding:22px!important;margin-top:4px}
body #main .shop-banner>div{max-width:100%!important}
body #main .shop-banner h2{font-size:24px;line-height:1.3}
@media(max-width:600px){body #main .shop-banner{flex-direction:column;align-items:flex-start;gap:14px}}
/* 23 ก.ย. 2569 · ข้อความแจ้งเตือน: สีชมพูโทนเดียวกับเว็บ ใหญ่ขึ้น อยู่กลางจอ */
body #toast{
  position:fixed!important;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;
  transform:translate(-50%,-50%) scale(.92)!important;
  background:linear-gradient(150deg,#E4466B,#C32148)!important;color:#fff!important;
  border-radius:20px!important;padding:20px 26px!important;font-size:19px!important;font-weight:800!important;
  box-shadow:0 18px 44px rgba(195,33,72,.38)!important;max-width:min(420px,calc(100vw - 40px))!important;
  text-align:center;line-height:1.45;z-index:120!important;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
body #toast.show{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}
/* ปุ่มสั่งซื้อในการ์ดหนังสือ: เต็มความกว้าง เห็นข้อความชัดทุกขนาดจอ */
body #main .kb-buy{flex-direction:column;align-items:stretch;gap:8px}
body #main .kb-buy strong{font-size:20px}
body #main .kb-add{width:100%;justify-content:center;padding:12px 14px;font-size:15px;border-radius:14px}
body #main .kb-add span{display:inline!important}
body #main .kb-add svg{width:18px;height:18px}

/* สมัครสมาชิกแนะนำเพื่อน */
.affiliate-age-badge{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:999px;background:#fff3cd;color:#7a4b00;font-weight:700;font-size:14px}
.affiliate-steps{margin:8px 0 0;padding-left:22px;line-height:1.8}
.affiliate-join .field{display:grid;gap:6px;margin-bottom:12px}
.affiliate-join input[type=date]{min-height:44px;font-size:16px;padding:6px 10px;border:1px solid #d9cfd3;border-radius:10px;max-width:260px}
.affiliate-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px;line-height:1.5}
.affiliate-check input{width:20px;height:20px;flex:none;margin-top:2px}
.affiliate-terms{margin:4px 0 12px;font-size:14px}
.affiliate-terms summary{cursor:pointer;color:#b0204f;font-weight:700}
.affiliate-terms ul{padding-left:20px;line-height:1.7}
.affiliate-join-btn{width:100%;max-width:360px;min-height:48px;font-size:17px}
.affiliate-locked{opacity:.75}
.affiliate-locked input{color:#8a7f84;font-style:italic}

/* หน้าข้อมูล: คำถามที่พบบ่อย · ศูนย์ช่วยเหลือ · เงื่อนไข · ความเป็นส่วนตัว */
.info-qa{display:grid;gap:10px;margin-bottom:22px}
.info-qa details{background:#fff;border:1px solid #f0e3e7;border-radius:14px;padding:0 16px}
.info-qa summary{cursor:pointer;list-style:none;padding:14px 26px 14px 0;font-weight:700;position:relative;line-height:1.5}
.info-qa summary::-webkit-details-marker{display:none}
.info-qa summary::after{content:'+';position:absolute;right:0;top:12px;font-size:22px;color:#C32148}
.info-qa details[open] summary::after{content:'–'}
.info-qa details>div{padding:0 0 16px;line-height:1.75;color:#4a4f5c}
.info-qa a,.info-doc a{color:#C32148;font-weight:700}
.info-help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}
.info-help ol{margin:8px 0 12px;padding-left:20px;line-height:1.8}
.info-doc{line-height:1.8;max-width:860px}
.info-doc h2{font-size:18px;margin:22px 0 6px;color:#172A46}
.info-doc ul{padding-left:20px;margin:6px 0}
.info-doc li{margin:4px 0}
.info-contact .inline-options{display:flex;flex-wrap:wrap;gap:10px}

/* ร่วมงานกับเรา */
.kf-careers em{font-style:normal;font-size:11px;font-weight:800;background:#E8B04B;color:#172A46;border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.info-careers-hero h2{margin-top:0;color:#172A46}
.info-careers-hero p{line-height:1.8}
.info-perks{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.info-perks li{background:#FFF4E0;border:1px solid #F6D9A8;border-radius:99px;padding:6px 12px;font-size:13.5px;font-weight:700;color:#6b3f00}
.info-job-ic{font-size:30px;line-height:1}
.info-job h3{margin:8px 0 4px;color:#172A46}
.info-job p{color:#4a4f5c;line-height:1.7;margin:0 0 10px}
.info-job ul{padding-left:20px;margin:6px 0 0;line-height:1.75}
.info-apply ol{padding-left:20px;line-height:1.85;margin-top:0}
.info-apply a:not(.btn){color:#C32148;font-weight:700}
.info-apply-btn{display:inline-flex;min-height:48px;align-items:center;font-size:16px;padding:0 22px}
.info-en p{line-height:1.75}
.info-en a{color:#C32148;font-weight:700}

/* ═══ ข้อมูลจากหลังบ้าน: แสดงเป็นระเบียบทุกขนาดภาพ/ความยาวข้อความ ═══ */
/* วิดีโอย้อนหลัง */
.kl-video-top .kl-cover{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;color:#fff;background:linear-gradient(150deg,#E4466B,#9F1937)}
.kl-video-top img~.kl-cover{display:none}
.kl-cover-chinese{background:linear-gradient(150deg,#E8B04B,#C0392B)!important}
.kl-cover-japanese{background:linear-gradient(150deg,#F28AA8,#B83B66)!important}
.kl-cover-korean{background:linear-gradient(150deg,#5B8DEF,#1F3F8F)!important}
.kl-cover-other{background:linear-gradient(150deg,#2F4A73,#172A46)!important}
.kl-cover b{font-size:44px;line-height:1;font-weight:900}
.kl-cover small{font-size:14px;font-weight:700;opacity:.95}
.kl-cover em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.3px;background:#ffffff2e;border-radius:99px;padding:2px 10px;margin-top:6px}
.kl-video-top .kl-play{position:relative;z-index:1}
.kl-video-top img~.kl-play,.kl-video-top .kl-play{box-shadow:0 4px 14px #0005}
.kl-duration{position:absolute;right:8px;bottom:8px;z-index:1;background:#000b;color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:2px 7px}
.kl-video-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;overflow-wrap:anywhere}
.kl-video-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;margin:0;color:#4a4f5c;line-height:1.6;font-size:14px}
.kl-video-date{margin:0}
.kl-members{align-self:flex-start;margin-top:auto}
.kl-video-body{flex:1}
.kl-empty{display:grid;justify-items:center;gap:4px;padding:34px 16px;grid-column:1/-1;text-align:center}
.kl-empty span{font-size:36px}
.kl-empty small{color:#8a8f99}
/* รีวิวจากภาพ: ทุกช่องสัดส่วนเดียวกัน (แคปหน้าจอยาวก็ไม่ดันแถว) */
.kl-review{display:flex;flex-direction:column}
.kl-review-img{display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#F6EFE6}
.kl-review-img img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0}
.kl-review small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.kl-review-tt{aspect-ratio:auto}
.kl-review-grid .kl-review-tt,.kl-review-row .kl-review-tt{min-height:0}
.kl-review-row .kl-review-tt::before,.kl-review-grid .kl-review-tt::before{content:'';display:block;aspect-ratio:3/4}
.kl-review-big{max-height:78vh;object-fit:contain;background:#F6EFE6}
/* ครูของเรา */
.kl-about{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;line-height:1.7;margin:0;overflow-wrap:anywhere}
.kl-teacher-body h3,.kl-teacher-body .muted{overflow-wrap:anywhere}
.kl-video-top .kl-cover{place-content:start;justify-items:start;padding:14px 16px;text-align:left}
.kl-cover b{font-size:40px}

/* ช่องรหัสผ่าน + ปุ่มรูปตา */
.pw-wrap{position:relative;display:block;margin-top:7px}
.pw-wrap input{margin-top:0!important;padding-right:52px!important}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:10px;color:#6B7280;cursor:pointer}
.pw-eye:hover,.pw-eye[aria-pressed="true"]{color:var(--t-berry,#C32148)}
.pw-eye svg{width:22px;height:22px}
.pw-wrap input::-ms-reveal{display:none}

.pw-hint{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:#6B7280}
.pw-hint.ok{color:#15803D;font-weight:600}

/* คลาสพิเศษ */
.kl-extra h3{margin:0 0 10px;color:#172A46}
.kl-extra-list{display:grid;gap:8px}
.kl-extra-row{display:flex;align-items:center;gap:12px;background:#FFF7F0;border:1px solid #F6D9A8;border-radius:12px;padding:8px 12px}
.kl-extra-row>span:last-child{display:grid;gap:2px}
.kl-extra-row small{color:#6b6f7a}
.kl-extra-date{display:grid;justify-items:center;min-width:46px;background:linear-gradient(150deg,#E4466B,#C32148);color:#fff;border-radius:10px;padding:4px 6px;line-height:1.1}
.kl-extra-date b{font-size:20px}
.kl-extra-date small{color:#FFE3EA!important;font-size:11px}

.kl-open{background:#EAF7EF;border-color:#BFE6CD}
.kl-open b{color:#1E7A4F;font-size:16px}
.kl-open p{margin:6px 0 0;line-height:1.7}

/* ป้ายอายุ 20 ปีในหน้าแนะนำเพื่อน: อ่านชัดบนพื้นเข้ม */
.affiliate-hero .affiliate-age-badge{background:#FFE08A!important;color:#4A2E00!important;opacity:1!important;font-size:14.5px;line-height:1.5;border:1px solid #F5C542}
/* หน้าต่างประวัติครู: รูปไม่บังเนื้อหา */
dialog .teacher-profile .teacher-photo{position:relative;overflow:hidden;min-height:0;aspect-ratio:1/1;max-height:220px}
@media (max-width:600px){dialog .teacher-profile .teacher-photo{width:140px;max-height:140px;margin:0 auto;border-radius:50%}dialog .teacher-profile{text-align:left}}
/* หน้าคอร์สวิดีโอตลอดชีพ (ยังไม่มีคอร์ส) */
.lifetime-empty{text-align:center;padding:36px 22px}.lifetime-empty h3{font-size:20px;margin-bottom:8px}.lifetime-empty p{color:var(--muted);margin-bottom:6px}.lifetime-empty .inline-options{justify-content:center}

/* ───── คอร์สวิดีโอตลอดชีพ ───── */
.kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-bottom:10px}
.kc-card{background:#fff;border:1px solid #EFE3D3;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 18px #172A460d}
.kc-cover{position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#E4466B,#C32148);display:grid;place-items:center}
.kc-cover img{width:100%;height:100%;object-fit:cover}
.kc-cover-fallback{font-size:54px}
.kc-owned{position:absolute;top:10px;left:10px;background:#15803D;color:#fff;font-weight:700;font-size:12.5px;padding:4px 10px;border-radius:999px}
.kc-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.kc-body h2{font-size:18px;line-height:1.35;margin:0}
.kc-body p{margin:0;color:var(--muted);font-size:14px}
.kc-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:#4b5565}
.kc-price{display:flex;align-items:baseline;gap:8px;margin-top:auto}
.kc-price strong{font-size:22px;color:#C32148}.kc-price small{color:var(--muted)}
.kc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kc-actions .btn{min-height:44px;font-size:14px}
.kc-modal h3{margin:14px 0 8px;font-size:16px}
.kc-desc{white-space:pre-line}
.kc-lessons{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.kc-lesson{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #EFE3D3;border-radius:12px;background:#fff}
.kc-lesson.locked{background:#FAF6F0;color:#7a8190}
.kc-lesson b{display:block;font-size:14.5px}.kc-lesson small{color:var(--muted);font-size:12px;margin-right:6px}
.kc-lesson em{font-style:normal;font-size:11.5px;font-weight:700;color:#15803D;background:#E8F7EE;border-radius:999px;padding:1px 8px}
.kc-no{width:28px;height:28px;border-radius:50%;background:#FBF3E6;display:grid;place-items:center;font-weight:700;font-size:13px}
.kc-lock{font-size:18px}
.kc-buybar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #EFE3D3}
.kc-buybar strong{display:block;font-size:22px;color:#C32148}.kc-buybar small{color:var(--muted);font-size:12px}
.kc-mini{display:grid;place-items:center;font-size:26px;background:#FBF3E6}
@media (max-width:600px){.kc-grid{grid-template-columns:1fr}.kc-buybar{flex-direction:column;align-items:stretch}}

/* ───── ปุ่มบัญชีมุมขวาบน: แยกสถานะ ───── */
.account-trigger.acct-member .avatar{background:linear-gradient(150deg,#F5C542,#D9982B)!important;color:#4A2E00!important;box-shadow:0 0 0 2px #fff,0 0 0 4px #F5C542}
.account-trigger.acct-member{border-color:#F5C542!important}
.account-trigger.acct-free .avatar{background:#EEF0F4!important;color:#5b6475!important}
.account-trigger.acct-admin .avatar{background:linear-gradient(150deg,#2A4670,#172A46)!important;color:#fff!important}
.avatar.has-animal,.kj-animal-avatar{background-color:#FFF7ED!important;background-image:url('assets/profile-animals-v2.webp')!important;background-repeat:no-repeat!important;background-size:400% 300%!important;background-position:calc(var(--avatar-x,0) * 33.333333%) calc(var(--avatar-y,0) * 50%)!important;color:transparent!important}
.account-trigger .avatar.has-animal,.kp-hero.is-member .kp-avatar.kj-animal-avatar{overflow:hidden;background-color:#FFF7ED!important;background-image:url('assets/profile-animals-v2.webp')!important;background-repeat:no-repeat!important;background-size:400% 300%!important;background-position:calc(var(--avatar-x,0) * 33.333333%) calc(var(--avatar-y,0) * 50%)!important}
#account-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kj-admin-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#172A46;color:#fff!important;font-weight:700;font-size:13.5px;text-decoration:none;margin-right:6px}
.kj-admin-link:hover{background:#2A4670}
@media (max-width:700px){.kj-admin-link span{display:none}.kj-admin-link{padding:8px 10px}}

/* ───── หน้าโปรไฟล์ ───── */
.kp-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kp-hero{grid-column:1/-1;display:flex;align-items:center;gap:18px}
.kp-hero h2{margin:0;font-size:22px}.kp-hero p{margin:2px 0 8px;color:var(--muted);overflow-wrap:anywhere}
.kp-avatar{flex:0 0 auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800;background:#EEF0F4;color:#5b6475}
.kp-hero.is-member .kp-avatar{background:linear-gradient(150deg,#F5C542,#D9982B);color:#4A2E00;box-shadow:0 0 0 3px #fff,0 0 0 5px #F5C542}
.kp-avatar.kj-animal-avatar{display:block;border:3px solid #fff;box-shadow:0 0 0 2px #EADCD2;background-color:#FFF7ED!important}
.kp-hero.is-member .kp-avatar.kj-animal-avatar{box-shadow:0 0 0 3px #fff,0 0 0 5px #F5C542}
.kp-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:#EEF0F4;color:#4b5565;font-weight:700;font-size:13px}
.kp-badge.gold{background:#FFF1C9;color:#7a4b00}.kp-badge.navy{background:#172A46;color:#fff}
.kp-card h3{margin:0 0 6px;font-size:17px}.kp-card p{margin:0 0 10px}
.kp-card-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:6px}
.kp-member{border:2px solid #F5C542!important;background:linear-gradient(180deg,#FFFBEF,#fff)!important}
.kp-admin{background:#F2F5FA!important;border:1px solid #C9D3E3!important}
.kp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.kp-form .field{margin:8px 0}
.kp-orders{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:8px}
.kp-orders li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid #EFE3D3;border-radius:12px;font-size:14px}
.kp-orders li>div{display:flex;flex-direction:column;gap:2px}.kp-orders li>div:last-child{align-items:flex-end}
.kp-orders small{color:var(--muted);font-size:12px}
.kp-status{font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:#EEF0F4}
.kp-status.s-approved,.kp-status.s-shipped{background:#E8F7EE;color:#15803D}.kp-status.s-pending{background:#FFF1C9;color:#7a4b00}
.kp-avatar-card{grid-column:1/-1;background:linear-gradient(145deg,#FFF9F2,#FFF4F7)!important}
.kp-avatar-grid{display:grid;grid-template-columns:repeat(6,minmax(78px,1fr));gap:10px;margin-top:14px}
.kp-avatar-choice{position:relative;display:grid;justify-items:center;gap:7px;border:2px solid #EFE3D3;border-radius:16px;background:#fff;padding:9px 6px 10px;color:#172A46;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.kp-avatar-choice:hover{transform:translateY(-2px);border-color:#D9982B;box-shadow:0 7px 18px #172A4617}
.kp-avatar-choice:focus-visible{outline:3px solid #1E8C85;outline-offset:2px}
.kp-avatar-choice .kj-animal-avatar{width:68px;height:68px;border-radius:14px;display:block;background-color:#FFF7ED!important}
.kp-avatar-choice i{display:none;position:absolute;right:5px;top:5px;width:23px;height:23px;border-radius:50%;place-items:center;background:#1E8C85;color:#fff;font-style:normal;font-size:14px;box-shadow:0 2px 6px #172A4633}
.kp-avatar-choice.selected{border-color:#1E8C85;background:#F1FBF8;box-shadow:0 0 0 2px #1E8C8522}
.kp-avatar-choice.selected i{display:grid}
.kp-avatar-choice:disabled{cursor:wait;opacity:.72;transform:none}
@media (max-width:760px){.kp-wrap{grid-template-columns:1fr}}
@media (max-width:760px){.kp-avatar-grid{grid-template-columns:repeat(4,minmax(64px,1fr));gap:8px}.kp-avatar-choice{padding:7px 3px 8px}.kp-avatar-choice .kj-animal-avatar{width:58px;height:58px}}
@media (max-width:390px){.kp-avatar-grid{grid-template-columns:repeat(3,minmax(72px,1fr))}.kp-avatar-choice .kj-animal-avatar{width:64px;height:64px}}

/* ───── ปุ่มติดตั้งแอป (ลอยมุมขวาล่าง) ───── */
.kj-install{position:fixed;right:12px;bottom:calc(104px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:4px;background:#C32148;border-radius:999px;padding:4px 4px 4px 4px;box-shadow:0 8px 22px rgba(195,33,72,.38);animation:kjUp .3s ease}
.kj-install-btn{display:flex;align-items:center;gap:7px;border:0;background:none;color:#fff;font:inherit;font-size:14px;font-weight:800;padding:4px 6px 4px 4px;cursor:pointer}
.kj-install-btn img{width:26px;height:26px;border-radius:50%;background:#fff}
.kj-install-x{width:26px;height:26px;border:0;background:rgba(255,255,255,.22);border-radius:50%;color:#fff;font-size:16px;line-height:1;cursor:pointer}
.kj-install-steps{padding-left:20px;line-height:1.9;margin:10px 0}
@keyframes kjUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:900px){.kj-install{bottom:20px}}
/* หน้าต่างเลือกห้องจากปุ่มกลางแถบล่าง */
.kj-join-list{display:grid;gap:10px;margin-top:10px}
.kj-join-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #EFE3D3;border-radius:14px;padding:12px 12px 12px 14px;background:#fff}
.kj-join-item>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kj-join-item b{font-size:15px}.kj-join-item small{color:var(--muted);font-size:12.5px}
.kj-join-item em{font-style:normal;font-size:11.5px;font-weight:800;color:#15803D;background:#E8F7EE;border-radius:99px;padding:1px 8px;align-self:flex-start;margin-top:3px}
.kj-join-item .btn{flex:0 0 auto;background:#C32148!important;color:#fff!important;min-height:42px;padding:8px 14px}

/* ตัวเล่นวิดีโอของเว็บ (ครอบ YouTube): ไม่เห็นปุ่ม/ลิงก์ของ YouTube · ปุ่มควบคุมเป็นของเว็บ */
.teacher-video .yt-edge{position:absolute;left:0;right:0;z-index:2;background:transparent}
.teacher-video .yt-edge-top{top:0;height:22%}
.teacher-video .yt-edge-bottom{bottom:0;height:24%}
.teacher-video .yt-shield{position:absolute;inset:0;z-index:3;background:transparent;cursor:pointer}
.teacher-video.yt-idle .yt-shield{pointer-events:none}
.teacher-video .yt-cover{position:absolute;inset:0;z-index:4;background:#172A46 center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;pointer-events:none}
.teacher-video .yt-cover::before{content:"";position:absolute;inset:0;background:rgba(23,42,70,.35)}
.teacher-video.yt-on .yt-cover{display:none}
.teacher-video.yt-on.yt-warm .yt-cover{display:flex}
.teacher-video.yt-warm .yt-play{display:none}
.teacher-video .yt-play{position:relative;width:74px;height:74px;border-radius:50%;background:#C32148;display:grid;place-items:center;font-size:30px;padding-left:5px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.teacher-video .yt-msg{position:relative;font-weight:700;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.teacher-video .yt-again{display:none;position:relative;pointer-events:auto;background:#C32148;color:#fff;border:0;border-radius:12px;padding:11px 20px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.teacher-video.yt-ended .yt-again{display:block}
.teacher-video.yt-ended .yt-play{display:none}
.teacher-video.yt-ended .yt-cover{pointer-events:auto}
.teacher-video .yt-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:none;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff}
.teacher-video.yt-started .yt-bar{display:flex}
.teacher-video .yt-bar button{flex:0 0 auto;width:38px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.18);color:#fff;font-size:17px;line-height:1;cursor:pointer}
.teacher-video .yt-bar input{flex:1;min-width:0;accent-color:#C32148}
.teacher-video .yt-time{flex:0 0 auto;font-size:12px;font-variant-numeric:tabular-nums}
.teacher-video:fullscreen{border-radius:0;background:#000}
dialog.video-dialog{width:min(980px,calc(100% - 20px));padding:18px 20px}
dialog.video-dialog h2{font-size:20px}
dialog.video-dialog .teacher-video{margin:8px 0}
@media(max-width:600px){dialog.video-dialog{padding:14px 12px}}

/* ร้านครูจอย / ครูดรีม */
.kj-store-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 6px}
.kj-store-tabs button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:#fff;border:1.5px solid #EADCD2;border-radius:16px;padding:12px 14px;transition:.15s}
.kj-store-tabs button .kj-store-av{grid-row:1/3}
.kj-store-tabs button b{font-size:15px;color:#172A46}.kj-store-tabs button small{font-size:12px;color:#7A6B66}
.kj-store-tabs button.selected{border-color:#C32148;box-shadow:0 6px 16px #C3214822;background:#FFF6F8}
.kj-store-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,#C32148,#E0527A)}
.dream .kj-store-av,.kj-store-av.dream{background:linear-gradient(135deg,#1E6F9F,#3AA0C8)}
.all .kj-store-av{background:linear-gradient(135deg,#D9982B,#F0BE5A)}
.kj-store{margin-top:22px;padding:16px;border-radius:22px;background:#FFF7F9;border:1px solid #F5DDE4}
.kj-store.dream{background:#F2F8FC;border-color:#D6E8F3}
.kj-store-head{display:flex;align-items:center;gap:12px;margin:0 2px 14px}
.kj-store-head small{display:block;font-size:12px;color:#7A6B66;letter-spacing:.3px}
.kj-store-head h2{font-size:22px;line-height:1.2;color:#172A46}
.kj-store-head em{margin-left:auto;font-style:normal;font-size:13px;font-weight:700;background:#fff;border-radius:99px;padding:5px 12px;color:#C32148}
.kj-store.dream .kj-store-head em{color:#1E6F9F}
.kj-store-empty{background:#fff;border:1.5px dashed #E6D3D9;border-radius:16px;padding:28px 16px;text-align:center;color:#7A6B66;font-size:14px}
.kj-store.dream .kj-store-empty{border-color:#C9DDEA}
@media(max-width:600px){.kj-store-tabs{gap:6px}.kj-store-tabs button{grid-template-columns:1fr;text-align:center;justify-items:center;padding:10px 6px;row-gap:4px}.kj-store-tabs button .kj-store-av{grid-row:auto;width:34px;height:34px;font-size:15px}.kj-store-tabs button b{font-size:12.5px}.kj-store-tabs button small{font-size:11px}.kj-store{padding:12px;border-radius:18px}.kj-store-head h2{font-size:19px}}
.kj-pay-store{display:inline-block;font-weight:800;font-size:14px;padding:5px 12px;border-radius:99px;background:#FFE8EE;color:#C32148;margin:2px 0 8px}.kj-pay-store.dream{background:#DCEEF8;color:#1E6F9F}
.kj-pay-split{display:grid;gap:10px;margin-top:14px}.kj-pay-pick{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:#FFF6F8;border:1.5px solid #F5C9D5;font-size:16px}.kj-pay-pick.dream{background:#F2F8FC;border-color:#BFDDEF}.kj-pay-pick span{font-weight:800;color:#C32148}.kj-pay-pick.dream span{color:#1E6F9F}
/* ปุ่มแนบสลิป: ปุ่มสีแบรนด์มุมมน + กรอบเส้นประ + รูปตัวอย่างหลังเลือก */
#slip-form input[type=file],#shop-slip-form input[type=file]{display:block;width:100%;margin-top:8px;padding:12px;border:2px dashed #F0B7C5;border-radius:16px;background:#FFF6F8;color:#7A6B66;font-size:13.5px;cursor:pointer}
#slip-form input[type=file]::file-selector-button,#shop-slip-form input[type=file]::file-selector-button{background:linear-gradient(135deg,#C32148,#E0527A);color:#fff;border:0;border-radius:12px;padding:11px 18px;margin-right:12px;font:700 15px/1.2 inherit;cursor:pointer;box-shadow:0 4px 12px #C3214833}
#slip-form input[type=file]:hover,#shop-slip-form input[type=file]:hover{border-color:#C32148}
.kj-slip-preview{display:flex;gap:10px;align-items:center;margin-top:10px;background:#F2FBF6;border:1px solid #BFE6CF;border-radius:14px;padding:8px 10px;font-size:13px;color:#1E6B52}
.kj-slip-preview img{width:56px;height:72px;object-fit:cover;border-radius:8px;background:#fff}
/* จองครูต่างชาติ: การจองในหน้าบัญชีของฉัน + ป้ายปิดรับจอง */
.kp-orders li.kp-bk{flex-wrap:wrap}
.kp-orders li.kp-bk>.kp-actions{flex-basis:100%;flex-direction:row;align-items:center;justify-content:flex-start;margin-top:2px}
.booking-closed{margin-bottom:18px}
/* ช่องที่อยู่ในหน้าต่าง (ตะกร้า) — เดิมเล็กและไม่เต็มแถว */
dialog .field textarea{display:block;width:100%;box-sizing:border-box;min-height:104px;margin-top:6px;padding:10px 12px;font:inherit;font-size:15px;line-height:1.5;border-radius:12px;resize:vertical}

/* ช่องค้นหาตำบล/อำเภอ/จังหวัด/รหัสไปรษณีย์ (thai-address.js) */
.kj-addr{position:relative}
.kj-addr>label{display:block}
.kj-addr input[data-thai-address]{width:100%;box-sizing:border-box;margin-top:6px}
.kj-addr-list{position:absolute;left:0;right:0;top:calc(100% - 22px);z-index:20;background:#fff;border:1.5px solid #DCE3EC;border-radius:12px;box-shadow:0 10px 28px #172A4622;max-height:260px;overflow:auto;padding:4px}
.kj-addr-list button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:9px;font:inherit;font-size:14px;line-height:1.45;color:var(--t-navy,#172A46);cursor:pointer}
.kj-addr-list button:hover,.kj-addr-list button:focus{background:#FFF1F4}
.kj-addr-list em{font-style:normal;font-weight:700;color:var(--t-berry,#C32148)}
.kj-addr-list p{margin:0;padding:10px 12px;font-size:13px;color:var(--muted)}

/* หน้าจองครู: ปุ่มการจองของฉัน + กติกา */
.bk-mine-link{display:inline-flex;margin:0 0 14px}
.bk-rules{margin:6px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.6}

/* นิทานดิจิทัล + ชั้นหนังสือของฉัน (library.js) */
.lb-store{margin:18px 0 26px}
.lb-store-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lb-store-head small{font-size:11px;letter-spacing:1px;color:var(--t-berry,#C32148);font-weight:700}
.lb-store-head h2{margin:2px 0}.lb-store-head p{margin:0;color:var(--muted);font-size:14px}
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lb-card{background:#fff;border:1px solid #EFE3D3;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.lb-cover{position:relative;display:block;width:100%;aspect-ratio:4/5;border:0;padding:0;background:#F6EFE6;cursor:pointer;overflow:hidden}
.lb-cover img{width:100%;height:100%;object-fit:contain;display:block}
.lb-cover-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-size:54px}
.lb-owned{position:absolute;top:8px;right:8px;font-style:normal;font-size:12px;font-weight:700;background:#1E8C85;color:#fff;border-radius:99px;padding:3px 9px}
.lb-owned.new{background:#C32148}
.lb-body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.lb-body h3{margin:0;font-size:16px;line-height:1.35}.lb-body p{margin:0;font-size:13px;color:var(--muted)}
.lb-level{font-size:12px;color:#1E8C85;font-weight:700}
.lb-feat{list-style:none;padding:0;margin:4px 0;display:flex;flex-wrap:wrap;gap:4px}
.lb-feat li{font-size:11.5px;background:#F6F1FF;color:#4B3F8F;border-radius:99px;padding:3px 8px}
.lb-buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.lb-buy b{font-size:20px;color:var(--t-berry,#C32148)}
.lb-actions{margin-top:auto;display:grid;gap:6px}
.lb-read{height:6px;border-radius:99px;background:#F1E6D8;overflow:hidden}.lb-read i{display:block;height:100%;background:#1E8C85;border-radius:inherit}
.lb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.lb-tabs button{border:1px solid #E3D3C1;background:#fff;border-radius:99px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.lb-tabs button.selected{background:var(--t-navy,#172A46);border-color:var(--t-navy,#172A46);color:#fff}
.lb-h{font-size:18px;margin:18px 0 10px}
.lb-info{display:grid;grid-template-columns:140px 1fr;gap:16px}.lb-info img{width:100%;border-radius:12px}
@media(max-width:520px){.lb-grid{grid-template-columns:1fr 1fr;gap:10px}.lb-body{padding:10px}.lb-body h3{font-size:14px}.lb-info{grid-template-columns:1fr}.lb-info img{max-width:180px;margin:0 auto}}
html.lb-reading,html.lb-reading body{overflow:hidden}
.lb-reader{position:fixed;inset:0;z-index:10000;background:#12172A;display:flex;flex-direction:column}
.lb-rbar{display:flex;align-items:center;gap:10px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));color:#fff}
.lb-rbar b{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-close{border:0;border-radius:99px;background:#ffffff22;color:#fff;font:inherit;font-size:14px;padding:7px 12px;cursor:pointer}
.lb-frame{flex:1;width:100%;border:0;background:#fff}
.lb-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;padding:20px}
.lb-spin{font-size:48px;animation:lbpulse 1.2s ease-in-out infinite}@keyframes lbpulse{50%{transform:scale(1.12)}}
.lb-prog{width:min(280px,80vw);height:8px;border-radius:99px;background:#ffffff26;overflow:hidden}.lb-prog i{display:block;height:100%;width:3%;background:#1E8C85;transition:width .2s}
.lb-video{position:fixed;inset:0;z-index:10001;background:#000c;display:flex;align-items:center;justify-content:center;padding:14px}
.lb-video-in{width:min(900px,100%);display:grid;gap:8px;justify-items:end}.lb-video-in .teacher-video{width:100%}
.lb-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
/* ร้านหนังสือ: แถบประเภท (store.js) */
.kb-banner-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kb-formats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:18px 0 10px;padding:5px;background:var(--t-navy,#172A46);border-radius:16px;scroll-margin-top:80px}
.kb-formats::-webkit-scrollbar{display:none}
.kb-formats button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;background:transparent;color:#E8EDF5;font:inherit;font-weight:700;font-size:15px;padding:10px 14px;cursor:pointer;white-space:nowrap}
.kb-formats button small{font-size:11px;font-weight:700;background:#ffffff26;border-radius:99px;padding:1px 7px}
.kb-formats button.selected{background:#fff;color:var(--t-navy,#172A46)}
.kb-formats button.selected small{background:#FBE7EC;color:#C32148}
.kb-chips{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.kb-chips .filter-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.kb-chips .filter-tabs::-webkit-scrollbar{display:none}
.kb-chips .filter-tabs button{flex:none;white-space:nowrap}
.kb-levels button{font-size:13px!important;padding:4px 12px!important}
.kb-sec{margin:22px 0 8px}
.kb-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-left:5px solid #C32148;padding-left:10px}
.kb-sec-head h2{margin:0;font-size:20px;color:var(--t-navy,#172A46)}
.kb-sec-head small{color:#6B7384;font-size:13px}
.kb-more{flex:none;border:0;background:none;color:#C32148;font:inherit;font-weight:800;font-size:14px;cursor:pointer;padding:4px 0}
body #main button.kb-cover{border:0;width:100%;cursor:pointer;font:inherit;text-align:left}
.kb-cover-fallback{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;font-size:54px}
.kb-badge{position:absolute;left:10px;bottom:10px;font-style:normal;font-size:11.5px;font-weight:800;border-radius:99px;padding:3px 9px;box-shadow:0 2px 6px #0002}
.kb-badge.now{background:#1E8C85;color:#fff}.kb-badge.ship{background:#fff;color:#172A46}.kb-badge.own{background:#172A46;color:#fff}
.kb-fmt{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px;padding:3px;background:#F6EFE6;border-radius:12px}
.kb-fmt button{display:flex;flex-direction:column;align-items:center;border:0;border-radius:9px;background:transparent;color:#5b6474;font:inherit;font-size:12px;font-weight:700;padding:5px 4px;cursor:pointer;line-height:1.3}
.kb-fmt button b{font-size:14px;color:inherit}
.kb-fmt button.on{background:#fff;color:#C32148;box-shadow:0 1px 4px #172A4622}
body #main .kb-body p.kb-feat{font-size:11.5px;color:#1E6F69;margin-top:6px}
@media(max-width:640px){.kb-formats{flex-wrap:wrap;overflow:visible}.kb-formats button{flex:1 0 42%;font-size:14px;padding:9px 8px}.kb-sec-head h2{font-size:17px}.kb-fmt button{font-size:11px}.kb-fmt button b{font-size:13px}}
/* ชั้นหนังสือ: อ่านล่าสุด · เรียง · ค้นหา · สถานะพัสดุ */
.lb-recent{margin:0 0 6px}
.lb-recent-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.lb-recent-item{flex:0 0 min(300px,82%);scroll-snap-align:start;display:flex;gap:10px;align-items:stretch;text-align:left;background:#fff;border:1px solid #EFE3D3;border-radius:14px;padding:8px;font:inherit;cursor:pointer}
.lb-recent-cover{flex:none;width:64px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#F6EFE6}
.lb-recent-cover img{width:100%;height:100%;object-fit:cover;display:block}
.lb-recent-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-recent-txt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-recent-txt em{margin-top:auto;font-style:normal;font-weight:800;font-size:13px;color:#C32148}
.lb-tabs button small{font-size:12px;opacity:.75}
.lb-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:0 0 10px}
.lb-search{flex:1 1 220px;min-width:0;border:1.5px solid #E3D3C1;border-radius:99px;padding:8px 14px;font:inherit;font-size:14px;background:#fff}
.lb-sort{display:flex;align-items:center;gap:6px;font-size:14px;color:#5b6474;margin-left:auto}
.lb-sort select{border:1.5px solid #E3D3C1;border-radius:99px;padding:6px 10px;font:inherit;font-size:14px;background:#fff}
.kp-orders .lb-steps{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:6px 0 0}
.kp-orders .lb-steps li{display:block;border:0;padding:2px 8px;border-radius:99px;background:#F1ECE5;color:#8b8f99;font-size:11.5px;font-weight:700}
.kp-orders .lb-steps li.done{background:#E3F3F1;color:#1E6F69}.kp-orders .lb-steps li.now{background:#1E8C85;color:#fff}
.lb-copy{border:1px solid #E3D3C1;background:#fff;border-radius:99px;font:inherit;font-size:12px;padding:2px 10px;cursor:pointer;margin-top:4px}
.kb-badge.soon{background:#F4B740;color:#3b2a00}
body #main .kb-body p.kb-feat b{display:block;color:#172A46;font-size:12px}
.kb-info{align-self:flex-start;border:0;background:none;color:#1E6F69;font:inherit;font-size:12px;font-weight:700;padding:2px 0;cursor:pointer;text-decoration:underline}
/* ภาพน่ารักในหน้าว่าง (empty-art.js) */
.kj-empty-art{display:flex;justify-content:center;margin:4px auto 10px}
.kj-empty-art svg{width:150px;height:auto;animation:kjFloat 3.2s ease-in-out infinite}
.kj-store-empty .kj-empty-art svg{width:120px}
@keyframes kjFloat{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.kj-empty-art svg{animation:none}}
.empty-cart>.kj-empty-art{background:none;width:auto;height:auto;border-radius:0;display:flex}
.empty-cart>.kj-empty-art svg{width:150px;height:auto;color:inherit}
.empty-cart .inline-options,.lifetime-empty .inline-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.empty-cart .inline-options .btn,.lifetime-empty .inline-options .btn{white-space:nowrap;flex:0 0 auto;width:auto}

/* ป้ายร้านบนการ์ดสินค้า */
.kb-shop{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;background:#FFF1F4;color:#C32148}
.kb-shop.dream{background:#EAF3FF;color:#1D5FB8}

.app-book-soon{font-size:12px;font-weight:700;color:#8A5A00;background:#FFF1D6;border-radius:99px;padding:4px 10px;text-decoration:none;white-space:nowrap}
/* รูปโปรไฟล์ที่อัปโหลดเอง */
.kj-photo-avatar{overflow:hidden;background:#F6EFE6!important}.kj-photo-avatar img,#avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
#avatar.has-photo{overflow:hidden;padding:0}
.kp-photo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.kp-photo-note{font-size:12.5px;color:#6B7384}
.kp-photo-pick{cursor:pointer}
.kp-photo-preview{display:flex;justify-content:center;margin:6px 0 10px}.kp-photo-preview img{width:140px;height:140px;border-radius:50%;object-fit:cover;box-shadow:0 4px 14px #172A4633}
.kp-photo-terms{font-size:13.5px;line-height:1.6;padding-left:18px;margin:6px 0 10px;color:#34425A}
.kp-photo-consent{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.5;background:#FFF8EF;border:1px solid #EFE2D0;border-radius:12px;padding:10px 12px}
.kp-photo-consent input{margin-top:3px;flex:none;width:18px;height:18px}
/* ตัวปรับรูปโปรไฟล์ (ซูม + ลาก) */
.kp-crop-help{font-size:13px;color:#6B7384;margin:0 0 8px}
.kp-crop-wrap{display:flex;justify-content:center;margin:4px 0 8px}
.kp-crop-wrap canvas{width:min(240px,70vw);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px #C32148,0 6px 18px #172A4633;touch-action:none;cursor:grab;background:#F6EFE6}
.kp-crop-wrap canvas:active{cursor:grabbing}
.kp-zoom{display:flex;align-items:center;gap:10px;max-width:280px;margin:0 auto 10px}.kp-zoom input{flex:1;accent-color:#C32148}
.kp-photo-consent{display:block!important}.kp-photo-consent input{vertical-align:-3px;margin:0 6px 0 0}
/* แถวรูปของฉัน: ข้อความบรรทัดเดียว ปุ่มเรียงใต้ข้อความ อ่านง่าย */
.kp-photo-box{background:#FFF8EF;border:1px solid #EFE2D0;border-radius:14px;padding:12px 14px;margin:6px 0 14px}
.kp-photo-box .kp-photo-note{margin:0;font-size:14px;color:#34425A;font-weight:600}.kp-photo-box .kp-photo-note span{font-weight:400;color:#6B7384}
.kp-photo-box .kp-photo-btns + .kp-photo-note{margin-top:8px;font-weight:400;color:#6B7384;font-size:13px}
.kp-photo-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.kp-photo-box > .kp-photo-btns:first-child{margin-top:0}
.kp-photo-btns .btn{flex:1 1 150px;justify-content:center;text-align:center}

/* หมวดหมู่วิดีโอย้อนหลัง (ตั้งจากหลังบ้าน): การ์ดไอคอน · แบนเนอร์เต็มแถว · หัวหมวดเมื่อกดเข้าไป
   ตัวหนังสือวางบนสีเข้มของโทน (ซ้าย) ไล่ไปสีอ่อน (ขวา) → อ่านง่ายทุกสี */
.lfd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:8px 0 22px}
.lfd-tile{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:24px 16px 20px;border:1px solid #172A460d;border-radius:24px;background:var(--lfd-soft);color:#172A46;cursor:pointer;font:inherit;box-shadow:0 6px 18px #172A4612;transition:transform .15s,box-shadow .15s}
.lfd-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px #172A4622}
.lfd-tile-ic{width:104px;height:104px;border-radius:30px;background:#fff;display:grid;place-items:center;margin-bottom:8px;box-shadow:0 6px 16px #172A4617}
.lfd-tile-ic .lfd-ic{width:70px;height:70px}
.kj-folder-picture{display:block;object-fit:contain;border:0;background:transparent;box-shadow:none}
.kj-folder-picture.kj-folder-sprite{background-color:transparent!important;background-image:var(--kj-sprite)!important;background-repeat:no-repeat!important;background-size:400% 300%!important;background-position:var(--kj-pos-x) var(--kj-pos-y)!important}
.lfd-tile-ic .kj-folder-picture{width:92px;height:92px;border-radius:23px}
.lfd-tile b{font-size:19px;font-weight:800;line-height:1.35;color:#172A46}
.lfd-tile small{font-size:14.5px;color:#4B5565;line-height:1.45}
.lfd-tile em{font-style:normal;font-size:13.5px;font-weight:800;color:var(--lfd-main);background:#fff;border-radius:99px;padding:5px 14px;margin-top:8px;box-shadow:0 2px 6px #172A460f}
.lfd-banner,.lfd-hero{position:relative;display:flex;align-items:center;border:0;overflow:hidden;color:#fff;background:linear-gradient(110deg,var(--lfd-to) 0%,var(--lfd-to) 38%,var(--lfd-from) 100%);box-shadow:0 10px 26px #172A4622}
.lfd-banner{grid-column:1/-1;min-height:176px;border-radius:26px;cursor:pointer;font:inherit;text-align:left;transition:transform .15s}
.lfd-banner:hover{transform:translateY(-3px)}
.lfd-banner img,.lfd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lfd-banner.has-img,.lfd-hero.has-img{align-items:flex-start}
.lfd-banner.has-img::after,.lfd-hero.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,42,70,.92) 0%,rgba(23,42,70,.72) 42%,rgba(23,42,70,.2) 78%,rgba(23,42,70,.06) 100%)}
.lfd-banner-art,.lfd-hero-art{position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(-6deg);border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.lfd-banner-art{width:132px;height:132px}.lfd-banner-art .lfd-ic{width:86px;height:86px}
.lfd-hero-art{width:148px;height:148px}.lfd-hero-art .lfd-ic{width:96px;height:96px}
.lfd-banner-text,.lfd-hero-text{position:relative;z-index:1;display:grid;justify-items:start;gap:6px;max-width:66%}
.lfd-banner-text{padding:24px 28px}.lfd-hero-text{padding:28px 30px}
.lfd-banner-badge,.lfd-hero-badge{width:50px;height:50px;border-radius:16px;background:#fff;display:grid;place-items:center;margin-bottom:2px}
.lfd-banner-badge .lfd-ic,.lfd-hero-badge .lfd-ic{width:34px;height:34px}
.lfd-banner-art .kj-folder-picture,.lfd-hero-art .kj-folder-picture{width:88%;height:88%;border-radius:50%}
.lfd-banner-badge .kj-folder-picture,.lfd-hero-badge .kj-folder-picture{width:44px;height:44px;border-radius:13px}
.lfd-banner-text b{font-size:28px;font-weight:800;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.18)}
.lfd-hero-text h2{margin:0;font-size:32px;line-height:1.25;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.18)}
.lfd-banner-text small,.lfd-hero-text p{margin:0;font-size:16.5px;line-height:1.5;color:#fff;opacity:.96}
.lfd-banner-text em,.lfd-hero-text small{font-style:normal;font-weight:800;font-size:14px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:5px 15px;margin-top:6px;color:#fff}
.lfd-hero{min-height:196px;border-radius:28px;margin-bottom:20px}
.lfd-h{font-size:20px;margin:22px 0 12px;color:#172A46}
.lfd-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;font-size:15px}
.lfd-crumbs button{border:0;background:none;padding:2px 0;color:#1E8C85;font:inherit;font-weight:700;cursor:pointer}
.lfd-crumbs span{color:#9aa3b2}.lfd-crumbs b{color:#172A46}
@media(max-width:600px){.lfd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lfd-tile{padding:18px 10px 16px;border-radius:20px}.lfd-tile-ic{width:80px;height:80px;border-radius:24px}.lfd-tile-ic .lfd-ic{width:54px;height:54px}.lfd-tile b{font-size:16.5px}.lfd-tile small{font-size:13px}.lfd-tile em{font-size:12.5px;padding:4px 11px}
  .lfd-tile-ic .kj-folder-picture{width:72px;height:72px;border-radius:19px}
  .lfd-banner{min-height:140px;border-radius:22px}.lfd-banner-art{width:88px;height:88px;right:5%}.lfd-banner-art .lfd-ic{width:58px;height:58px}.lfd-banner-text{padding:18px;max-width:68%}.lfd-banner-text b{font-size:21px}.lfd-banner-text small{font-size:14px}
  .lfd-hero{min-height:156px;border-radius:22px}.lfd-hero-art{width:96px;height:96px;right:5%}.lfd-hero-art .lfd-ic{width:62px;height:62px}.lfd-hero-text{padding:20px 18px;max-width:68%}.lfd-hero-text h2{font-size:24px}.lfd-hero-text p{font-size:14.5px}}
/* หมวดรายเดือน: ช่วงเดือนบนแบนเนอร์ · การ์ดเดือนย้อนหลัง · ข้อความอธิบายเดือน */
.lfd-range{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;opacity:.96}
.lfd-tile .lfd-range{color:#4B5565}
.lfd-h small{font-size:13.5px;font-weight:600;color:#6B7384;margin-left:6px}
.lfd-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:6px 0 20px}
.lfd-month{display:flex;flex-direction:column;border:0;border-radius:20px;overflow:hidden;background:#fff;cursor:pointer;font:inherit;text-align:left;padding:0;box-shadow:0 6px 18px #172A4614;transition:transform .15s,box-shadow .15s}
.lfd-month:hover{transform:translateY(-3px);box-shadow:0 12px 26px #172A4624}
.lfd-month-top{position:relative;display:grid;gap:0;padding:16px 16px 14px;color:#fff;background:linear-gradient(120deg,var(--lfd-to),var(--lfd-from))}
.lfd-month-top b{font-size:22px;font-weight:800;line-height:1.2}
.lfd-month-top small{font-size:14px;opacity:.95}
.lfd-month-top i{position:absolute;right:10px;top:10px;font-style:normal;font-size:11.5px;font-weight:800;background:#fff;color:var(--lfd-main);border-radius:99px;padding:2px 9px}
.lfd-month-body{display:grid;gap:6px;align-content:start;padding:12px 16px 16px;background:var(--lfd-soft);flex:1}
.lfd-month-body em{font-style:normal;font-weight:800;font-size:13.5px;color:var(--lfd-main);background:#fff;border-radius:99px;padding:3px 12px;justify-self:start}
.lfd-month-body small{font-size:13px;color:#4B5565;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lfd-month.is-empty .lfd-month-top{filter:saturate(.75)}
.lfd-month.is-empty .lfd-month-body em{color:#6B7384}
.lfd-month-note{margin:0 0 16px;font-size:15px;line-height:1.7;white-space:pre-line;border-left:4px solid #E8B04B}
.lfd-month-chips{margin-top:4px}
@media(max-width:600px){.lfd-months{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lfd-month-top{padding:12px 12px 10px}.lfd-month-top b{font-size:19px}.lfd-month-body{padding:10px 12px 12px}.lfd-range{font-size:12.5px}}
/* หน้าแรกวิดีโอย้อนหลัง: ภาษาอังกฤษ + ภาษาจีน คู่กัน · วิดีโออื่น ๆ เต็มแถว */
.lfd-home{grid-template-columns:repeat(2,minmax(0,1fr))}
.lfd-home .lfd-banner.lfd-half{grid-column:span 1;min-height:210px;align-items:flex-end}
.lfd-home .lfd-half .lfd-banner-art{top:22px;right:20px;transform:rotate(-6deg);width:104px;height:104px}
.lfd-home .lfd-half .lfd-banner-art .lfd-ic{width:66px;height:66px}
.lfd-home .lfd-half .lfd-banner-text{max-width:100%;padding:22px 136px 22px 24px}
.lfd-home .lfd-half .lfd-banner-text b{font-size:23px}
@media(max-width:700px){.lfd-home{grid-template-columns:1fr}.lfd-home .lfd-banner.lfd-half{min-height:170px}.lfd-home .lfd-half .lfd-banner-art{width:80px;height:80px;top:16px;right:16px}.lfd-home .lfd-half .lfd-banner-art .lfd-ic{width:52px;height:52px}.lfd-home .lfd-half .lfd-banner-text b{font-size:20px}.lfd-home .lfd-half .lfd-banner-text{padding:18px 104px 18px 18px}}

/* ปุ่มย้อนกลับในหน้าวิดีโอย้อนหลัง: ใหญ่ เห็นชัด แตะง่าย */
.lfd-topbar{margin:0 0 10px}
.lfd-backrow{margin:18px 0 8px}
.lfd-back{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 22px;border:0;border-radius:999px;background:#172A46;color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 16px #172A4633;transition:transform .15s,background .15s}
.lfd-back:hover{background:#C32148;transform:translateY(-2px)}
.lfd-back:focus-visible{outline:3px solid #F4B942;outline-offset:2px}
@media(max-width:600px){.lfd-back{width:100%;justify-content:center;font-size:15.5px}}
/* รูปไอคอนหมวด (เช่น อ่านออกเสียง) ต้องอยู่ในกรอบเสมอ */
img.kj-folder-picture{max-width:100%;max-height:100%;object-fit:contain}
/* เพลงพื้นหลัง: ปุ่มลำโพงลอยมุมซ้ายล่าง (มือถือ: เหนือแถบเมนูล่าง) + แผงปรับเสียง */
.kj-bgm{position:fixed;left:12px;bottom:calc(104px + env(safe-area-inset-bottom));z-index:89}
.kj-bgm-btn{width:44px;height:44px;border-radius:50%;border:1px solid #F1D9A8;background:#fff;color:#C32148;display:grid;place-items:center;box-shadow:0 6px 18px rgba(23,50,77,.16);cursor:pointer}
.kj-bgm-btn svg{width:20px;height:20px}.kj-bgm-btn.off{color:#8A94A3;background:#F4F6F8;border-color:#E1E6EC}
.kj-bgm-pop{position:absolute;left:0;bottom:54px;width:220px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px rgba(23,50,77,.2);border:1px solid #EEF1F4;display:grid;gap:8px}
.kj-bgm-pop[hidden]{display:none}.kj-bgm-pop b{font-size:13.5px;color:#17324D}
.kj-bgm-row{display:flex;align-items:center;gap:6px;font-size:14px}.kj-bgm-row input{flex:1;accent-color:#C32148;min-width:0}
.kj-bgm-toggle{border:1px solid #E1E6EC;background:#F8FAFB;border-radius:999px;padding:7px 10px;font-size:13px;cursor:pointer;color:#17324D}
@media (min-width:900px){.kj-bgm{left:auto;right:20px;bottom:20px}.kj-bgm-pop{left:auto;right:0}}

/* ปุ่มออกจากระบบ: เห็นง่าย สีแดงอ่อน ไม่แย่งเด่นกว่าปุ่มหลัก */
.kp-hero{position:relative}
.kj-logout-btn{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1.5px solid #F2C4CF;background:#fff;color:#C32148;font-weight:700;font-size:14px;white-space:nowrap;cursor:pointer;transition:.15s}
.kj-logout-btn:hover{background:#FFF0F3;border-color:#C32148}
.kj-nav-logout{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 16px;border-radius:12px;border:1.5px solid #F2C4CF;background:#FFF7F9;color:#C32148;font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.kj-nav-logout:hover{background:#FFE9EE}
@media(max-width:600px){.kp-hero{flex-wrap:wrap}.kj-logout-btn{margin-left:0;width:100%;justify-content:center;margin-top:10px}}
/* ปุ่มเพลง: ขีดเสียงขยับเมื่อเปิดเพลง + ป้ายบอกครั้งแรก (bgm-hint.js) */
.kj-bgm-btn{position:relative}
.kj-bgm-bars{position:absolute;right:3px;bottom:5px;display:flex;gap:1.5px;align-items:flex-end;height:9px}
.kj-bgm-bars i{width:2px;height:3px;background:#C32148;border-radius:1px;animation:kjBar 1.1s ease-in-out infinite}
.kj-bgm-bars i:nth-child(2){animation-delay:.35s}.kj-bgm-bars i:nth-child(3){animation-delay:.7s}
.kj-bgm-btn.off .kj-bgm-bars{display:none}
@keyframes kjBar{0%,100%{height:3px}50%{height:9px}}
@media (prefers-reduced-motion:reduce){.kj-bgm-bars i{animation:none;height:6px}}
.kj-bgm-hint{position:absolute;left:52px;bottom:4px;white-space:nowrap;background:#17324D;color:#fff;font-size:12.5px;font-weight:600;padding:3px 4px 3px 2px;border-radius:12px;display:flex;align-items:center;box-shadow:0 6px 16px rgba(23,50,77,.25);animation:kjHintIn .25s ease-out;transition:opacity .3s}
.kj-bgm-hint::before{content:'';position:absolute;left:-5px;bottom:12px;border:5px solid transparent;border-left:0;border-right-color:#17324D}
.kj-bgm-hint.out{opacity:0}
@keyframes kjHintIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.kj-bgm-hint button{background:none;border:0;color:#fff;font:inherit;cursor:pointer}.kj-bgm-hint-go{padding:5px 8px}.kj-bgm-hint-x{width:26px;height:26px;border-radius:50%;font-size:17px;line-height:1;opacity:.75}.kj-bgm-hint-x:hover{opacity:1;background:rgba(255,255,255,.12)}
@media(max-width:380px){.kj-bgm-hint{font-size:12px}}
/* หน้าห้องเรียนสด: ตัวอักษรใหญ่ขึ้น อ่านง่าย (ครูสั่ง 28 ก.ย.) */
body[data-route="rooms"] #main .room-card .tag{font-size:15px!important;padding:6px 14px!important;border-radius:999px}
body[data-route="rooms"] #main .room-card h3{font-size:26px!important;line-height:1.35}
body[data-route="rooms"] #main .room-card .room-body>p{font-size:16.5px!important;min-height:0}
body[data-route="rooms"] #main .room-card .room-meta{font-size:17px!important;font-weight:600;gap:10px}
body[data-route="rooms"] #main .room-card .room-meta svg{width:20px;height:20px}
body[data-route="rooms"] #main .room-card .btn{font-size:17px!important;min-height:54px}
body[data-route="rooms"] #main .room-card .room-foot{font-size:13.5px!important}
body[data-route="rooms"] #main .page-heading p,body[data-route="rooms"] #main .panel p,body[data-route="rooms"] #main .panel li{font-size:16.5px}
body[data-route="rooms"] #main .panel h2,body[data-route="rooms"] #main .panel h3{font-size:22px}
body[data-route="rooms"] #main .intro-banner h3{font-size:22px}body[data-route="rooms"] #main .intro-banner p{font-size:16px}
@media(max-width:600px){body[data-route="rooms"] #main .room-card h3{font-size:22px!important}body[data-route="rooms"] #main .room-card .room-meta{font-size:16px!important}}
body[data-route="rooms"] #main .intro-banner h3,body[data-route="rooms"] #main .panel h3,body[data-route="rooms"] #main .panel h2{font-size:24px}
body[data-route="rooms"] #main .intro-banner p,body[data-route="rooms"] #main .panel p,body[data-route="rooms"] #main .panel li{font-size:17.5px;line-height:1.7}
body[data-route="rooms"] #main .page-heading p{font-size:18px}
body[data-route="rooms"] #main .intro-banner .btn{font-size:17px;min-height:50px;padding:12px 22px}

/* ห้องเรียนสด 4 ห้อง (ครูสั่ง 29 ก.ย. 2569): เรียง 2 คอลัมน์ + ป้ายเลขห้อง */
body[data-route="rooms"] #main .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:850px){body[data-route="rooms"] #main .room-grid{grid-template-columns:1fr}}
body[data-route="rooms"] #main .room-top .room-no{position:absolute;top:12px;left:12px;z-index:3;padding:5px 14px;border-radius:999px;background:#fff;color:#C32148;font-weight:800;font-size:15px;box-shadow:0 4px 12px #0003}
/* คู่มือเรียนครูจอย / ครูดรีม (guides.js) */
.kgd-home{margin-top:22px;grid-column:1/-1;width:100%;display:block}
.kgd-owners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kgd-owner{position:relative;display:flex;align-items:flex-end;min-height:170px;border:0;border-radius:20px;overflow:hidden;padding:0;text-align:left;cursor:pointer;background:#172A46;box-shadow:0 10px 26px rgba(23,42,70,.16)}
.kgd-owner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.kgd-owner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,42,70,.9) 0%,rgba(23,42,70,.55) 55%,rgba(23,42,70,.1) 100%)}
.kgd-owner.joy::after{background:linear-gradient(90deg,rgba(143,22,52,.92) 0%,rgba(195,33,72,.55) 55%,rgba(195,33,72,.08) 100%)}
.kgd-owner.dream::after{background:linear-gradient(90deg,rgba(0,94,80,.92) 0%,rgba(0,169,143,.5) 55%,rgba(0,169,143,.06) 100%)}
.kgd-owner-text{position:relative;z-index:1;display:grid;gap:2px;padding:18px 20px;color:#fff}
.kgd-owner-text small{font-size:13px;opacity:.9}.kgd-owner-text b{font-size:26px;line-height:1.2}.kgd-owner-text em{font-style:normal;font-size:13.5px;background:rgba(255,255,255,.18);border-radius:999px;padding:3px 10px;width:max-content;margin-top:6px}
.kgd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:10px}
.kgd-card{background:#fff;border:1px solid #EFE2D0;border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.kgd-cover{aspect-ratio:4/3;background:#FBF3E6;display:grid;place-items:center}.kgd-cover img{width:100%;height:100%;object-fit:cover}.kgd-cover span{font-size:52px}
.kgd-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}.kgd-body h3{font-size:18px;margin:0}.kgd-body p{font-size:14px;color:#5b6475;margin:0}.kgd-file{font-size:12.5px;color:#7A6B66}
.kgd-actions{display:grid;gap:8px;margin-top:auto;padding-top:8px}.kgd-actions .btn{width:100%;justify-content:center;font-size:14.5px}
@media(max-width:600px){.kgd-owners{grid-template-columns:1fr}.kgd-owner{min-height:140px}.kgd-owner-text b{font-size:22px}}
.kgd-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:6px 0 10px}
.kgd-folder{display:grid;justify-items:start;gap:4px;border:0;border-radius:18px;padding:16px 16px 14px;text-align:left;cursor:pointer;box-shadow:0 6px 18px rgba(23,42,70,.08);transition:transform .15s}
.kgd-folder:hover{transform:translateY(-2px)}
.kgd-folder-art{width:64px;height:64px;border-radius:16px;background:#fff;display:grid;place-items:center;margin-bottom:6px}.kgd-folder-art svg,.kgd-folder-art img,.kgd-folder-ic{width:46px;height:46px}
.kgd-folder b{font-size:18px;color:#172A46;line-height:1.3}.kgd-folder small{font-size:13px;color:#5b6475}.kgd-folder em{font-style:normal;font-size:12.5px;font-weight:700;color:#C32148;background:#fff;border-radius:999px;padding:2px 10px;margin-top:4px}

/* ร้านครูดรีม: การ์ดไปเว็บเรียน Dream English Learning (สีตามเว็บ Dream: เขียวมิ้นต์ + ส้มคอรัล) */
.kj-dream-learn{display:flex;align-items:center;gap:20px;margin:14px 0 18px;padding:18px 22px;border-radius:22px;background:#EAF7F3;border:2px solid #9BE3D6;color:#143A38;text-decoration:none;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.kj-dream-learn::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:#FFE6DD;z-index:0}
.kj-dream-learn:hover{transform:translateY(-2px);box-shadow:0 10px 24px #00A89233}
.kj-dream-learn>img{flex:none;width:120px;height:120px;border-radius:50%;background:#fff;border:3px solid #fff;box-shadow:0 6px 16px #00A89226;object-fit:cover;position:relative;z-index:1}
.kj-dream-learn-copy{position:relative;z-index:1;min-width:0}
.kj-dream-learn-kicker{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.3px;color:#00A892;background:#fff;border-radius:999px;padding:3px 12px}
.kj-dream-learn h2{margin:6px 0 4px;font-size:22px;line-height:1.35;color:#143A38}
.kj-dream-learn p{margin:0 0 10px;font-size:15.5px;color:#3F6661}
.kj-dream-learn-levels{display:flex;gap:6px;margin-bottom:12px}
.kj-dream-learn-levels b{font-size:12.5px;padding:3px 10px;border-radius:999px;background:#fff;color:#00A892;border:1px solid #9BE3D6}
.kj-dream-learn-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:999px;background:#FF7A59;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 0 #EC5F3C}
@media(max-width:600px){.kj-dream-learn{flex-direction:column;text-align:center;padding:18px 16px}.kj-dream-learn>img{width:104px;height:104px}.kj-dream-learn h2{font-size:19px}.kj-dream-learn-levels{justify-content:center}}
.kj-dream-learn-actions{display:flex;flex-wrap:wrap;gap:10px}
.kj-dream-learn-btn{text-decoration:none}
.kj-dream-learn-btn.alt{background:#fff;color:#00A892;border:2px solid #00C2A8;box-shadow:0 4px 0 #9BE3D6}
@media(max-width:600px){.kj-dream-learn-actions{flex-direction:column;align-items:stretch}.kj-dream-learn-btn{justify-content:center}}

/* หน้าห้องเรียน: คำแนะนำเปิดไมค์/กล้อง (2 ต.ค. 2569) */
body #main .kj-mic-help{margin-top:16px;padding:14px 18px}
body #main .kj-mic-help summary{cursor:pointer;font-weight:800;font-size:17px;color:#172A46}
body #main .kj-mic-help ol{margin:10px 0 0;padding-left:22px;line-height:1.75;font-size:15.5px}

/* คู่มือเรียนย้ายมาหน้าเอกสารเรียน (2 ต.ค. 2569) */
body[data-route="files"] #main .kgd-home{margin:6px 0 20px}

/* หน้า ติดตั้งแอป (3 ต.ค. 2569) */
body #main .kj-install-page{text-align:center;padding:24px 18px}
body #main .kj-install-page img{border-radius:22px;box-shadow:0 6px 18px #172A4622}
body #main .kj-install-page p{font-size:16px;margin:12px 0}
/* หน้าห้องเรียนสด: ลิงก์เล็กไปศูนย์ช่วยเหลือ (กล่องไมค์/กล้อง และหมุนจอ ย้ายไปหน้าศูนย์ช่วยเหลือ 4 ต.ค. 2569) */
.kj-room-help{margin:14px 0 0;text-align:center;font-size:15px}.kj-room-help a{color:#C32148;font-weight:700;text-decoration:underline;text-underline-offset:3px}