/* cache-bump: v1.1.16 2026-07-30 */
/* ============================================================
   IT-CIL — Design Language v1  ·  "ห้องเรียนชุมชน"
   An original, warm-editorial identity. NOT related to any
   other system. Trirong (serif display) + IBM Plex Sans Thai.
   Palette: warm paper · pine green · terracotta · amber.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Trirong:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root{
  /* ============================================================
     IT-CIL palette · น้ำเงิน 80% · ขาวนวล 15% · ส้ม 5% (+สีรองเล็กน้อย)
     คงชื่อตัวแปรเดิม (pine/terra/amber/plum) เพื่อไม่ต้องแก้ทุก component:
       pine = น้ำเงินหลัก · terra = ส้ม accent · amber = น้ำเงินรอง · plum = น้ำเงินเข้ม
     ============================================================ */
  /* surfaces — ขาวนวลอมฟ้า (ไม่ใช่ #fff) */
  --paper:#eef1f8; --paper-2:#e1e6f1;
  --surface:#fbfcff; --surface-2:#f3f6fc;
  --line:#dce1ee; --line-2:#eaeef7;
  /* ink — น้ำเงินเข้ม */
  --ink:#1f2433; --ink-2:#454d66; --ink-3:#7e869f; --ink-4:#aab0c4;
  /* brand: pine = น้ำเงินหลัก (80%) */
  --pine:#3a4a77; --pine-dark:#2b3759; --pine-deep:#1f2747; --pine-soft:#e7eaf2;
  /* terra = ส้ม accent (5%) */
  --terra:#eb5a26; --terra-dark:#c8431a; --terra-soft:#fce4da;
  /* amber = น้ำเงินรอง */
  --amber:#5b6aa0; --amber-dark:#3a4a77; --amber-soft:#e7eaf2;
  /* plum = น้ำเงินเข้ม (แอดมิน) */
  --plum:#2b3759; --plum-soft:#e2e6f0;
  /* semantic (status — คงไว้ให้แยกออกจากแบรนด์) */
  --ok:#2f8f63; --ok-soft:#def0e7; --ok-ink:#1f6647;
  --warn:#d98324; --warn-soft:#faecd6; --warn-ink:#8a5410;
  --bad:#cf4434; --bad-soft:#fae0dc; --bad-ink:#8f291d;
  /* role tints */
  --r-teacher:var(--terra); --r-teacher-soft:var(--terra-soft);
  --r-student:var(--pine);  --r-student-soft:var(--pine-soft);
  --r-community:var(--amber); --r-community-soft:var(--amber-soft);
  --r-admin:var(--plum); --r-admin-soft:var(--plum-soft);
  /* shape */
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --pill:999px;
  --sh-1:0 1px 2px rgba(31,36,51,.06), 0 1px 3px rgba(31,36,51,.05);
  --sh-2:0 2px 6px rgba(31,36,51,.06), 0 6px 18px rgba(31,36,51,.08);
  --sh-3:0 4px 12px rgba(31,36,51,.08), 0 14px 36px rgba(31,36,51,.12);
  /* layout */
  --rail:268px; --top:0px;
  /* accent (themable per role) */
  --accent:var(--pine); --accent-dark:var(--pine-dark); --accent-soft:var(--pine-soft);
  --serif:'Trirong', Georgia, serif;
  --sans:'IBM Plex Sans Thai','IBM Plex Sans', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55; font-size:15px; }
.ph{ line-height:1; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px; }
button{ font-family:inherit; }

/* paper texture: faint blue dots */
.paper-bg{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(58,74,119,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
}

h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0; line-height:1.18; }
.serif{ font-family:var(--serif); }
.eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.muted{ color:var(--ink-3); }

