/* ============================================================
   style.css — ธีมสีสันสดใสสำหรับเว็บเรียนวิทยาการคำนวณ ป.1–ม.3
   ============================================================ */

:root{
  --blue:    #3B82F6;
  --purple:  #8B5CF6;
  --pink:    #EC4899;
  --orange:  #F97316;
  --green:   #10B981;
  --yellow:  #F59E0B;
  --teal:    #14B8A6;

  --bg:      #F7F8FC;
  --surface: #FFFFFF;
  --text:    #1F2430;
  --muted:   #6B7280;
  --border:  #E6E8F0;
  --radius:  18px;
  --shadow:  0 6px 20px rgba(31,36,48,.08);
  --shadow-hover: 0 12px 28px rgba(31,36,48,.14);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }

/* พื้นหลังฉากหลังทั้งเว็บ (ทุกหน้า) — ติดอยู่กับที่ ไม่เลื่อนตามสกอลล์ ถ้ายังไม่มีไฟล์จะซ่อนอัตโนมัติ */
#site-bg-img{
  position:fixed; z-index:-1; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.5;
}

/* ---------- หน้าเข้าสู่ระบบ (login-gate) — ขึ้นทับทุกอย่างทุกครั้งที่เข้าเว็บ ----------
   ถ้าล็อกอินสำเร็จ (คลาส .logged-in) จะซ่อนตัวเองให้เห็นเว็บไซต์ด้านหลัง */
#login-gate{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(135deg, #1FA8F0, #6FCBFA 55%, #BEE9FD);
  display:flex; align-items:center; justify-content:center;
  padding:0; overflow-y:auto;
}
#login-gate.logged-in{ display:none; }
.login-gate-inner{
  width:100%; max-width:1040px; margin:auto;
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  background:rgba(255,255,255,.14); border-radius:28px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
  position:relative;
  opacity:0; transition:opacity .2s ease;
}
/* กันไม่ให้เห็นแว๊บของเลย์เอาต์สำรอง (โค้ดล้วน) ก่อนภาพพื้นหลังโหลดเสร็จ —
   ซ่อนไว้จนกว่าจะรู้แน่ว่าจะโชว์แบบไหน (.has-banner = โหลดภาพสำเร็จ, .img-failed = โหลดภาพไม่สำเร็จ) */
.login-gate-inner.has-banner, .login-gate-inner.img-failed{ opacity:1; }
.login-gate-full-img{ display:none; width:100%; height:auto; }

/* เมื่อโหลดภาพเต็ม (login-banner.png) สำเร็จ: ให้ภาพเต็มจอเท่าที่เป็นไปได้โดยไม่ครอปภาพ (คงสัดส่วนเดิมไว้
   เพื่อให้พิกัด % ของกล่องกรอก/ปุ่มด้านล่างยังตรงตำแหน่งเป๊ะเสมอ ไม่ว่าจอจะกว้าง/สูงแค่ไหน) */
.login-gate-inner.has-banner{
  display:block; width:fit-content; height:fit-content; max-width:100vw; max-height:100vh; margin:auto;
  background:none; box-shadow:none; border-radius:0; flex:none;
}
.login-gate-inner.has-banner .login-gate-full-img{
  display:block; width:auto; height:auto; max-width:100vw; max-height:100vh;
}
.login-gate-inner.has-banner .login-gate-left{ display:none; }
.login-gate-inner.has-banner .login-gate-card{
  position:absolute; inset:0; background:none; padding:0; display:block; gap:0;
  container-type:inline-size;
}
.login-gate-inner.has-banner .login-gate-card-title,
.login-gate-inner.has-banner .login-gate-card-sub,
.login-gate-inner.has-banner .login-role-label,
.login-gate-inner.has-banner .login-quote,
.login-gate-inner.has-banner .login-field span{ display:none; }

/* กลับไปใช้ภาพที่อัปโหลดไว้ (login-field-id.png / login-field-pw.png / login-btn-teacher.png /
   login-btn-student.png / login-btn-submit.png) แทนของที่ออกแบบเองด้วยโค้ด — พื้นหลังใหม่เป็นพื้นที่ว่าง
   อยู่แล้ว จึงไม่ต้องปะสีทับเหมือนพื้นหลังชุดก่อน วางรูปแบบชิดซ้าย (object-position:left) เพื่อให้คำนวณ
   ตำแหน่งช่องพิมพ์/ไอคอนตาได้ตรงตามพิกเซลจริงของรูป (ถ้ายังไม่มีไฟล์จะใช้ปุ่ม/กล่องโค้ดสำรองแทน) */
.login-gate-inner.has-banner .login-field{
  position:absolute; margin:0; left:62%; width:32%; gap:0; display:block;
}
.login-gate-inner.has-banner #field-id{ top:29%; height:12.9%; }
.login-gate-inner.has-banner #field-pw{ top:42%; height:12.9%; }
.login-gate-inner.has-banner .login-field span{ display:none; }

.field-bg-img{ display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:left center; pointer-events:none; }
.login-gate-inner.has-banner .login-field.has-fieldimg .field-bg-img{ display:block; }

.login-gate-inner.has-banner #field-id > input,
.login-gate-inner.has-banner .login-pw-wrap{
  position:absolute; left:14.5%; width:47%; top:0; height:100%;
  border:none; border-radius:4px; background:transparent; padding:0 2%;
  font-size:2.6cqw; color:var(--text);
}
.login-gate-inner.has-banner #field-pw .login-pw-wrap{ left:14.5%; width:40%; }
.login-gate-inner.has-banner .login-pw-wrap input{ width:100%; height:100%; background:transparent; padding:0 2%; font-size:2.6cqw; color:var(--text); border:none; }

.login-gate-inner.has-banner .login-pw-toggle{
  display:block; position:absolute; left:55%; width:6%; top:0; height:100%;
  background:transparent; z-index:2; transform:none;
}

.login-gate-inner.has-banner .login-role-row{
  position:absolute; left:62%; width:32%; top:59%; height:13.8%; gap:1%; margin:0;
}
.login-gate-inner.has-banner .login-role-btn{
  background:none; border:none; border-radius:0; padding:0; position:relative;
}
.login-gate-inner.has-banner .login-role-btn span{ display:none; }
/* เครื่องหมายถูกสีเขียว บอกว่ากำลังเลือกสถานะไหนอยู่ (ครู/นักเรียน) เพราะภาพนิ่งไม่เปลี่ยนเองตามการคลิก */
.login-gate-inner.has-banner .login-role-btn::after{
  content:"✓"; position:absolute; top:32%; right:6%; width:16%; height:30%;
  background:var(--green); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8cqw; font-weight:900; opacity:0; transform:scale(.4);
  transition:opacity .15s, transform .15s; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:2;
}
.login-gate-inner.has-banner .login-role-btn:has(input:checked)::after{ opacity:1; transform:scale(1); }

.login-gate-inner.has-banner .login-error{
  position:absolute; left:62%; width:32%; top:74%; text-align:center; font-size:1.7cqw; line-height:1.15;
}
.login-gate-inner.has-banner .login-submit{
  position:absolute; left:62%; width:32%; top:76%; height:19%;
  background:none; box-shadow:none; border-radius:0; padding:0;
}
.login-gate-inner.has-banner .login-submit:active{ transform:scale(.97); }

/* ช่อง "จดจำการเข้าสู่ระบบ" วางใต้ปุ่มครู/นักเรียน (เหนือปุ่มตกลง) */
.login-gate-inner.has-banner .login-remember{
  position:absolute !important; left:62%; width:32%; top:72.6%; height:3.4%; margin:0 !important;
  display:flex; align-items:center; justify-content:center; gap:1% !important; font-size:1.35cqw !important; white-space:nowrap; z-index:3;
}
.login-gate-inner.has-banner .login-remember input{ width:1.9cqw !important; height:1.9cqw !important; margin:0; flex:none; }
.login-gate-inner.has-banner .login-remember small{ font-size:1.02cqw; }
.login-gate-inner.has-banner .login-error{ top:75.4%; font-size:1.4cqw; }
.login-form-patch{ display:none; }
.role-btn-img{
  display:none; position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:left center; pointer-events:none; z-index:1;
}
.login-submit{ position:relative; }
.submit-btn-img{
  display:none; position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:left center; pointer-events:none;
}
.login-gate-inner.has-banner .submit-btn-coded{ display:none; }
.login-gate-inner.has-banner .login-submit:active{ transform:scale(.97); }

.login-gate-left{
  flex:1 1 420px; min-width:300px; position:relative;
  padding:36px 32px; color:#fff; display:flex; flex-direction:column; justify-content:center;
}
.login-gate-title{
  font-size:1.7rem; font-weight:800; line-height:1.35; text-shadow:0 3px 10px rgba(0,0,0,.2);
}
.login-gate-title span{ color:#FEF08A; }
.login-gate-desc{ margin-top:16px; font-size:.95rem; line-height:1.7; opacity:.95; }
.login-gate-credit{ margin-top:18px; font-size:.82rem; font-weight:600; background:rgba(255,255,255,.2); display:inline-block; padding:8px 14px; border-radius:999px; }

.login-gate-card{
  flex:1 1 340px; min-width:290px; background:#fff;
  padding:32px 30px; display:flex; flex-direction:column; gap:12px;
}
.login-gate-card-title{ font-size:1.4rem; font-weight:800; color:var(--text); }
.login-gate-card-sub{ font-size:.85rem; color:var(--muted); margin-top:-8px; margin-bottom:6px; }
.login-field{ position:relative; display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color:var(--text); }
.login-field input{
  font-family:inherit; font-size:.95rem; padding:12px 14px; border-radius:12px;
  border:2px solid var(--border); outline:none; background:var(--bg);
}
.login-field input:focus{ border-color:var(--blue); }
.login-pw-wrap{ position:relative; display:flex; }
.login-pw-wrap input{ flex:1; padding-right:44px; }
.login-pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer; font-size:1.1rem; padding:6px;
}
.login-role-label{ font-size:.8rem; color:var(--muted); text-align:center; margin-top:6px; }
.login-role-row{ display:flex; gap:10px; }
.login-role-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 10px; border-radius:14px; border:2px solid var(--border);
  font-weight:700; font-size:.9rem; cursor:pointer; background:var(--bg);
}
.login-role-btn input{ display:none; }
.login-role-btn:has(input:checked){ border-color:var(--blue); background:#EFF6FF; color:var(--blue); }
.login-error{ color:var(--pink); font-size:.82rem; font-weight:600; min-height:1.2em; }
.login-submit{
  border:none; border-radius:999px; padding:14px; font-size:1.05rem; font-weight:800;
  background:linear-gradient(90deg, var(--green), #34D399); color:#fff; cursor:pointer;
  box-shadow:0 8px 18px rgba(16,185,129,.35); transition:transform .15s;
}
.login-submit:hover{ transform:translateY(-2px); }
.login-quote{ text-align:center; font-size:.8rem; color:var(--muted); font-style:italic; margin:2px 0 0; }

@media (max-width:640px){
  .login-gate-left{ text-align:center; align-items:center; padding:28px 24px; }
  .login-gate-title{ font-size:1.35rem; }
}

/* โทรศัพท์แนวตั้ง: ภาพแบนเนอร์แนวนอนจะเล็กจิ๋วและเหลือพื้นที่ว่างเยอะ จึงเปลี่ยนเป็นหน้าเต็มจอ
   (หัวเรื่องด้านบน + การ์ดฟอร์มสีขาวเต็มความกว้างและเต็มความสูงที่เหลือ) ใช้ตัวฟอร์มแบบโค้ดแทนภาพ
   ใช้ #login-gate นำหน้าเพื่อให้ชนะกฎ .has-banner ด้านบน */
@media (max-width:700px) and (orientation:portrait){
  #login-gate{ align-items:stretch; justify-content:stretch; overflow-y:auto; }
  #login-gate .login-gate-inner{
    display:flex; flex-direction:column; flex-wrap:nowrap; width:100%; max-width:none; min-height:100%; height:auto;
    margin:0; background:none; border-radius:0; box-shadow:none; opacity:1;
  }
  #login-gate .login-gate-full-img{ display:none !important; }
  #login-gate .login-gate-left{ display:flex; flex:none; min-width:0; padding:calc(24px + env(safe-area-inset-top)) 20px 20px; text-align:center; align-items:center; }
  #login-gate .login-gate-title{ font-size:21px; }
  #login-gate .login-gate-desc{ display:none; }
  #login-gate .login-gate-credit{ margin-top:12px; font-size:12px; padding:6px 12px; }
  #login-gate .login-gate-card-title{ font-size:22px; }
  #login-gate .login-gate-card-sub{ font-size:14px; margin-top:-6px; }
  #login-gate .login-field{ font-size:14px; }
  #login-gate .login-role-label{ font-size:13px; }
  #login-gate .login-quote{ font-size:13px; }
  #login-gate .login-gate-card{
    position:static; flex:1 1 auto; display:flex; flex-direction:column; gap:12px; min-width:0;
    background:#fff; border-radius:28px 28px 0 0; padding:26px 22px calc(26px + env(safe-area-inset-bottom));
    container-type:normal; box-shadow:0 -8px 24px rgba(0,0,0,.12);
  }
  #login-gate .login-gate-card-title, #login-gate .login-gate-card-sub,
  #login-gate .login-role-label, #login-gate .login-quote, #login-gate .login-field span{ display:block; }
  #login-gate .login-field, #login-gate #field-id, #login-gate #field-pw{ position:relative; left:auto; top:auto; width:auto; height:auto; display:flex; flex-direction:column; gap:6px; }
  #login-gate #field-id > input, #login-gate #field-pw .login-pw-wrap{ position:relative; left:auto; top:auto; width:auto; height:auto; }
  #login-gate #field-id > input{ width:100%; border:2px solid var(--border); border-radius:12px; background:var(--bg); padding:13px 14px; font-size:16px; }
  #login-gate .field-bg-img, #login-gate .role-btn-img, #login-gate .submit-btn-img{ display:none !important; }
  #login-gate .login-field input, #login-gate .login-pw-wrap input{
    position:static; width:100%; height:auto; left:auto; border:2px solid var(--border); border-radius:12px;
    background:var(--bg); padding:13px 14px; font-size:16px;
  }
  #login-gate .login-pw-wrap{ position:relative; left:auto; top:auto; width:auto; height:auto; display:flex; border:none; padding:0; font-size:16px; }
  #login-gate .login-pw-wrap input{ padding-right:46px; }
  #login-gate .login-pw-toggle{ left:auto; right:6px; top:auto; bottom:6px; width:auto; height:auto; transform:none; font-size:19px; padding:8px; }
  #login-gate .login-role-row{ position:static; left:auto; top:auto; width:auto; height:auto; display:flex; gap:10px; }
  #login-gate .login-role-btn{ font-size:15px; border:2px solid var(--border); border-radius:14px; padding:13px 10px; background:var(--bg); }
  #login-gate .login-role-btn:has(input:checked){ border-color:var(--blue); background:#EFF6FF; color:var(--blue); }
  #login-gate .login-role-btn span{ display:inline; }
  #login-gate .login-role-btn::after{ content:none; }
  #login-gate .login-remember{ position:static !important; left:auto; top:auto; width:auto; height:auto; font-size:13px !important; white-space:normal; gap:8px !important; }
  #login-gate .login-remember input{ width:20px !important; height:20px !important; }
  #login-gate .login-remember small{ font-size:11px; }
  #login-gate .login-error{ position:static; left:auto; top:auto; width:auto; text-align:left; font-size:13px; }
  #login-gate .login-submit{
    position:relative; left:auto; top:auto; width:auto; height:auto; padding:15px; font-size:17px; border-radius:999px;
    background:linear-gradient(90deg, var(--green), #34D399); box-shadow:0 8px 18px rgba(16,185,129,.35);
  }
  #login-gate .submit-btn-coded{ display:inline !important; }
}