/* ─────────── Reviewer perspective switcher ─────────── */
.persp{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:600;
  display:flex; align-items:center; gap:3px; background:rgba(39,34,25,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:5px; border-radius:var(--pill);
  box-shadow:0 12px 30px rgba(40,28,10,.3); }
.persp .lbl{ color:rgba(255,255,255,.5); font-size:.68rem; font-weight:600; padding:0 8px 0 11px; letter-spacing:.05em; display:flex; align-items:center; gap:5px; }
.persp button{ font-size:.8rem; font-weight:600; border:none; background:transparent; color:rgba(255,255,255,.72);
  padding:6px 14px; border-radius:var(--pill); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.persp button:hover{ color:#fff; background:rgba(255,255,255,.1); }
.persp button.on{ background:var(--surface); color:var(--pine-deep); }
.persp button.on .ph{ color:var(--terra); }
@media(max-width:720px){ .persp .lbl{display:none;} .persp button span{display:none;} .persp button{padding:7px 11px;} }

/* ─────────── Buttons ─────────── */
.btn{ font-family:var(--sans); font-weight:600; font-size:.9rem; border:1.5px solid transparent;
  border-radius:var(--r2); padding:.6rem 1.1rem; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  cursor:pointer; text-decoration:none; transition:all .18s ease; white-space:nowrap; line-height:1.2; }
.btn .ph{ font-size:1.05em; }
.btn-pri{ background:var(--accent); color:#fff; box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 28%,transparent); }
.btn-pri:hover{ background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 35%,transparent); }
.btn-terra{ background:var(--terra); color:#fff; box-shadow:0 4px 12px rgba(191,93,56,.28); }
.btn-terra:hover{ background:var(--terra-dark); transform:translateY(-1px); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn-soft{ background:var(--accent-soft); color:var(--accent-dark); }
.btn-soft:hover{ background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 12%); }
.btn-block{ width:100%; }
.btn-sm{ padding:.42rem .8rem; font-size:.82rem; border-radius:var(--r1); }
.btn-lg{ padding:.78rem 1.4rem; font-size:1rem; }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.icon-btn{ width:40px; height:40px; border-radius:var(--r2); border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; position:relative; transition:.15s; }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }
.icon-dot{ position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:var(--pill);
  background:var(--terra); color:#fff; font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }

/* ─────────── Cards & misc surfaces ─────────── */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--sh-1); }
.card-pad{ padding:20px 22px; }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:18px; box-shadow:var(--sh-1); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* badges / pills / chips */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:var(--pill); background:var(--surface-2); color:var(--ink-2); }
.badge.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.badge.warn{ background:var(--warn-soft); color:var(--warn-ink); }
.badge.bad{ background:var(--bad-soft); color:var(--bad-ink); }
.badge.draft{ background:var(--paper-2); color:var(--ink-3); }
.badge.accent{ background:var(--accent-soft); color:var(--accent-dark); }
/* ⚠️ .chip ใช้เป็นแท็ก <a> ในตัวกรองหมวดหน้าบทเรียนชุมชน — ต้องปิด text-decoration */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; padding:6px 13px; border-radius:var(--pill);
  background:var(--surface); border:1.5px solid var(--line); color:var(--ink-2); cursor:pointer; transition:.15s; font-family:var(--sans);
  text-decoration:none; }
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rolepill{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600; padding:4px 11px; border-radius:var(--pill); }
.rolepill .dot{ width:8px; height:8px; border-radius:50%; }
.role-teacher{ background:var(--terra-soft); color:var(--terra-dark); } .role-teacher .dot{ background:var(--terra); }
.role-student{ background:var(--pine-soft); color:var(--pine-dark); } .role-student .dot{ background:var(--pine); }
.role-community{ background:var(--amber-soft); color:var(--amber-dark); } .role-community .dot{ background:var(--amber); }
.role-admin{ background:var(--plum-soft); color:var(--plum); } .role-admin .dot{ background:var(--plum); }

/* progress (growth bar) */
.bar{ height:9px; border-radius:var(--pill); background:var(--paper-2); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--accent),var(--accent-dark)); transition:width .5s ease; }
.bar.amber > i{ background:linear-gradient(90deg,var(--amber),var(--amber-dark)); }

/* growth ring */
.ring{ --p:0; --c:var(--accent); width:64px; height:64px; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--paper-2) 0); display:flex; align-items:center; justify-content:center; }
.ring::before{ content:''; position:absolute; width:46px; height:46px; border-radius:50%; background:var(--surface); }
.ring span{ position:relative; font-weight:700; font-size:.92rem; font-family:var(--serif); color:var(--accent-dark); }