/* ป.1–3 (เด็กเล็ก) ใช้ตัวอักษรใหญ่กว่าปกติ เพื่อให้อ่านง่ายขึ้น: หัวข้อ 42px เนื้อหา 36px
   toggle ผ่าน JS (app.js) ตามระดับชั้นที่กำลังดูอยู่ */
html.large-text{ font-size:36px; }
html.large-text .page-title{ font-size:42px !important; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Sarabun","TH Sarabun New",system-ui,-apple-system,sans-serif;
  line-height:1.6;
  padding-bottom:60px;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

.container{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.site-header{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #1FA8F0, #6FCBFA 55%, #BEE9FD);
  color:#fff;
  box-shadow:var(--shadow);
}

/* จอกว้าง: แสดงภาพหัวเว็บเต็มความกว้าง พร้อมปุ่มโปร่งใสวางทับตำแหน่งปุ่มในภาพให้กดได้จริง */
.header-banner-wrap{ position:relative; display:block; width:100%; line-height:0; }
.header-banner-img{ display:block; width:100%; height:auto; }
.banner-link{
  position:absolute; top:34.3%; height:14.4%;
  background:transparent; border:none; padding:0; cursor:pointer;
}
.link-home{ left:70.5%; width:9%; }
.link-ar{ left:80%; width:10.5%; }
.link-login{ left:91%; width:7.5%; }
.banner-login-name{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  color:#fff; font-weight:800; font-size:clamp(12px,1.5vw,19.5px);
  font-family:"Sarabun","TH Sarabun New",system-ui,-apple-system,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6%;
}

/* ป้ายชื่อผู้เข้าระบบ ปักหมุดไว้มุมขวาบนสุดของทั้งหน้าเว็บเสมอ (ไม่ขยับตามสกอลล์/โหมดหัวเว็บ) */
.fixed-user-badge{
  position:fixed; top:12px; right:12px; z-index:9998;
  display:none; align-items:center; gap:6px;
  background:linear-gradient(135deg,#F472B6,#EC4899); color:#fff;
  border:none; border-radius:999px; padding:9px 18px;
  font-family:"Sarabun","TH Sarabun New",system-ui,-apple-system,sans-serif;
  font-size:.675rem; font-weight:800; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.fixed-user-badge:hover{ transform:translateY(-2px); }

/* เมนู "ตั้งค่า / ออกจากระบบ" ที่เปิดขึ้นเมื่อคลิกชื่อผู้เข้าระบบมุมขวาบน */
.user-menu-dropdown{
  display:none; position:absolute; z-index:10000;
  background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.2);
  overflow:hidden; min-width:180px;
}
.user-menu-dropdown.show{ display:block; }
.user-menu-dropdown button{
  display:block; width:100%; text-align:left; padding:14px 18px;
  border:none; background:none; cursor:pointer;
  font-family:"Sarabun","TH Sarabun New",system-ui,-apple-system,sans-serif;
  font-size:20px; font-weight:700; color:var(--text); /* px คงที่ ไม่ขยายตาม root ของ ป.1-3 */
}
.user-menu-dropdown button:hover{ background:var(--bg); }
.user-menu-dropdown button + button{ border-top:1px solid var(--border); }

.header-compact{
  display:none;
  position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:22px 20px;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

@media (max-width:640px){
  .header-banner-wrap{ display:none; }
  .header-compact{ display:flex; }
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.3rem; text-shadow:0 2px 6px rgba(0,0,0,.15); }
.brand .logo{ font-size:2.1rem; filter:drop-shadow(0 3px 4px rgba(0,0,0,.15)); }
.brand small{ display:block; font-weight:500; font-size:.78rem; opacity:.95; }
.header-links{ position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; }

.nav-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:none; padding:9px 18px; border-radius:999px;
  font-size:.9rem; font-weight:800; font-family:inherit; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.15); transition:transform .15s, box-shadow .15s;
  color:#fff;
}
#compact-login-btn{
  font-family:"Sarabun","TH Sarabun New",system-ui,-apple-system,sans-serif;
  font-size:1.35rem;
}
.nav-pill:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.22); }
.pill-yellow{ background:linear-gradient(135deg,#FBBF24,#F59E0B); color:#7C2D12; }
.pill-purple{ background:linear-gradient(135deg,#A78BFA,#8B5CF6); }
.pill-pink{ background:linear-gradient(135deg,#F472B6,#EC4899); }

/* ---------------- Modal: เข้าสู่ระบบ ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,15,35,.55);
  display:none; align-items:center; justify-content:center; padding:20px; z-index:100;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  background:var(--surface); border-radius:22px; padding:28px 26px; max-width:360px; width:100%;
  position:relative; box-shadow:0 20px 50px rgba(0,0,0,.3); text-align:center;
}
.modal-close{
  position:absolute; top:14px; right:14px; border:none; background:#EEF1FB; color:var(--text);
  width:30px; height:30px; border-radius:50%; font-size:.9rem; cursor:pointer;
}
.modal-icon{ font-size:2.4rem; margin-bottom:6px; }
.modal-box h2{ margin:0 0 10px; font-size:1.2rem; }
.modal-status{
  display:inline-block; background:#FFF4E5; color:var(--orange); font-weight:700; font-size:.82rem;
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
.modal-box form{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.modal-box label{ font-size:.85rem; font-weight:600; color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.modal-box input{
  padding:10px 12px; border-radius:10px; border:1px solid var(--border); font-family:inherit; font-size:.92rem;
  background:#F7F8FC;
}
.modal-note{ font-size:.78rem; color:var(--muted); margin:16px 0 0; line-height:1.6; }

@media (max-width:600px){
  .nav-pill{ padding:7px 12px; font-size:.82rem; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  max-width:1080px; margin:18px auto 0; padding:0 20px;
  font-size:.9rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.breadcrumb a{ color:var(--blue); font-weight:500; }
.breadcrumb .sep{ opacity:.5; }

/* ---------- Section titles ---------- */
.page-title{
  font-size:1.6rem; font-weight:700; margin:26px 0 6px;
}
.page-subtitle{ color:var(--muted); margin-bottom:26px; }

/* ---------- Grade group ---------- */
.group-block{ margin:34px 0; }
.group-title{
  display:flex; align-items:center; gap:10px;
  font-size:1.15rem; font-weight:700; margin-bottom:16px;
}
.group-title .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:16px;
}

/* generic card */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 16px;
  transition:transform .15s, box-shadow .15s;
  cursor:pointer;
  display:block;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }

.grade-card{ text-align:center; }
.grade-card .g-emoji{ font-size:2.2rem; display:block; margin-bottom:8px; }
.grade-card .g-name{ font-weight:700; font-size:1.15rem; }
.grade-card .g-meta{ font-size:.78rem; color:var(--muted); margin-top:4px; }

.subject-card{ display:flex; align-items:center; gap:14px; }
.subject-card .s-emoji{ font-size:1.8rem; }
.subject-card .s-name{ font-weight:700; }
.subject-card .s-meta{ font-size:.8rem; color:var(--muted); }

.unit-card{ position:relative; padding:0; overflow:visible; }
.unit-card .u-coded-fallback{ display:flex; align-items:flex-start; gap:14px; padding:20px 16px; }
.unit-card .u-num{
  flex:none; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:1.05rem;
}
.unit-card .u-name{ font-weight:700; }
.unit-card .u-tags{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.unit-card .u-fullcard-img{ display:none; width:100%; height:auto; }
.unit-card.has-fullcard{ overflow:hidden; background:transparent; border:none; box-shadow:none; }
.unit-card.has-fullcard:hover{ box-shadow:none; }
.unit-card.has-fullcard .u-fullcard-img{ display:block; }
/* หน้ารายการหน่วยของชั้นที่ยังไม่มีรูปการ์ดของครู (ป.3 ป.4 ม.2 ม.3): ปุ่มสีสดแบบเม็ดลูกอม 2 คอลัมน์ */
.card-grid.unit-grid-coded{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:20px; padding:6px 4px 14px; }
.unit-grid-coded > .unit-card:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc(50% - 10px); }
.unit-grid-coded .unit-card{ background:linear-gradient(135deg, var(--uc), color-mix(in srgb, var(--uc) 62%, #fff)); border:none; border-radius:24px; color:#fff;
  box-shadow:0 6px 0 color-mix(in srgb, var(--uc) 68%, #000), 0 12px 22px rgba(15,23,42,.16); transition:transform .15s, box-shadow .15s; overflow:hidden; }
.unit-grid-coded .unit-card::after{ content:""; position:absolute; right:-28px; top:-28px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.18); pointer-events:none; }
.unit-grid-coded .unit-card:hover{ transform:translateY(-4px); box-shadow:0 10px 0 color-mix(in srgb, var(--uc) 68%, #000), 0 18px 28px rgba(15,23,42,.2); }
.unit-grid-coded .unit-card:active{ transform:translateY(4px); box-shadow:0 2px 0 color-mix(in srgb, var(--uc) 68%, #000), 0 4px 10px rgba(15,23,42,.18); }
.unit-grid-coded .unit-card .u-coded-fallback{ align-items:center; gap:16px; padding:24px 22px; min-height:112px; position:relative; z-index:1; }
.unit-grid-coded .unit-card .u-num{ width:62px; height:62px; border-radius:50%; background:#fff !important; color:var(--uc); font-size:1.9rem; font-weight:800; box-shadow:0 4px 0 rgba(0,0,0,.14); }
.unit-grid-coded .unit-card .u-name{ font-size:1.2rem; font-weight:800; line-height:1.3; text-shadow:0 2px 0 rgba(0,0,0,.14); }
.unit-grid-coded .unit-card .tag{ background:rgba(255,255,255,.26); color:#fff; border:none; font-weight:700; }
@media (max-width:760px){ .card-grid.unit-grid-coded{ grid-template-columns:1fr !important; } .unit-grid-coded > .unit-card:last-child:nth-child(odd){ width:100%; } }
/* หน้ารายการหน่วย: การ์ดรูปเต็มลดเหลือครึ่งหนึ่ง จัดกึ่งกลาง (จอกว้างเท่านั้น) */
@media (min-width:761px){ .card-grid > .unit-card.has-fullcard{ width:50%; justify-self:center; margin-left:auto; margin-right:auto; } }

.tag{
  display:inline-block; font-size:.72rem; font-weight:600;
  padding:3px 9px; border-radius:999px; background:#EEF1FB; color:var(--blue);
}
.tag.ar{ background:#FDF0FE; color:var(--pink); }

/* ---------- Tabs (unit page) ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:24px 0 0; border-bottom:2px solid var(--border); }
.tab-btn{
  padding:12px 18px; font-weight:600; font-size:.95rem;
  border:none; background:none; color:var(--muted);
  border-bottom:3px solid transparent; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  margin-bottom:-2px;
}
.tab-btn.active{ color:var(--blue); border-bottom-color:var(--blue); }

.tab-btn-img{ display:none; height:76px; width:auto; border-radius:10px; transition:transform .15s, opacity .15s, box-shadow .15s; }
.tab-btn.has-tabimg{ padding:4px; border-bottom:none; margin-bottom:0; }
.tab-btn.has-tabimg .tab-btn-img{ opacity:.6; }
.tab-btn.has-tabimg:hover .tab-btn-img{ opacity:.85; transform:translateY(-2px); }
.tab-btn.has-tabimg.active .tab-btn-img{
  opacity:1; box-shadow:0 0 0 3px var(--blue), 0 6px 14px rgba(0,0,0,.15); transform:translateY(-2px);
}
.tab-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius);
  padding:28px 24px; box-shadow:var(--shadow);
}

.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:600; padding:5px 12px; border-radius:999px;
  background:#FFF4E5; color:var(--orange); margin-bottom:14px;
}
.status-badge.ready{ background:#E7F9F1; color:var(--green); }

.placeholder-box{
  border:2px dashed var(--border); border-radius:14px;
  padding:34px 20px; text-align:center; color:var(--muted);
}
.placeholder-box .p-emoji{ font-size:2.4rem; display:block; margin-bottom:10px; }

.btn{
  display:inline-block; padding:10px 20px; border-radius:999px;
  background:var(--blue); color:#fff; font-weight:600; font-size:.9rem;
  border:none; cursor:pointer;
}
.btn.secondary{ background:#EEF1FB; color:var(--blue); }
.btn.pink{ background:var(--pink); }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ปุ่มเล่นเนื้อหา (เล่นเกมนี้เลย / เวอร์ชันทางเลือก) — แยก layout ใส่รูปเองได้ทีละปุ่ม */
.action-btn-img{ display:none; height:108px; width:auto; }
.action-btn.has-actionimg{ padding:0; overflow:hidden; line-height:0; background:none; }
.action-btn.has-actionimg .action-btn-img{ display:block; }

/* ---------------- หน้าแรก: สีสันสดใส ตัวอักษรใหญ่ ถูกใจเด็ก ---------------- */
@keyframes home-deco-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.home-page .welcome-hero{
  position:relative; overflow:visible; border:none; text-align:center;
  background:linear-gradient(135deg, #FFF3C4, #FFE29A);
  padding:14px; border-radius:26px;
}
.home-page .welcome-hero .welcome-banner-img{ display:block; width:100%; height:auto; }
.home-page .welcome-hero .bubble-fallback{ display:none; position:relative; padding:16px 12px 8px; }
@media (max-width:700px){
  .home-page .welcome-hero{ padding:0; background:none; }
  .home-page .welcome-hero .welcome-banner-img{ display:none; }
  .home-page .welcome-hero .bubble-fallback{
    display:block; background:linear-gradient(135deg, #FFF3C4, #FFE29A); border-radius:26px;
  }
}
.home-page .welcome-hero .hero-deco{
  font-size:1.4rem; letter-spacing:14px; margin-bottom:10px; opacity:.9;
  animation:home-deco-float 3s ease-in-out infinite;
}
.home-page .welcome-hero .bubble{
  position:relative; background:#fff; border-radius:26px;
  border:3px solid #fff;
  box-shadow:0 0 0 4px #FFDD84, 0 14px 30px rgba(0,0,0,.12);
  padding:26px 30px; text-align:center;
}
.home-page .welcome-hero .bubble h1{
  font-size:1.5rem; margin:0 0 10px; font-weight:800;
  background:linear-gradient(90deg, #EC4899, #8B5CF6 50%, #3B82F6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home-page .welcome-hero .bubble p{ color:var(--muted); opacity:1; }
.home-page .welcome-hero .kid{
  position:absolute; bottom:-8px; width:170px; height:auto;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
  animation:home-deco-float 3.2s ease-in-out infinite;
  z-index:3;
}
.home-page .welcome-hero .kid.left{ left:2%; transform:rotate(-3deg); }
.home-page .welcome-hero .kid.right{ right:2%; transform:rotate(3deg); animation-delay:.5s; }
.home-page .welcome-hero .bulb{ position:absolute; top:-14px; right:14%; font-size:2rem; animation:home-deco-float 2.6s ease-in-out infinite; }
@media (max-width:700px){
  .home-page .welcome-hero .bubble-fallback{ padding-top:100px; }
  .home-page .welcome-hero .kid{ width:110px; bottom:auto; top:-14px; }
  .home-page .welcome-hero .kid.left{ left:4%; }
  .home-page .welcome-hero .kid.right{ right:4%; }
}
@media (max-width:480px){
  .home-page .welcome-hero .kid{ width:86px; }
}

.home-page .group-title{
  display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:800;
  padding:9px 22px 9px 18px; border-radius:999px 999px 999px 4px;
  box-shadow:0 6px 14px rgba(0,0,0,.15); font-size:1.15rem;
}
.home-page .group-title .dot{ display:none; }
.home-page .group-block.group-primary .group-title{ background:linear-gradient(135deg,#F472B6,#EC4899); }
.home-page .group-block.group-upper .group-title{ background:linear-gradient(135deg,#FB923C,#F97316); }
.home-page .group-block.group-secondary .group-title{ background:linear-gradient(135deg,#A78BFA,#8B5CF6); }

.home-page .card-grid{ grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }

.home-page .grade-card{
  border:none; border-radius:20px;
  position:relative; overflow:visible;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  background:#fff;
  transition:transform .15s, box-shadow .15s;
}
.home-page .grade-card .g-coded-fallback{
  display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px;
}
.home-page .grade-card .g-fullcard-img{
  display:none; width:100%; height:auto;
}
.home-page .grade-card.has-fullcard{ padding:0; overflow:hidden; background:transparent; box-shadow:none; }
.home-page .grade-card.has-fullcard:hover{ box-shadow:none; }
.home-page .grade-card.has-fullcard .g-fullcard-img{ display:block; }
.home-page .grade-card .g-icon-wrap{
  flex:none; width:56px; height:56px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.home-page .grade-card .g-emoji{ font-size:1.9rem; }
.home-page .grade-card .g-info{ flex:1; min-width:0; }
.home-page .grade-card .g-name{
  display:inline-block; color:#fff; font-size:1.05rem; font-weight:800;
  padding:3px 16px; border-radius:999px; margin-bottom:4px;
}
.home-page .grade-card .g-meta{ color:var(--muted); font-size:.8rem; }
.home-page .grade-card .g-kid{
  flex:none; width:52px; height:52px; object-fit:cover; border-radius:14px;
  border:2px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.home-page .grade-card .g-arrow{
  flex:none; width:34px; height:34px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.home-page .grade-card:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(0,0,0,.2); }
.home-page .grade-card:hover .g-arrow{ transform:translateX(3px); }

@media (max-width:600px){
  .home-page .card-grid{ grid-template-columns:1fr; }
}

/* ---------- Home intro / AR compare ---------- */
.hero{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 24px; margin:26px 0; border:1px solid var(--border);
}
.hero h1{ margin:0 0 8px; font-size:1.5rem; }
.hero p{ color:var(--muted); margin:0; }

.compare-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:16px; }
.compare-card{
  border:1px solid var(--border); border-radius:16px; padding:18px; background:#FAFBFF;
}
.compare-card h3{ margin:0 0 8px; font-size:1.05rem; }
.compare-card ul{ margin:10px 0; padding-left:20px; color:var(--muted); font-size:.88rem; }

footer{ text-align:center; color:var(--muted); font-size:.41rem; margin-top:50px; }

/* ---------------- หน้ารวมเกม AR ---------------- */
.ar-hub-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--purple), var(--pink) 55%, var(--orange));
  color:#fff; text-align:center;
  border-radius:24px; padding:38px 20px 34px;
  margin:26px 0; box-shadow:var(--shadow);
}
.ar-hub-deco{ font-size:1.3rem; opacity:.8; letter-spacing:10px; margin-bottom:6px; }
.ar-hub-banner h1{ margin:6px 0 8px; font-size:1.7rem; }
.ar-hub-banner p{ margin:0 auto 18px; max-width:520px; opacity:.95; font-size:.94rem; }
.burst{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:120px; height:120px; border-radius:50%;
  background:#fff; color:var(--pink); font-weight:800; font-size:1.6rem; line-height:1.05;
  transform:rotate(-6deg);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  margin-bottom:14px;
  border:4px dashed var(--yellow);
}
.burst span{ display:block; font-size:.65rem; font-weight:700; color:var(--purple); letter-spacing:.5px; }

.chip-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:22px 0; }
.chip{
  border:2px solid var(--border); background:var(--surface); color:var(--text);
  padding:8px 18px; border-radius:999px; font-weight:600; font-size:.88rem; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.chip.active{ background:var(--purple); border-color:var(--purple); color:#fff; }

.ar-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px; margin-bottom:40px;
}
.ar-card{
  background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s;
}
.ar-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.ar-thumb{
  height:110px; display:flex; align-items:center; justify-content:center; font-size:2.8rem;
}
.ar-body{ padding:16px; }
.ar-grade-tag{ font-size:.76rem; font-weight:700; color:var(--purple); text-transform:uppercase; letter-spacing:.3px; }
.ar-title{ font-weight:700; margin-top:4px; font-size:.98rem; }

@media (max-width:600px){
  .brand{ font-size:1.05rem; }
  .card-grid{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  .ar-hub-banner h1{ font-size:1.35rem; }
}


/* ---------- เนื้อหาที่ครูเพิ่ม (contents.js) ---------- */
.extra-panel{ margin-top:16px; }
.cx-wrap .cx-title{ font-weight:800; font-size:1.05rem; margin-bottom:10px; color:var(--text); }
.cx-sec{ font-weight:800; margin:14px 0 8px; padding:6px 14px; border-radius:999px; display:inline-block; background:#EEF1FB; color:#3B57C6; }
.cx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.cx-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 4px 10px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:10px; }
.cx-head{ display:flex; align-items:center; gap:10px; }
.cx-head h3{ margin:0; font-size:1rem; flex:1; }
.cx-ico{ font-size:1.5rem; }
.cx-desc{ margin:0; font-size:.88rem; color:#555; }
.cx-video{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; }
.cx-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cx-img,.cx-media{ width:100%; border-radius:12px; display:block; }
.cx-audio{ width:100%; }
.cx-open{ display:inline-block; align-self:flex-start; background:linear-gradient(135deg,#3B82F6,#8B5CF6); color:#fff; font-weight:700; padding:9px 18px; border-radius:999px; }
.cx-del{ border:none; background:#FEF2F2; color:#DC2626; font-weight:700; border-radius:999px; padding:5px 12px; cursor:pointer; font-family:inherit; }
.cx-teacherbar{ margin-top:16px; text-align:center; }
.cx-addbtn{ border:2px dashed #3B82F6; background:#EFF6FF; color:#1D4ED8; font-weight:800; font-family:inherit; font-size:1rem; padding:10px 22px; border-radius:999px; cursor:pointer; }

.cx-lock{ overflow:hidden; }
.cx-overlay{ position:fixed; inset:0; z-index:10001; background:rgba(20,15,35,.6); display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:20px 12px; }
.cx-box{ position:relative; background:#fff; border-radius:20px; width:100%; max-width:640px; padding:22px 22px 18px; box-shadow:0 20px 50px rgba(0,0,0,.35); font-size:16px; line-height:1.5; margin:0 auto; }
.cx-box h2{ margin:0 0 14px; font-size:22px; }
.cx-x{ position:absolute; top:10px; right:12px; border:none; background:#EEF1FB; width:34px; height:34px; border-radius:50%; font-size:16px; cursor:pointer; }
.cx-box form{ display:flex; flex-direction:column; gap:12px; }
.cx-box label{ display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:15px; }
.cx-box label small{ font-weight:400; color:#777; }
.cx-box input[type=text],.cx-box input[type=url],.cx-box input[type=password],.cx-box select,.cx-box textarea,.cx-box input[type=file]{
  font-family:inherit; font-size:16px; padding:9px 12px; border:2px solid var(--border); border-radius:10px; background:#fff; font-weight:400; }
.cx-box input:focus,.cx-box select:focus,.cx-box textarea:focus{ outline:none; border-color:#3B82F6; }
.cx-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .cx-row{ grid-template-columns:1fr; } }
.cx-kinds{ border:2px solid var(--border); border-radius:12px; padding:8px 12px; display:flex; gap:16px; flex-wrap:wrap; }
.cx-kinds legend{ font-weight:800; font-size:14px; padding:0 6px; }
.cx-kinds label{ flex-direction:row; align-items:center; gap:6px; font-weight:600; cursor:pointer; }
.cx-err{ color:#DC2626; font-weight:700; min-height:1.2em; font-size:15px; }
.cx-actions{ display:flex; justify-content:flex-end; gap:10px; }
.cx-actions button{ font-family:inherit; font-size:16px; font-weight:800; border:none; border-radius:999px; padding:10px 22px; cursor:pointer; }
.cx-cancel{ background:#EEF1FB; color:#3B57C6; }
.cx-save{ background:linear-gradient(135deg,#10B981,#059669); color:#fff; }
.cx-save:disabled{ opacity:.6; cursor:wait; }


/* ---- เรียนตามลำดับขั้นตอน ---- */
.flow-panel{ max-width:640px; margin-left:auto; margin-right:auto; }
.flow-intro{ text-align:center; font-weight:700; color:#4B5563; margin:0 0 14px; }
.flow-steps{ display:flex; flex-direction:column; gap:12px; }
.flow-step{ display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; padding:14px 18px; border:2px solid #C7D2FE; border-radius:18px; background:#fff; color:#1F2430; text-decoration:none; font:inherit; font-weight:700; cursor:pointer; text-align:left; box-shadow:0 4px 10px rgba(0,0,0,.05); }
.flow-step .flow-num{ flex:none; width:34px; height:34px; border-radius:50%; background:#6366F1; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9em; }
.flow-step .flow-emoji{ flex:none; font-size:1.4em; }
.flow-step .flow-label{ flex:1; }
.flow-step .flow-badge{ flex:none; font-size:.78em; font-weight:700; color:#6B7280; }
.flow-step.next{ border-color:#3B82F6; background:#EFF6FF; box-shadow:0 0 0 3px rgba(59,130,246,.18); }
.flow-step.next .flow-badge{ color:#2563EB; }
.flow-step.done{ border-color:#34D399; background:#F0FBF6; }
.flow-step.done .flow-num{ background:#10B981; }
.flow-step.done .flow-badge{ color:#059669; }
.flow-step.locked{ border-color:#E5E7EB; background:#F3F4F6; color:#9CA3AF; box-shadow:none; }
.flow-step.locked .flow-num{ background:#9CA3AF; }
.flow-bonus-title{ text-align:center; font-weight:700; margin:22px 0 10px; color:#4B5563; }
.flow-note{ text-align:center; font-size:.8em; color:#6B7280; margin:12px 0 0; }
.flow-obj{ background:#EFF6FF; border:1px solid #BFDBFE; border-radius:16px; padding:18px 22px; }
.flow-obj p{ margin:0 0 8px; font-weight:700; color:#1D4ED8; }
.flow-obj ul{ margin:0; padding-left:22px; } .flow-obj li{ margin-bottom:6px; line-height:1.6; }

.flow-img{ display:none; }
.flow-step.has-img{ position:relative; padding:0; border:none; background:transparent; box-shadow:none; justify-content:center; }
.flow-step.has-img .flow-img{ display:block; width:100%; max-width:560px; height:auto; border-radius:18px; box-shadow:0 4px 12px rgba(0,0,0,.12); transition:transform .15s; }
.flow-step.has-img:hover .flow-img{ transform:translateY(-2px); }
.flow-step.has-img .flow-num,.flow-step.has-img .flow-emoji,.flow-step.has-img .flow-label{ display:none; }
.flow-step.has-img .flow-badge{ position:absolute; top:8px; right:calc(50% - 280px + 8px); background:#fff; padding:3px 10px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.flow-step.has-img .flow-badge:empty{ display:none; }
.flow-step.has-img.locked .flow-img{ filter:grayscale(1); opacity:.45; }
.flow-step.has-img.next .flow-img{ box-shadow:0 0 0 4px rgba(59,130,246,.45); }
.flow-step.has-img.done .flow-img{ box-shadow:0 0 0 4px rgba(16,185,129,.45); }
@media (max-width:620px){ .flow-step.has-img .flow-badge{ right:8px; } }

.flow-std,.flow-ind{ margin-bottom:14px; }
.flow-std{ background:#FFF7ED; border-color:#FED7AA; } .flow-std p{ color:#C2410C; }
.flow-ind{ background:#F0FDF4; border-color:#BBF7D0; } .flow-ind p{ color:#15803D; }
.flow-tag{ display:inline-block; font-size:.75em; padding:1px 8px; border-radius:999px; background:#fff; border:1px solid #BBF7D0; color:#15803D; white-space:nowrap; }

/* ---- รายงานคะแนน (ครู) ---- */
.rp-wrap{ max-width:900px; margin:0 auto; background:rgba(255,255,255,.92); border-radius:18px; padding:16px; box-shadow:0 4px 14px rgba(0,0,0,.08); font-size:17px; }
.rp-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.rp-tab{ flex:1; padding:10px; border:2px solid #C7D2FE; border-radius:14px; background:#fff; font:inherit; font-weight:700; cursor:pointer; }
.rp-tab.on{ background:#6366F1; border-color:#6366F1; color:#fff; }
.rp-filters{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:10px; }
.rp-filters label{ display:flex; align-items:center; gap:6px; font-weight:700; }
.rp-filters select{ font:inherit; padding:6px 10px; border-radius:10px; border:1px solid #CBD5E1; max-width:100%; }
.rp-title{ font-weight:800; font-size:1.1em; margin-top:6px; } .rp-sub{ color:#6B7280; font-size:.9em; margin-bottom:8px; }
.rp-scroll{ overflow-x:auto; }
.rp-table{ border-collapse:collapse; width:100%; font-size:.92em; }
.rp-table th,.rp-table td{ border:1px solid #CBD5E1; padding:6px 9px; }
.rp-table th{ background:#E0E7FF; position:sticky; top:0; }
.rp-table .rp-c{ text-align:center; white-space:nowrap; } .rp-table .rp-none{ color:#9CA3AF; }
.rp-table tfoot td{ background:#F3F4F6; font-weight:700; }
.rp-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.rp-actions button{ padding:9px 16px; border:none; border-radius:999px; background:#3B82F6; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.rp-actions button:disabled{ opacity:.5; }

/* การ์ดวิชา: ถ้ามีรูป home-subject-{ชั้น}-{วิชา}.webp จะแทนที่การ์ดโค้ดทั้งใบ */
.subject-card .s-coded-fallback{ display:flex; align-items:center; gap:14px; }
.subject-card .s-fullcard-img{ display:none; width:100%; height:auto; }
.subject-card.has-fullcard{ display:block; padding:0; overflow:hidden; background:transparent; border:none; box-shadow:none; }
.subject-card.has-fullcard:hover{ box-shadow:none; }
.subject-card.has-fullcard .s-fullcard-img{ display:block; }

/* ไฟล์ HTML ที่ครูอัปโหลด (เปิดในหน้าต่างเต็มจอ แบบ sandbox) */
.cx-htmlview{ position:fixed; inset:0; z-index:99999; background:#0F172A; display:flex; flex-direction:column; }
.cx-htmlbar{ flex:none; display:flex; align-items:center; gap:10px; padding:8px 12px; background:#1E293B; color:#fff; }
.cx-htmltitle{ flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-hb{ border:none; border-radius:999px; padding:7px 16px; font:inherit; font-weight:700; cursor:pointer; background:#334155; color:#fff; }
.cx-hclose{ background:#EF4444; }
.cx-htmlbody{ flex:1; min-height:0; background:#fff; }
.cx-htmlbody iframe{ width:100%; height:100%; border:0; display:block; }
.cx-htmlload{ color:#64748B; text-align:center; padding:40px; }
button.cx-open{ border:none; cursor:pointer; font:inherit; font-weight:700; }

/* ม.1–ม.3: ตัวอักษรใหญ่ขึ้น 1.5 เท่า (ฐาน 16px → 24px) */
html.mid-text{ font-size:24px; }
html.p5-text{ font-size:32px; }
@media (max-width:600px){ html.p5-text{ font-size:24px; } }

/* ---------- เมนูหน่วย: เส้นทางงู 1→2→3 ↓ 6←5←4 ---------- */
.unit-path{
  display:grid; grid-template-columns:1fr 50px 1fr 50px 1fr; align-items:center; gap:10px 4px; margin-top:6px;
}
.unit-path .path-cell{ min-width:0; align-self:stretch; display:flex; }
.unit-path .path-cell .unit-card{ width:100%; display:flex; align-items:center; }
.unit-path .path-cell .unit-card .u-coded-fallback{ padding:12px 10px; gap:10px; }
.unit-path .path-cell .unit-card .u-name{ font-size:.95rem; }
.unit-path .path-cell .unit-card .tag{ font-size:.62rem; padding:2px 7px; }
.unit-path .path-cell .unit-card.has-fullcard{ display:block; }
.path-arrow{ display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); animation:pathNudge 1.6s ease-in-out infinite; }
.path-arrow svg{ width:46px; height:auto; overflow:visible; }
.path-arrow path{ fill:#FBBF24; stroke:#fff; stroke-width:6; stroke-linejoin:round; paint-order:stroke; }
.path-arrow path{ filter:drop-shadow(0 0 0 #B45309); }
.path-arrow.left svg{ transform:scaleX(-1); }
.path-arrow.down svg{ transform:rotate(90deg); }
@keyframes pathNudge{ 0%,100%{ translate:0 0; } 50%{ translate:4px 0; } }
.path-arrow.left{ animation-name:pathNudgeL; } .path-arrow.down{ animation-name:pathNudgeD; }
@keyframes pathNudgeL{ 0%,100%{ translate:0 0; } 50%{ translate:-4px 0; } }
@keyframes pathNudgeD{ 0%,100%{ translate:0 0; } 50%{ translate:0 4px; } }
@media (prefers-reduced-motion:reduce){ .path-arrow{ animation:none; } }

/* จอแคบ: เรียงลงมาเป็นคอลัมน์เดียว มีลูกศรชี้ลงคั่น */
@media (max-width:760px){
  .unit-path{ display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .unit-path .path-cell, .unit-path .path-arrow{ grid-column:auto !important; grid-row:auto !important; }
  .path-arrow{ animation:pathNudgeD 1.6s ease-in-out infinite; }
  .path-arrow svg{ transform:rotate(90deg) !important; width:48px; }
  .unit-path .path-cell .unit-card .u-coded-fallback{ padding:16px 14px; }
}

/* เมนูขั้นตอนการเรียน (เส้นทางงู) */
.flow-path{ margin:8px 0 14px; }
.flow-path .path-cell .flow-step{ width:100%; margin:0; }
.flow-path .flow-step.has-img .flow-img{ max-width:100%; }
.flow-path .flow-step.has-img .flow-badge{ right:8px; top:6px; font-size:.7rem; }
@media (max-width:760px){ .flow-path .flow-step.has-img .flow-img{ max-width:560px; margin:0 auto; } }
/* เส้นทางงูต้องการพื้นที่กว้างพอให้การ์ดอ่านง่าย (หน้าเมนูขั้นตอนการเรียน) */
.flow-panel:has(.flow-path){ max-width:1040px; }
.flow-panel .flow-bonus{ max-width:640px; margin-left:auto; margin-right:auto; }
@media (min-width:761px){ .flow-path{ margin-bottom:22px; } .flow-path .path-cell .flow-step{ font-size:.9rem; } }

/* ===== หน้าแรก: โปรแกรมเสริม (ต่อจากมัธยมต้น) ===== */
.group-extras{ margin-top:10px; }
.home-page .group-extras .group-title{ background:linear-gradient(135deg,#0EA5E9,#6366F1); }
.extras-lead{ margin:0 4px 14px; color:#475569; line-height:1.6; }
.extras-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr)); gap:20px; }
.extra-card{ display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:22px 24px; border-radius:26px; text-decoration:none; color:#fff; position:relative; overflow:hidden;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55), 0 8px 0 var(--ed), 0 18px 28px rgba(0,0,0,.18); transition:transform .18s cubic-bezier(.2,.9,.3,1.3); }
.extra-card:hover{ transform:translateY(-5px); } .extra-card:active{ transform:translateY(6px); }
.extra-flow{ background:linear-gradient(135deg,#38BDF8,#6366F1); --ed:#3730A3; }
.extra-block{ background:linear-gradient(135deg,#A78BFA,#EC4899); --ed:#9D174D; }
.extra-head{ display:flex; align-items:center; gap:16px; }
.extra-head b{ font-size:1.2em; line-height:1.25; text-shadow:0 2px 0 rgba(0,0,0,.2); }
.extra-ico{ flex:none; width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; font-size:2.4rem; box-shadow:inset 0 -6px 10px rgba(0,0,0,.15); }
.extra-card small{ font-size:.66em; font-weight:500; line-height:1.55; opacity:.96; }
.extra-go{ align-self:flex-start; background:#fff; color:#4338CA; font-weight:800; padding:8px 20px; border-radius:999px; font-size:.8em; box-shadow:0 4px 0 rgba(0,0,0,.18); white-space:nowrap; }

.extra-pseudo{ background:linear-gradient(135deg,#34D399,#0EA5E9); --ed:#0F766E; }

/* ปุ่มโปรแกรมเสริม/เกม แบบลูกอม (ใช้เมื่อไม่มีรูปปุ่มของครู) */
.toolbtn{ --c1:#60A5FA; --c2:#2563EB; --cd:#1E3A8A; position:relative; display:flex !important; align-items:center; gap:12px; width:min(440px,92%); padding:8px 18px 8px 10px !important; border-radius:999px !important; border:3px solid #fff !important; color:#fff !important; text-decoration:none; font-weight:800; font-size:1.02rem; text-align:left; background:linear-gradient(180deg,var(--c1),var(--c2)) !important; box-shadow:0 6px 0 var(--cd), 0 12px 18px rgba(0,0,0,.2) !important; text-shadow:0 2px 0 rgba(0,0,0,.25); transition:transform .15s, box-shadow .15s; overflow:hidden; }
.toolbtn::before{ content:""; position:absolute; left:14px; right:14px; top:4px; height:36%; border-radius:99px; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)); pointer-events:none; }
.toolbtn:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 9px 0 var(--cd), 0 16px 22px rgba(0,0,0,.22) !important; }
.toolbtn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--cd) !important; }
.toolbtn .tb-ico{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; font-size:1.6rem; border-radius:50%; background:#fff; border:3px solid var(--c1); text-shadow:none; box-shadow:inset 0 -3px 0 rgba(0,0,0,.1), 0 3px 0 rgba(0,0,0,.18); }
.toolbtn .tb-txt{ flex:1; line-height:1.25; }
.toolbtn .tb-go{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.9); color:var(--cd); font-size:.8rem; text-shadow:none; }
.tb-purple{ --c1:#C084FC; --c2:#7C3AED; --cd:#4C1D95; }
.tb-blue{ --c1:#60A5FA; --c2:#2563EB; --cd:#1E3A8A; }
.tb-teal{ --c1:#2DD4BF; --c2:#0D9488; --cd:#115E59; }
.tb-pink{ --c1:#F9A8D4; --c2:#DB2777; --cd:#831843; }
.tb-orange{ --c1:#FDBA74; --c2:#EA580C; --cd:#7C2D12; }
.tb-green{ --c1:#86EFAC; --c2:#16A34A; --cd:#14532D; }
.toolbtn.has-actionimg{ display:block !important; width:auto; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; text-shadow:none; overflow:visible; }
.toolbtn.has-actionimg::before, .toolbtn.has-actionimg > span{ display:none !important; }
.toolbtn.has-actionimg:hover{ box-shadow:none !important; filter:brightness(1.06); }

/* รายงานจุดประสงค์ + ตรวจคำตอบวิจารณ์ (เมนูครู) */
.rp-table td.rp-hi{ background:#DCFCE7; color:#166534; font-weight:700; }
.rp-table td.rp-mid{ background:#FEF9C3; color:#854D0E; font-weight:700; }
.rp-table td.rp-lo{ background:#FEE2E2; color:#991B1B; font-weight:700; }
.rp-tabs{ flex-wrap:wrap; } .rp-tabs .rp-tab{ min-width:120px; }
.rv-card{ border:2px solid #E0E7FF; border-radius:14px; padding:10px 12px; margin-bottom:10px; background:#fff; }
.rv-head{ font-size:.95em; color:#374151; margin-bottom:6px; }
.rv-ans{ white-space:pre-wrap; background:#F8FAFC; border-radius:10px; padding:8px 10px; margin-bottom:8px; line-height:1.5; }
.rv-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rv-row select,.rv-row input{ font:inherit; padding:5px 9px; border-radius:10px; border:1px solid #CBD5E1; }
.rv-note{ flex:1; min-width:160px; }
.rv-save{ padding:7px 16px; border:none; border-radius:999px; background:#16A34A; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.rv-save:disabled{ opacity:.5; } .rv-st{ font-size:.9em; color:#475569; }
.wk-open{ border:2px solid #C7D2FE; background:#EEF2FF; color:#3730A3; font:inherit; font-weight:800; border-radius:999px; padding:3px 12px; cursor:pointer; white-space:nowrap; }
.wk-open:hover{ background:#6366F1; border-color:#6366F1; color:#fff; }