/* ─────────── App shell ─────────── */
.shell{ position:fixed; inset:0; display:grid; grid-template-columns:var(--rail) 1fr; background:var(--paper); overflow:hidden; }
.shell.paper-bg{ background-color:var(--paper); }

.rail{ background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.rail-brand{ display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--line-2); }
.brand-mark{ width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--pine),var(--pine-deep)); color:var(--terra); font-size:1.35rem; box-shadow:var(--sh-1); position:relative; }
.brand-mark::after{ content:''; position:absolute; inset:0; border-radius:13px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.brand-name{ font-family:var(--serif); font-weight:700; font-size:1.05rem; line-height:1.1; }
.brand-sub{ font-size:.66rem; color:var(--ink-3); margin-top:1px; }
.rail-nav{ flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px; }
.rail-sec{ font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); padding:14px 12px 5px; }
/* ⚠️ text-decoration:none จำเป็น — .nav-i ใช้กับแท็ก <a> (เมนูไซด์บาร์ทั้งแอดมินและครู)
   ของเดิมไม่มี → ทุกเมนูมีเส้นขีดใต้ · บั๊กตระกูลเดียวกับ .lc (การ์ดหน้าแรก) */
.nav-i{ display:flex; align-items:center; gap:11px; padding:.6rem .8rem; border-radius:var(--r2); border:none; background:transparent;
  color:var(--ink-2); font-family:var(--sans); font-size:.9rem; font-weight:500; text-align:left; cursor:pointer; transition:.15s; position:relative;
  text-decoration:none; }
.nav-i .ph{ font-size:1.2rem; width:24px; text-align:center; flex-shrink:0; color:var(--ink-3); }
.nav-i:hover{ background:var(--surface-2); color:var(--ink); }
.nav-i.on{ background:var(--accent-soft); color:var(--accent-dark); font-weight:600; }
.nav-i.on .ph{ color:var(--accent); }
.nav-i.on::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--terra); }
.nav-i .tag{ margin-left:auto; font-size:.66rem; font-weight:700; padding:1px 8px; border-radius:var(--pill); background:var(--amber-soft); color:var(--amber-dark); }
.nav-i .hot{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--terra); }
.rail-foot{ margin:12px; padding:13px 14px; border-radius:var(--r2); background:var(--accent-soft); display:flex; gap:9px; font-size:.78rem; color:var(--accent-dark); line-height:1.5; }
.rail-foot .ph{ font-size:1.1rem; flex-shrink:0; }

/* v1.1.9: min-width:0 สำคัญมาก — เป็น grid item (คอลัมน์ 1fr) ถ้าไม่ใส่ เนื้อหากว้าง
   (ตาราง/ฟอร์ม) จะดันคอลัมน์จนล้น แล้ว .shell (overflow:hidden) ตัดทิ้ง → มือถือเห็นเนื้อหาโดนตัด.
   ใส่แล้วคอลัมน์หดพอดีจอ ให้ตัวเลื่อนภายใน (.card:has(>.tbl)) ทำงานแทน */
.work{ display:flex; flex-direction:column; min-height:0; min-width:0; }
.topbar{ height:64px; flex-shrink:0; background:color-mix(in srgb,var(--paper) 80%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 26px; }
.topbar-title{ font-family:var(--serif); font-weight:600; font-size:1.08rem; }
.topbar-r{ display:flex; align-items:center; gap:12px; }
.usr{ display:flex; align-items:center; gap:10px; }
.usr .av{ width:38px; height:38px; border-radius:12px; color:#fff; font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; font-family:var(--serif); }
.usr-meta{ line-height:1.2; }
.usr-meta b{ font-size:.86rem; font-weight:600; display:block; }
.usr-meta small{ font-size:.7rem; color:var(--ink-3); }
.scroll{ flex:1; overflow-y:auto; }
.page{ max-width:1080px; padding:26px 28px 70px; margin:0 auto; min-width:0; }
.page-wide{ max-width:1240px; }

/* ── v1.0.6 (ข้อ 1): รองรับมือถือ/แท็บเล็ต — sidebar เป็นลิ้นชัก + ตารางเลื่อนแนวนอน ── */
.rail-toggle{ display:none; width:40px; height:40px; flex-shrink:0; border:1px solid var(--line); border-radius:var(--r2);
  background:var(--surface); color:var(--ink-2); align-items:center; justify-content:center; font-size:1.3rem; cursor:pointer; }
.rail-backdrop{ display:none; }
@media(max-width:900px){
  .shell{ grid-template-columns:1fr; }
  .rail{ position:fixed; top:0; left:0; bottom:0; width:min(280px,82vw); z-index:1200;
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-3); }
  .shell.nav-open .rail{ transform:translateX(0); }
  .rail-backdrop{ display:block; position:fixed; inset:0; z-index:1100; background:rgba(31,36,51,.45);
    opacity:0; pointer-events:none; transition:opacity .26s; }
  .shell.nav-open .rail-backdrop{ opacity:1; pointer-events:auto; }
  .rail-toggle{ display:inline-flex; }
  .topbar{ padding:0 16px; gap:10px; }
  .page{ padding:20px 16px 60px; }
  .tbl{ min-width:600px; }                    /* ให้เลื่อนแนวนอนแทนอัดคอลัมน์ */
  .card:has(> .tbl){ overflow:auto !important; }
}
@media(max-width:560px){
  .topbar{ height:58px; }
  .topbar-title{ font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .usr-meta{ display:none; }                  /* ประหยัดพื้นที่บนจอเล็ก */
  .ph-head h2{ font-size:1.4rem; }
  .ph-head .btn, .ph-head a.btn{ font-size:.82rem; }
}

/* page header */
.ph-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.ph-head h2{ font-size:1.7rem; }
.ph-head p{ margin:5px 0 0; color:var(--ink-3); font-size:.92rem; }

/* section header inside cards */
.sec-h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem; color:var(--ink); padding-bottom:10px; margin-bottom:14px; border-bottom:1.5px solid var(--line-2); }
.sec-h .ph{ color:var(--accent); font-size:1.1rem; }

/* stat cards */
/* v1.3.0 (R2-14): เดิมไม่มี margin-bottom → หน้าไหนไม่ใส่ margin เองจะเห็นการ์ดสรุป
   ชิดติดตาราง/การ์ดถัดไปจนดูเหมือนกล่องเดียวกัน (ผู้ใช้แจ้ง 4 ส.ค. 2569) */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:16px 18px; box-shadow:var(--sh-1); }
.stat .ic{ width:42px; height:42px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; margin-bottom:12px; }
.stat .n{ font-family:var(--serif); font-size:1.8rem; font-weight:700; line-height:1; }
.stat .l{ font-size:.8rem; color:var(--ink-3); margin-top:5px; }
.stat .delta{ font-size:.74rem; font-weight:600; color:var(--ok); margin-top:7px; display:inline-flex; align-items:center; gap:3px; }
@media(max-width:860px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* tables */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);
  background:var(--surface-2); padding:11px 18px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:13px 18px; font-size:.86rem; border-bottom:1px solid var(--line-2); }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.row-t{ display:flex; align-items:center; gap:10px; font-weight:500; }
.row-t .ph{ color:var(--accent); }
/* .act ใช้ทั้งกับ <button> และ <a> — ใส่ text-decoration:none กันไว้ (ตอนนี้มีแต่ไอคอนข้างใน) */
.act{ width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-3);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s; margin-right:4px;
  text-decoration:none; }
.act:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.act.bad:hover{ border-color:var(--bad); color:var(--bad); background:var(--bad-soft); }

/* forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > label{ font-size:.82rem; font-weight:600; color:var(--ink-2); }
.field .req{ color:var(--bad); }
.inp{ width:100%; border:1.5px solid var(--line); border-radius:var(--r2); padding:.6rem .85rem; font-family:var(--sans); font-size:.9rem;
  background:var(--surface); color:var(--ink); outline:none; transition:.15s; }
.inp:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.inp{ resize:vertical; min-height:76px; }
.inp-pre{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--r2); overflow:hidden; background:var(--surface); }
.inp-pre:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.inp-pre span{ display:flex; align-items:center; padding:0 12px; background:var(--surface-2); border-right:1px solid var(--line); color:var(--ink-3); font-size:.9rem; }
.inp-pre .inp{ border:none; box-shadow:none; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:760px){ .grid2{ grid-template-columns:1fr; } }
.upl{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:2px dashed var(--line); border-radius:var(--r2);
  background:var(--surface-2); cursor:pointer; color:var(--ink-2); transition:.15s; }
.upl:hover{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); }
.upl .ph{ font-size:1.5rem; color:var(--accent); flex-shrink:0; }
.upl strong{ display:block; font-size:.86rem; } .upl small{ display:block; font-size:.74rem; color:var(--ink-3); }
.upl-big{ flex-direction:column; text-align:center; padding:34px 20px; }
.upl-big .ph{ font-size:2.6rem; }
.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input{ display:none; }
.switch .sl{ width:44px; height:25px; border-radius:var(--pill); background:var(--paper-2); position:relative; transition:.15s; }
.switch .sl::before{ content:''; position:absolute; top:2.5px; left:2.5px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:.18s; }
.switch input:checked + .sl{ background:var(--accent); }
.switch input:checked + .sl::before{ transform:translateX(19px); }

/* segmented tabs */
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r2); padding:4px; gap:3px; }
.seg button{ border:none; background:transparent; color:var(--ink-2); font-family:var(--sans); font-weight:600; font-size:.84rem;
  padding:.45rem .9rem; border-radius:var(--r1); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.seg button:hover{ color:var(--ink); }
.seg button.on{ background:var(--surface); color:var(--accent-dark); box-shadow:var(--sh-1); }

/* form-actions footer */
.f-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:18px; margin-top:4px; border-top:1px solid var(--line-2); }

.note{ display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:var(--r2); background:var(--accent-soft);
  color:var(--accent-dark); font-size:.82rem; line-height:1.5; overflow-wrap:anywhere; }
.note .ph{ flex-shrink:0; margin-top:1px; }
/* v1.1.6: ตัวข้อความใน .note (flex child) ต้อง min-width:0 ไม่งั้นภาษาไทย (ไม่มีช่องว่าง)
   จะเป็นก้อนเดียว ดันล้นออกนอกกล่อง โดยเฉพาะในโมดัลแคบ ๆ */
/* v1.1.16: ต้อง reset white-space:normal ด้วย — modal ถูกวางใน <td white-space:nowrap>
   (ช่องปุ่มในตารางถังขยะ) → nowrap ถูก inherit ลงมา ชนะ overflow-wrap ทำให้ไม่ตัดบรรทัด */
.note{ white-space:normal; }
.note > :not(.ph){ min-width:0; overflow-wrap:anywhere; word-break:break-word; white-space:normal; }
.empty{ text-align:center; padding:46px 20px; color:var(--ink-3); }
.empty .ph{ font-size:2.6rem; color:var(--ink-4); display:block; margin-bottom:8px; }

/* ── v1.0.8 (AUD-2.1): สถานะ "กำลังส่ง" ของปุ่ม submit — กันกดซ้ำ + feedback ระหว่างรอ ── */
.itcil-spin{ display:inline-block; animation:itcil-spin .8s linear infinite; }
@keyframes itcil-spin{ to{ transform:rotate(360deg); } }
button.is-loading, input.is-loading, .btn.is-loading{ opacity:.65; cursor:progress; pointer-events:none; }

/* ── v1.0.9 (A1): โลโก้ที่แอดมินอัปโหลด — แสดงตรง ๆ ไม่มีกล่อง/พื้นหลัง/crop ── */
.brand-logo{ width:42px; height:42px; object-fit:contain; flex-shrink:0; display:block; }

/* ── v1.0.9 (C-1): หัวข้อ section มาตรฐานเดียวทั้งระบบ ── */
.sec-title{ font-size:1.6rem; margin-top:4px; }
/* ── v1.0.9 (C-2): รูปเต็มกรอบแบบ absolute — แทน inline style ที่ซ้ำหลายจุด ── */
.abs-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── v1.3.0p1: หน้าภาพรวมบทเรียนของครู (/my-lessons/{id}) ────────────────────
   ของเดิมวางรูปปกไว้ซ้าย คำอธิบายขวา ในการ์ดที่กว้างแค่ครึ่งจอ
   → คอลัมน์ข้อความเหลือ ~230px คำอธิบายยาว ๆ (แบบคัดมาจาก YouTube) จึงยืดการ์ด
     สูงเป็นพันพิกเซล และการ์ด "แบบทดสอบ" ข้าง ๆ ถูกยืดตามจนว่างโล่งทั้งใบ */
.ls-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px;
  align-items:start; }                       /* ← กันการ์ดสั้นถูกยืดตามการ์ดยาว */
.ls-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r2); display:block; }
.ls-cover-ghost{ display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); font-size:2.2rem; }
.ls-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.ls-desc{ font-size:.88rem; line-height:1.75; margin:12px 0 0; overflow-wrap:anywhere; }
/* ตัดคำอธิบายยาวไว้ก่อน แล้วให้กดขยาย — ไม่งั้นการ์ดเดียวยาวกว่าทั้งหน้า */
.ls-desc.is-clamp{ display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden; }
.ls-quiz{ margin:0; padding-left:20px; font-size:.88rem; line-height:1.7; }
.ls-quiz li + li{ margin-top:7px; }
.ls-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── v1.3.0p2 (R3-01): การ์ดแนวนอน — หน้ารายการฝั่งแอดมิน ─────────────────
   แทนตารางในหน้า "บทเรียนหลัก" และ "วิดีโอเสริม" · ปกเดิม 56px เล็กจนดูไม่ออก
   ว่าครูอัปรูปถูกหรือเปล่า และไม่เข้าชุดกับการ์ดฝั่งครู
   ⚠️ การ์ดทั้งใบ "ไม่ใช่" <a> เพราะข้างในมี <form> (ลำดับ↑↓ · ลบ) ซึ่งซ้อนใน <a>
      ไม่ได้ตามสเปก HTML — ลิงก์จึงครอบเฉพาะปกกับชื่อ */
.rc{ display:flex; align-items:center; gap:15px; padding:11px 13px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r3); box-shadow:var(--sh-1); transition:.16s; }
.rc + .rc{ margin-top:10px; }
.rc:hover{ border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); box-shadow:var(--sh-2); }
.rc-ord{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; }
.rc-ord .t-num{ font-size:.85rem; }
.rc-cover{ width:132px; aspect-ratio:16/9; border-radius:var(--r2); flex:none; overflow:hidden; display:block;
  text-decoration:none; position:relative; }
.rc-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.rc-main{ flex:1; min-width:0; }
.rc-title{ display:block; font-weight:700; font-size:.97rem; color:var(--ink); text-decoration:none; margin-bottom:3px; }
.rc-title:hover{ color:var(--accent-dark); }
.rc-desc{ color:var(--ink-3); font-size:.8rem; margin:0 0 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.rc-side{ flex:none; width:158px; }
.rc-bar{ height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-bottom:5px; }
.rc-bar span{ display:block; height:100%; background:var(--pine); border-radius:99px; }
.rc-act{ flex:none; display:flex; gap:5px; align-items:center; }
@media (max-width:820px){
  .rc{ flex-wrap:wrap; }
  .rc-main{ flex-basis:100%; order:3; }
  .rc-side{ width:auto; flex:1; order:4; }
  .rc-act{ order:5; }
}

/* ── v1.3.0p7 (R3-05ข): แถบ "มีข้อมูลใหม่" ─────────────────────────────────
   ขึ้นเมื่อระบบพบว่ามีผู้สมัคร/คะแนน/ความคืบหน้าเข้ามาใหม่ระหว่างที่เปิดหน้าค้างไว้
   จงใจให้ "บอก" ไม่ใช่ "แทนที่เนื้อหาเอง" — ผู้ใช้กดโหลดเองเมื่อพร้อม */
.live-new{ display:flex; align-items:center; gap:10px; margin-bottom:16px;
  padding:11px 15px; border-radius:var(--r2); background:var(--accent-soft);
  color:var(--accent-dark); font-size:.88rem; font-weight:600; }
.live-new .ph{ font-size:1.1rem; flex:none; }
.live-new button{ margin-left:auto; flex:none; background:var(--accent); color:#fff; border:none; }
.live-new button:hover{ background:var(--accent-dark); }