/* ============================================================
   Youth Culture Lab — LMS mockup
   สีทั้งหมดสุ่มมาจากไฟล์ต้นฉบับ "Table of Summary - YCLT LMS.pdf" หน้า 6

   ฟอนต์เก็บไว้ใน assets/fonts/ ไม่พึ่ง Google CDN
   → เปิดใช้งานได้แม้ไม่มีอินเทอร์เน็ต
   ============================================================ */
@font-face{
  font-family:'Noto Sans Thai';
  src:url('fonts/NotoSansThai.ttf') format('truetype-variations');
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:'Material Symbols Rounded';
  src:url('fonts/MaterialSymbolsRounded.ttf') format('truetype-variations');
  font-weight:100 700;
  font-display:block;   /* block กัน "ชื่อไอคอน" โผล่เป็นข้อความตอนฟอนต์ยังไม่มา */
}

:root{
  --pink:#e44a75; --pink-d:#cf3a64; --red:#ed4465; --magenta:#df4ca4;
  --ink:#37292f; --muted:#948b95; --line:#efecf3; --bg:#f7f7fb;
  --tint:#fdf2f5;

  --c1:#5e9bd9; --c1s:#a7c9ec; --c1t:#ecf3fa;   /* Discover   */
  --c2:#8fbc7d; --c2s:#c1d9b6; --c2t:#f2f6ef;   /* Appreciate */
  --c3:#f3b951; --c3s:#f9dca6; --c3t:#fef7ea;   /* Steward    */
  --c4:#fb7087; --c4s:#fdb4c1; --c4t:#feeff1;   /* Create     */
  --c5:#ca77b5; --c5s:#e3b5d7; --c5t:#f9eff6;   /* Develop    */
  --c6:#51aeb6; --c6s:#9ed3d8; --c6t:#eaf5f6;   /* Pitch      */
}
*{box-sizing:border-box;margin:0;padding:0}

/* ============================================================
   หน่วยที่ใช้ในไฟล์นี้
   - rem  : ทุกขนาด (ตัวอักษร ระยะห่าง ความกว้างคอลัมน์) → โตตามจอ
   - %/fr : สัดส่วนการแบ่งพื้นที่ในแนวนอน → ยืดหดตามความกว้าง
   - px   : เฉพาะเส้นขอบ 1–2px และ breakpoint ของ @media เท่านั้น

   1rem โตตามความกว้างจอ : ต่ำกว่า ~1430px = 16px (เท่าเดิมทุกอย่าง)
   จากนั้นค่อย ๆ โตถึง 20px ที่จอ ~2860px ขึ้นไป
   ============================================================ */
html{font-size:clamp(16px, 0.28vw + 12px, 20px)}

body{font-family:'Noto Sans Thai',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:0.8125rem;line-height:1.5}
/* ligature คือหัวใจของ Material Symbols — ถ้าไม่เปิด ชื่อไอคอนจะโผล่เป็นข้อความ
   variation-settings ตั้งให้ตรงกับที่ CDN เคยส่งมา (opsz 20, wght 400, FILL 0, GRAD 0) */
.ms{font-family:'Material Symbols Rounded';font-size:1.25rem;line-height:1;font-weight:400;
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
    font-feature-settings:'liga';-webkit-font-feature-settings:'liga';
    letter-spacing:normal;white-space:nowrap;word-wrap:normal;direction:ltr}
a{color:inherit;text-decoration:none}
/* คอลัมน์ซ้ายเป็น rem (กว้างตามเนื้อหาเมนู ไม่ใช่ตามสัดส่วนจอ)
   คอลัมน์ขวาเป็น 1fr → กินพื้นที่ที่เหลือทั้งหมด
   max-width กันไม่ให้บรรทัดยาวเกินอ่านบนจอ ultrawide */
.app{display:grid;grid-template-columns:13.25rem 1fr;min-height:100vh;max-width:120rem;margin:0 auto;background:var(--bg)}

/* shell คงที่ — สลับเฉพาะ .page */
.page{display:none}
.page.on{display:block}
.burger{display:none;width:2.125rem;height:2.125rem;place-items:center;border:0;background:none;
        border-radius:0.5625rem;color:#6b6779;cursor:pointer;font-family:inherit}
.scrim{display:none}

/* ---------- sidebar ---------- */
.side{background:#fff;border-right:1px solid var(--line);padding:1.375rem 1rem;display:flex;flex-direction:column;gap:1.5rem;
      position:sticky;top:0;height:100vh;overflow-y:auto}
.logo b{display:block;font-size:1.25rem;font-weight:700;letter-spacing:.5px;line-height:1.05;
  background:linear-gradient(100deg,var(--red),var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;font-size:0.5625rem;color:var(--pink);margin-top:0.3125rem;letter-spacing:.3px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:0.6875rem;padding:0.5625rem 0.6875rem;border-radius:0.5625rem;color:#6b6779;font-size:0.7812rem}
.nav a:hover{background:#faf8fc}
.nav a.on{background:var(--tint);color:var(--pink);font-weight:600}
/* ลิงก์ข้ามไปอีกฝั่ง (หน้าบ้าน ↔ หลังบ้าน) */
.nav a.xlink{color:#8b8798}
.nav a.xlink:hover{background:var(--tint);color:var(--pink)}
.nav a .ext{margin-left:auto;font-size:0.5312rem;color:var(--muted);border:1px solid #e6e2ea;border-radius:0.25rem;padding:1px 0.25rem;white-space:nowrap}
.nav a.xlink:hover .ext{border-color:var(--c4s);color:var(--pink)}
.side.dark .nav a .ext{border-color:#554a5c;color:#9c8fa0}
.about{margin-top:auto;background:var(--tint);border:1px solid #f6e5ea;border-radius:0.75rem;padding:0.875rem}
.about h4{font-size:0.75rem;margin-bottom:0.375rem;display:flex;align-items:center;gap:0.375rem}
.about h4 .ms{font-size:0.9375rem;color:var(--pink);flex:none}
.about p{font-size:0.6562rem;color:var(--muted);line-height:1.55}
.about button{margin-top:0.625rem;width:100%;padding:0.4375rem;border:1px solid var(--pink);color:var(--pink);background:#fff;border-radius:0.4375rem;font-size:0.6875rem;font-family:inherit;cursor:pointer}

/* ---------- topbar ---------- */
.main{padding:1.125rem 1.5rem 2.75rem;min-width:0}
.top{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.search{flex:1;max-width:26.875rem;position:relative}
.search .ms{position:absolute;left:0.8125rem;top:0.5625rem;font-size:1.0625rem;color:#b6b2c2}
.search input{width:100%;padding:0.5625rem 0.875rem 0.5625rem 2.5rem;border:1px solid var(--line);border-radius:1.25rem;background:#fff;font-family:inherit;font-size:0.75rem;outline:none}
.top .sp{flex:1}
.iconbtn{position:relative;width:2.125rem;height:2.125rem;display:grid;place-items:center;border-radius:0.5625rem;color:#6b6779;cursor:pointer}
.iconbtn:hover{background:#fff}
.iconbtn .dot{position:absolute;top:0.375rem;right:0.4375rem;width:0.375rem;height:0.375rem;background:var(--red);border-radius:50%}
.me{display:flex;align-items:center;gap:0.5625rem;cursor:pointer}
.me>img{width:2.125rem;height:2.125rem;border-radius:50%;object-fit:cover}
.me b{display:block;font-size:0.75rem}
.me span{font-size:0.6562rem;color:var(--muted)}

/* ---------- shared bits ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:0.875rem}
.pad{padding:1.125rem 1.25rem}
.phead{margin-bottom:1.125rem}
.phead h1{font-size:1.25rem;font-weight:700}
.phead .sub{color:var(--muted);font-size:0.75rem}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
h5.sec{font-size:0.7812rem;font-weight:700;margin-bottom:0.75rem}
h5.sec.row{display:flex;justify-content:space-between;align-items:center}
h5.sec a{font-size:0.6562rem;color:var(--pink);font-weight:400}
.btn{background:var(--pink);color:#fff;border:0;border-radius:1.25rem;padding:0.5rem 1.25rem;font-family:inherit;font-size:0.75rem;font-weight:600;cursor:pointer}
.btn:hover{background:var(--pink-d)}
.btn.o{background:#fff;border:1px solid var(--pink);color:var(--pink)}
.mini{background:var(--pink);color:#fff;border:0;border-radius:0.875rem;padding:0.25rem 0.6875rem;font-size:0.625rem;font-family:inherit;white-space:nowrap;cursor:pointer}
.mini.o{background:#fff;border:1px solid var(--pink);color:var(--pink)}
.mini.g{background:#f2f0f5;color:#9a94a0;cursor:default}
.pill{border:1px solid var(--line);color:var(--muted);font-size:0.6562rem;padding:0.25rem 0.75rem;border-radius:1.25rem;white-space:nowrap}
.tagc{font-size:0.625rem;padding:0.1875rem 0.5625rem;border-radius:1.25rem;white-space:nowrap}
.t1{background:var(--c1t);color:var(--c1)} .t2{background:var(--c2t);color:#6d9a5c}
.t3{background:var(--c3t);color:#c9902c} .t4{background:var(--c4t);color:var(--c4)}
.t5{background:var(--c5t);color:var(--c5)} .t6{background:var(--c6t);color:var(--c6)}
.tp{background:var(--tint);color:var(--pink)}
.ic{border-radius:0.5rem;display:grid;place-items:center;flex:none;width:1.875rem;height:1.875rem}
.ic .ms{font-size:1.0625rem}
.ic.v{background:var(--c4t);color:#f0475f} .ic.a{background:var(--c1t);color:var(--c1)}
.ic.p{background:var(--tint);color:var(--pink)} .ic.g{background:var(--c2t);color:#6d9a5c}
.ic.y{background:var(--c3t);color:#c9902c} .ic.tl{background:var(--c6t);color:var(--c6)}
.av{width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:0.6875rem;font-weight:600;flex:none}
.av.lg{width:3.5rem;height:3.5rem;font-size:1.0625rem}
.a1{background:linear-gradient(145deg,var(--c1s),var(--c1))} .a2{background:linear-gradient(145deg,var(--c2s),var(--c2))}
.a3{background:linear-gradient(145deg,var(--c3s),var(--c3))} .a4{background:linear-gradient(145deg,var(--c4s),var(--c4))}
.a5{background:linear-gradient(145deg,var(--c5s),var(--c5))} .a6{background:linear-gradient(145deg,var(--c6s),var(--c6))}
.bar{height:0.375rem;border-radius:0.375rem;background:#f0edf3;overflow:hidden}
.bar i{display:block;height:100%;border-radius:0.375rem;background:linear-gradient(90deg,var(--c4s),var(--pink))}
.empty{text-align:center;color:var(--muted);font-size:0.7188rem;padding:1.625rem 0}
.empty .ms{font-size:1.875rem;color:#dcd7e0;display:block;margin-bottom:0.5rem}

/* ---------- learning path (6 ขั้น แนวนอน) ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:0.375rem;position:relative}
.step{text-align:center;position:relative}
.step .bub{width:3.25rem;height:3.25rem;border-radius:50%;margin:0 auto 0.75rem;display:grid;place-items:center;color:#fff;position:relative;z-index:1}
.step .bub .ms{font-size:1.5rem}
.step:not(:last-child)::after{content:"";position:absolute;top:1.625rem;left:calc(50% + 2rem);right:calc(-50% + 2rem);border-top:2px dashed #dcd8e4}
.step .lbl{display:inline-flex;align-items:center;gap:0.3125rem;font-size:0.7812rem;font-weight:600}
.step .n{width:0.9375rem;height:0.9375rem;border-radius:0.25rem;color:#fff;font-size:0.5625rem;display:grid;place-items:center}
.step p{font-size:0.625rem;color:var(--muted);margin-top:0.3125rem;line-height:1.45}
.s1 .bub{background:linear-gradient(145deg,var(--c1s),var(--c1))} .s1 .n{background:var(--c1)}
.s2 .bub{background:linear-gradient(145deg,var(--c2s),var(--c2))} .s2 .n{background:var(--c2)}
.s3 .bub{background:linear-gradient(145deg,var(--c3s),var(--c3))} .s3 .n{background:var(--c3)}
.s4 .bub{background:linear-gradient(145deg,var(--c4s),var(--c4))} .s4 .n{background:var(--c4)}
.s5 .bub{background:linear-gradient(145deg,var(--c5s),var(--c5))} .s5 .n{background:var(--c5)}
.s6 .bub{background:linear-gradient(145deg,var(--c6s),var(--c6))} .s6 .n{background:var(--c6)}
.s1::after{border-image:repeating-linear-gradient(90deg,var(--c1s) 0 0.375rem,transparent 0.375rem 0.75rem) 2}
.s2::after{border-image:repeating-linear-gradient(90deg,var(--c2s) 0 0.375rem,transparent 0.375rem 0.75rem) 2}
.s3::after{border-image:repeating-linear-gradient(90deg,var(--c3s) 0 0.375rem,transparent 0.375rem 0.75rem) 2}
.s4::after{border-image:repeating-linear-gradient(90deg,var(--c4s) 0 0.375rem,transparent 0.375rem 0.75rem) 2}
.s5::after{border-image:repeating-linear-gradient(90deg,var(--c5s) 0 0.375rem,transparent 0.375rem 0.75rem) 2}

/* ---------- module detail (การเรียนรู้ของฉัน) ---------- */
.grid{display:grid;grid-template-columns:1fr 15.25rem;gap:1.125rem;align-items:start}
.mod{margin-top:1.125rem;display:grid;grid-template-columns:15.625rem 1fr;gap:1.625rem;padding:1.25rem 1.375rem}
.modl .tag{display:inline-block;background:var(--c4t);color:var(--c4);font-size:0.625rem;padding:0.1875rem 0.5625rem;border-radius:1.25rem;margin-bottom:0.5625rem}
.modl h2{font-size:1.375rem;font-weight:700;color:var(--pink);line-height:1.25}
.modl h3{font-size:0.8438rem;font-weight:600;margin-top:0.1875rem}
.meta{margin-top:0.875rem;display:flex;flex-direction:column;gap:0.4375rem;font-size:0.7188rem;color:#6b6779}
.meta div{display:flex;align-items:center;gap:0.4375rem}
.meta .ms{font-size:0.9375rem;color:var(--muted)}
.illus{margin-top:1rem;height:6.5rem;border-radius:0.6875rem;background:linear-gradient(135deg,var(--c4t),var(--c1t));display:grid;place-items:center;color:var(--c4s)}
.illus .ms{font-size:2.75rem}
.modr h4{font-size:0.8438rem;font-weight:700;color:var(--pink);margin-bottom:0.625rem}
ul.out{list-style:none;display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1.25rem}
ul.out li{display:flex;gap:0.5rem;font-size:0.7188rem;color:#5c5869;line-height:1.55}
ul.out .ms{font-size:0.9375rem;color:var(--pink);flex:none}
.flow{display:flex;align-items:stretch;gap:0.375rem;margin-bottom:1.125rem}
.fs{flex:1;background:var(--tint);border-radius:0.6875rem;padding:0.8125rem 0.375rem;text-align:center}
.fs .ms{font-size:1.375rem;display:block;margin-bottom:0.375rem}
.fs b{font-size:0.6875rem;display:block}
.fs span{font-size:0.5625rem;color:#8d838c;line-height:1.4;display:block;margin-top:0.1875rem}
.fs:nth-child(1) .ms{color:#ef6b93} .fs:nth-child(3) .ms{color:var(--pink)}
.fs:nth-child(5) .ms{color:var(--c3)} .fs:nth-child(7) .ms{color:#3fa9f5} .fs:nth-child(9) .ms{color:#4a6ee0}
.arr{align-self:center;color:var(--c4s);font-size:0.875rem}
.cta{display:block;margin:0 auto;background:var(--pink);color:#fff;border:0;border-radius:1.25rem;padding:0.5625rem 1.875rem;font-family:inherit;font-size:0.7812rem;font-weight:600;cursor:pointer}
.cta:hover{background:var(--pink-d)}
.tabs{display:flex;gap:1.375rem;border-bottom:1px solid var(--line);padding:0 1.375rem;margin-top:0.375rem;overflow-x:auto}
.tabs a{padding:0.6875rem 0;font-size:0.75rem;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--pink);font-weight:600;border-color:var(--pink)}
.items{padding:0.375rem 1.375rem 1rem}
.item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid #f5f3f8}
.item:last-child{border:0}
.item .txt{flex:1;min-width:0}
.item b{display:block;font-size:0.75rem;font-weight:500}
.item span{font-size:0.6562rem;color:var(--muted)}
.done{color:#6aab5a;font-size:0.6875rem;display:flex;align-items:center;gap:0.25rem;white-space:nowrap}
.done .ms{font-size:0.875rem}

/* ---------- right rail ---------- */
.rail{display:flex;flex-direction:column;gap:0.875rem}
.rail .card{padding:1rem}
.rail h5{font-size:0.7812rem;font-weight:700;margin-bottom:0.75rem}
.rail h5.row{display:flex;justify-content:space-between;align-items:center}
.rail h5 a{font-size:0.6562rem;color:var(--pink);font-weight:400}
.ring{width:5rem;height:5rem;border-radius:50%;margin:0 auto 0.75rem;display:grid;place-items:center;
      background:conic-gradient(var(--pink) 0 72%,var(--tint) 72% 100%)}
.ring i{width:4rem;height:4rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:1.0625rem;font-weight:700;color:var(--pink)}
.rail .prog{text-align:center;font-size:0.6875rem;color:var(--muted);margin-top:-0.375rem}
.dots{display:flex;justify-content:space-between;align-items:center;margin:0.875rem 0.25rem 0.75rem;position:relative}
.dots::before{content:"";position:absolute;left:0.375rem;right:0.375rem;top:50%;border-top:2px dashed #e2dee9}
.dots i{width:0.9375rem;height:0.9375rem;border-radius:50%;position:relative;z-index:1;display:grid;place-items:center}
.dots i .ms{font-size:0.6875rem;color:#fff}
.dots i:nth-child(1){background:#5cb85c} .dots i:nth-child(2){background:#f7a12b}
.dots i:nth-child(3){background:#9dc44a} .dots i:nth-child(4){background:#e83f7d}
.dots i:nth-child(5){background:#2ba3bd} .dots i:nth-child(6){background:#cfcbd4}
.dots i:nth-child(6) .ms{font-size:0.5625rem;color:#fff}
.ghost{width:100%;padding:0.4375rem;border:1px solid var(--pink);color:var(--pink);background:#fff;border-radius:0.5rem;font-size:0.6875rem;font-family:inherit;cursor:pointer}
.todo{display:flex;align-items:center;gap:0.5625rem;padding:0.6875rem 0;border-bottom:1px solid #f5f3f8}
.todo:last-child{border:0;padding-bottom:0}
.todo .ic{width:1.625rem;height:1.625rem;background:var(--tint);color:var(--pink)}
.todo .ic .ms{font-size:0.9375rem}
.todo .txt{flex:1;min-width:0}
.todo b{display:block;font-size:0.6875rem;font-weight:500}
.todo span{font-size:0.5938rem;color:var(--muted)}
.doc{display:flex;align-items:center;gap:0.5625rem;padding:0.5rem 0}
.doc .ic{width:1.625rem;height:1.625rem;background:var(--c4t);color:#f0475f}
.doc .ic.b{background:var(--c1t);color:var(--c1)}
.doc .ic .ms{font-size:0.9375rem}
.doc b{flex:1;font-size:0.6875rem;font-weight:500}
.doc span{font-size:0.5938rem;color:var(--muted)}

/* ---------- หน้าหลัก : สถิติ + เรียนต่อ ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.875rem;margin-bottom:1rem}
.stat{padding:0.9375rem 1rem;display:flex;gap:0.75rem;align-items:center}
.stat .ic{width:2.375rem;height:2.375rem;border-radius:0.6875rem}
.stat .ic .ms{font-size:1.25rem}
.stat b{display:block;font-size:1.1875rem;font-weight:700;line-height:1.2}
.stat span{font-size:0.6562rem;color:var(--muted)}
.hero{padding:1.375rem;background:linear-gradient(115deg,var(--tint),var(--c1t) 70%,var(--c6t));border:1px solid #f6e5ea;
      border-radius:0.875rem;margin-bottom:1rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.hero .txt{flex:1;min-width:13.75rem}
.hero h2{font-size:1.1875rem;font-weight:700}
.hero p{font-size:0.75rem;color:#6f6672;margin-top:0.25rem}
.hero .go{display:flex;align-items:center;gap:0.875rem;background:#fff;border-radius:0.75rem;padding:0.75rem 1rem}
.hero .go b{font-size:0.7812rem;display:block}
.hero .go span{font-size:0.6562rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}

/* ---------- timeline (เส้นทางการเรียนรู้) ---------- */
.tline{position:relative;padding-left:2.125rem}
.tline::before{content:"";position:absolute;left:0.9375rem;top:0.625rem;bottom:1.625rem;width:2px;background:linear-gradient(180deg,var(--c1s),var(--c2s),var(--c3s),var(--c4s),var(--c5s),var(--c6s))}
.tli{position:relative;margin-bottom:0.875rem}
.tli .knob{position:absolute;left:-2.125rem;top:1rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;color:#fff;border:0.1875rem solid #fff}
.tli .knob .ms{font-size:1rem}
.tli .body{padding:1rem 1.125rem}
.tli .hd{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin-bottom:0.25rem}
.tli h3{font-size:0.9062rem;font-weight:700}
.tli .mm{font-size:0.7188rem;color:var(--muted);margin-bottom:0.75rem}
.subs{display:flex;flex-direction:column;gap:0.4375rem}
.sub2{display:flex;align-items:center;gap:0.5625rem;font-size:0.7188rem;padding:0.4375rem 0.625rem;border-radius:0.5625rem;background:#fbfafc}
.sub2 .no{font-weight:600;font-size:0.6562rem;color:var(--muted);min-width:1.375rem}
.sub2 .who{margin-left:auto;font-size:0.625rem;color:var(--muted);display:flex;align-items:center;gap:0.3125rem}
.sub2 .who .ms{font-size:0.8125rem}

/* ---------- ตารางกิจกรรม ---------- */
.cal thead th{font-size:0.6562rem;color:var(--muted);font-weight:500;padding-bottom:0.5rem}
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal td{height:4.125rem;vertical-align:top;border:1px solid #f5f3f8;padding:0.3125rem}
.cal td .d{font-size:0.6875rem;color:#7d7580}
.cal td.dim .d{color:#d5d0d9}
.cal td.today{background:var(--tint)}
.cal td.today .d{color:var(--pink);font-weight:700}
.ev{display:block;font-size:0.5625rem;border-radius:0.3125rem;padding:2px 0.3125rem;margin-top:0.1875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend{display:flex;gap:0.875rem;flex-wrap:wrap;font-size:0.6562rem;color:var(--muted);margin-top:0.75rem}
.legend i{width:0.5625rem;height:0.5625rem;border-radius:0.1875rem;display:inline-block;margin-right:0.3125rem}
.evrow{display:flex;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid #f5f3f8}
.evrow:last-child{border:0}
.evrow .date{text-align:center;min-width:2.75rem}
.evrow .date b{display:block;font-size:1.0625rem;font-weight:700;color:var(--pink);line-height:1.1}
.evrow .date span{font-size:0.5938rem;color:var(--muted)}
.evrow .txt{flex:1;min-width:0}
.evrow b.tt{display:block;font-size:0.7812rem;font-weight:600}
.evrow .mt{font-size:0.6562rem;color:var(--muted);margin-top:0.1875rem;display:flex;gap:0.75rem;flex-wrap:wrap}
.evrow .mt span{display:flex;align-items:center;gap:0.25rem}
.evrow .mt .ms{font-size:0.8125rem}

/* ---------- ประกาศ ---------- */
.ann{display:flex;gap:0.8125rem;padding:0.9375rem 0;border-bottom:1px solid #f5f3f8}
.ann:last-child{border:0;padding-bottom:0}
.ann .ic{width:2.25rem;height:2.25rem;border-radius:0.625rem}
.ann .ic .ms{font-size:1.1875rem}
.ann .txt{flex:1;min-width:0}
.ann .hd{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.ann b{font-size:0.8125rem;font-weight:600}
.ann p{font-size:0.7188rem;color:#6f6672;margin-top:0.3125rem;line-height:1.6}
.ann .ft{font-size:0.625rem;color:var(--muted);margin-top:0.4375rem;display:flex;gap:0.875rem}
.ann.unread{background:linear-gradient(90deg,var(--tint),transparent 60%);margin:0 -0.5rem;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.5rem}

/* ---------- ชุมชนผู้เรียน ---------- */
.thr{display:flex;gap:0.75rem;padding:0.875rem 0;border-bottom:1px solid #f5f3f8}
.thr>.tagc,.item>.tagc,.evrow>.tagc,.appt>.tagc,.item>.pill,.evrow>.pill{align-self:flex-start}
.thr:last-child{border:0;padding-bottom:0}
.thr .txt{flex:1;min-width:0}
.thr b{font-size:0.7812rem;font-weight:600;display:block}
.thr p{font-size:0.6875rem;color:#6f6672;margin-top:0.25rem;line-height:1.55;
       display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thr .ft{display:flex;gap:0.875rem;font-size:0.625rem;color:var(--muted);margin-top:0.4375rem;flex-wrap:wrap}
/* nowrap กันชื่อคนกับ "11 นาทีที่แล้ว" ถูกหั่นเป็นคนละบรรทัดตอนจอแคบ */
.thr .ft span{display:flex;align-items:center;gap:0.25rem;white-space:nowrap}
.thr .ft .ms{font-size:0.8125rem}
.grp{display:flex;align-items:center;gap:0.625rem;padding:0.5625rem 0}
.grp .txt{flex:1;min-width:0}
.grp b{display:block;font-size:0.7188rem;font-weight:500}
.grp span{font-size:0.5938rem;color:var(--muted)}
.who2{display:flex;align-items:center;gap:0.5625rem;padding:0.4375rem 0}
.who2 .av{width:1.75rem;height:1.75rem;font-size:0.625rem;position:relative}
.who2 .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:0.5rem;height:0.5rem;border-radius:50%;background:#5cb85c;border:2px solid #fff}
.who2.off .av::after{background:#cfcbd4}
.who2 b{font-size:0.7188rem;font-weight:500;flex:1}
.who2 span{font-size:0.5938rem;color:var(--muted)}

/* ---------- ผู้ให้คำปรึกษา ---------- */
.mentors{display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem}
.mcard{padding:1.125rem;text-align:center}
.mcard .av{margin:0 auto 0.6875rem}
.mcard b{display:block;font-size:0.8125rem;font-weight:600}
.mcard .role{font-size:0.6562rem;color:var(--muted);margin-top:2px}
.mcard .org{display:inline-block;margin-top:0.5625rem}
.mcard p{font-size:0.6562rem;color:#6f6672;margin-top:0.625rem;line-height:1.6;min-height:3.125rem}
.mcard .acts{display:flex;gap:0.4375rem;margin-top:0.75rem}
.mcard .acts button{flex:1}
.appt{display:flex;align-items:center;gap:0.6875rem;padding:0.6875rem 0;border-bottom:1px solid #f5f3f8}
.appt:last-child{border:0;padding-bottom:0}
.appt .txt{flex:1;min-width:0}
.appt b{display:block;font-size:0.7188rem;font-weight:500}
.appt span{font-size:0.5938rem;color:var(--muted)}

/* ---------- คลังความรู้ ---------- */
.chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{border:1px solid var(--line);background:#fff;border-radius:1.25rem;padding:0.375rem 0.875rem;font-size:0.6875rem;font-family:inherit;color:#6b6779;cursor:pointer}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:600}
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem}
.file{padding:1rem;display:flex;gap:0.75rem;align-items:flex-start}
.file .ic{width:2.375rem;height:2.375rem;border-radius:0.625rem}
.file .ic .ms{font-size:1.25rem}
.file .txt{flex:1;min-width:0}
.file b{display:block;font-size:0.75rem;font-weight:600;line-height:1.4}
.file .mt{font-size:0.625rem;color:var(--muted);margin-top:0.375rem;display:flex;gap:0.625rem;flex-wrap:wrap}
.file .dl{color:var(--pink);cursor:pointer}

/* ---------- เกียรติบัตร ---------- */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cert{padding:0;overflow:hidden}
.cert .top2{height:7rem;display:grid;place-items:center;position:relative;
            background:linear-gradient(135deg,var(--c3t),var(--tint))}
.cert .top2 .ms{font-size:2.875rem;color:var(--c3)}
.cert.lock .top2{background:#f6f5f8}
.cert.lock .top2 .ms{color:#d5d0d9}
.cert .bd{padding:0.9375rem 1rem}
.cert b{display:block;font-size:0.7812rem;font-weight:600;line-height:1.45}
.cert .mt{font-size:0.6562rem;color:var(--muted);margin-top:0.375rem}
.cert .acts{display:flex;gap:0.4375rem;margin-top:0.75rem}
.cert .acts button{flex:1}
.cert .rib{position:absolute;top:0.625rem;right:0.625rem}

/* ============================================================
   หลังบ้าน (admin) — ใช้ระบบสี/คอมโพเนนต์ชุดเดียวกับหน้าบ้าน
   ต่างแค่ sidebar เป็นโทนเข้ม เพื่อให้แยกออกทันทีว่าอยู่ฝั่งไหน
   ============================================================ */
.side.dark{background:#332b38;border-right-color:#403647}
.side.dark .logo small{color:#9c8e9b}
.side.dark .nav a{color:#b8adb8}
.side.dark .nav a:hover{background:#3f3546}
.side.dark .nav a.on{background:var(--pink);color:#fff;font-weight:600}
.side.dark .nav .grp2{font-size:0.5938rem;color:#7d7180;padding:0.875rem 0.6875rem 0.3125rem;letter-spacing:.4px}
.side.dark .about{background:#3f3546;border-color:#4b4053}
.side.dark .about h4{color:#efe8ee}
.side.dark .about p{color:#a99da9}
.side.dark .about button{background:transparent;border-color:#6d6173;color:#e2d9e1}
.side.dark .about button:hover{background:#4b4053}
.admbadge{display:inline-block;font-size:0.5625rem;letter-spacing:.5px;background:var(--pink);color:#fff;
          padding:2px 0.4375rem;border-radius:0.3125rem;margin-top:0.4375rem}

.tg{background:#f4f2f6;color:#9a94a0}
.scrollx{overflow-x:auto}

/* ตารางข้อมูล */
.tbl{width:100%;border-collapse:collapse;min-width:38.75rem}
.tbl th{text-align:left;font-size:0.6562rem;color:var(--muted);font-weight:500;padding:0 0.625rem 0.5625rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:0.6875rem 0.625rem;border-bottom:1px solid #f5f3f8;font-size:0.7188rem;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#fbfafc}
.tbl b{font-weight:600}
.who3{display:flex;align-items:center;gap:0.5625rem}
.who3 .av{width:1.75rem;height:1.75rem;font-size:0.625rem}
.who3 span{font-size:0.5938rem;color:var(--muted);display:block}
.act{display:flex;gap:0.375rem}
.act .ms{font-size:1rem;color:#a9a2ad;cursor:pointer;padding:0.1875rem;border-radius:0.375rem}
.act .ms:hover{background:var(--tint);color:var(--pink)}

/* ฟอร์ม */
.field{margin-bottom:0.875rem}
.field label{display:block;font-size:0.6875rem;color:#6b6779;margin-bottom:0.3125rem;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:0.5rem 0.6875rem;border:1px solid var(--line);border-radius:0.5rem;
  font-family:inherit;font-size:0.75rem;background:#fff;color:var(--ink);outline:none}
.field textarea{resize:vertical;min-height:4.625rem;line-height:1.6}
.field :focus{border-color:var(--c4s)}
.field .hint{font-size:0.5938rem;color:var(--muted);margin-top:0.25rem}
.rowf{display:flex;gap:0.75rem}.rowf>*{flex:1}

/* สวิตช์ + แถวตั้งค่า */
.sw{width:2.25rem;height:1.25rem;border-radius:1.25rem;background:#ddd8e2;position:relative;flex:none;cursor:pointer;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:var(--pink)}.sw.on::after{left:1.125rem}
.setrow{display:flex;align-items:center;gap:0.75rem;padding:0.8125rem 0;border-bottom:1px solid #f5f3f8}
.setrow:last-child{border:0;padding-bottom:0}
.setrow .txt{flex:1;min-width:0}
.setrow b{display:block;font-size:0.7188rem;font-weight:500}
.setrow span{font-size:0.5938rem;color:var(--muted)}

@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .mentors,.files,.certs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){.grid,.two{grid-template-columns:1fr}.mod{grid-template-columns:1fr}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  /* sidebar เลื่อนเข้า-ออก แทนการซ่อนทิ้ง */
  .side{position:fixed;top:0;left:-14.5rem;width:13.25rem;z-index:50;transition:left .22s ease;
        box-shadow:0 0 1.5rem rgba(55,41,47,.12)}
  body.navopen .side{left:0}
  body.navopen .scrim{display:block;position:fixed;inset:0;z-index:40;background:rgba(55,41,47,.35)}
  .burger{display:grid}
  .main{padding:0.875rem 1rem 2.5rem}
  .steps{grid-template-columns:repeat(3,1fr);gap:1.125rem}.step::after{display:none}
  .flow{flex-wrap:wrap}.arr{display:none}
  .mentors,.files,.certs,.stats{grid-template-columns:1fr}
  .cal td{height:auto;min-height:3.25rem}
}

/* แจ้งเตือนสั้น ๆ สำหรับปุ่มที่ยังไม่เชื่อมระบบจริง */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(1rem);
  background:var(--ink);color:#fff;font-size:0.75rem;padding:0.5rem 1.125rem;border-radius:1.25rem;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:100;
  box-shadow:0 0.25rem 1rem rgba(55,41,47,.25);max-width:80vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* หลังบ้านพื้นเข้ม : ยกความสว่างลิงก์ข้ามฝั่งให้ผ่านเกณฑ์อ่านง่าย
   และ hover ใช้โทนเข้มแทนชมพูอ่อน ซึ่งขัดกับแถบดำ */
.side.dark .nav a.xlink{color:#b0a6b2}
.side.dark .nav a.xlink:hover{background:#3f3546;color:#fff}
.side.dark .nav a.xlink:hover .ext{border-color:#7a6c80;color:#fff}

/* ---------- ตัวเลือกข้อสอบ ก ข ค ง จ ---------- */
.choice{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.75rem;line-height:1.65;
  background:#fbfafc;border:1px solid var(--line);padding:0.625rem 0.75rem;border-radius:0.5rem;cursor:pointer;
  transition:background .12s,border-color .12s}
.choice:hover{background:var(--tint);border-color:var(--c4s)}
.choice input{margin-top:0.2rem;accent-color:var(--pink);flex:none}
.choice .ch-key{font-weight:700;color:var(--pink);min-width:1.125rem;flex:none}
.choice:has(input:checked){background:var(--tint);border-color:var(--pink)}
.choice:has(input:checked) .ch-txt{font-weight:500}

/* ---------- ไลฟ์แชท ---------- */
.chatwrap{display:grid;grid-template-columns:15rem 1fr;gap:1rem;align-items:start}
.chatside{display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem}
.croom{display:flex;align-items:center;gap:0.5rem;font-size:0.7188rem;padding:0.4375rem 0.625rem;
  border-radius:0.5rem;color:#6b6779;margin-bottom:0.125rem}
.croom .ms{font-size:0.9375rem;color:#b6b2c2}
.croom:hover{background:#fbfafc}
.croom.on{background:var(--tint);color:var(--pink);font-weight:600}
.croom.on .ms{color:var(--pink)}

.chatmain{display:flex;flex-direction:column;height:calc(100vh - 9rem);min-height:26rem}
.chathead{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1.125rem;border-bottom:1px solid var(--line)}
.chathead b{font-size:0.8125rem;font-weight:700;flex:1;min-width:0}
.chathead span{font-size:0.625rem;color:var(--muted);white-space:nowrap}
.chathead span.ok{color:#5cb85c}
.chathead span.bad{color:var(--red)}

.chatlog{flex:1;overflow-y:auto;padding:1.125rem;display:flex;flex-direction:column;gap:0.75rem}
.cmsg{display:flex;gap:0.5rem;align-items:flex-end;max-width:78%}
.cmsg.me{margin-left:auto;flex-direction:row-reverse}
.cmsg .av{width:1.75rem;height:1.75rem;font-size:0.625rem}
.cmsg .bub{background:#f6f4f8;border-radius:0.875rem 0.875rem 0.875rem 0.25rem;padding:0.5rem 0.75rem;min-width:0}
.cmsg.me .bub{background:var(--pink);color:#fff;border-radius:0.875rem 0.875rem 0.25rem 0.875rem}
.cmsg .bub i{display:block;font-style:normal;font-size:0.625rem;font-weight:600;color:var(--pink);margin-bottom:0.1875rem}
.cmsg .bub p{font-size:0.75rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.cmsg .bub time{display:block;font-size:0.5625rem;color:var(--muted);margin-top:0.25rem}
.cmsg.me .bub time{color:rgba(255,255,255,.75)}

.chatbox{display:flex;gap:0.625rem;padding:0.875rem 1.125rem;border-top:1px solid var(--line)}
.chatbox input{flex:1;min-width:0;padding:0.5625rem 0.875rem;border:1px solid var(--line);border-radius:1.25rem;
  font-family:inherit;font-size:0.75rem;background:#fff;color:var(--ink);outline:none}
.chatbox input:focus{border-color:var(--c4s)}
.chatbox input:disabled{background:#fbfafc;color:var(--muted)}

@media (max-width:820px){
  /* มือถือ: ห้องกลายเป็นแถบเลื่อนแนวนอนด้านบน ช่องแชทขึ้นก่อน
     รายชื่อออนไลน์ลงไปล่างสุด — ไม่งั้นต้องเลื่อนผ่านรายชื่อห้องทั้งหมดกว่าจะเจอช่องพิมพ์ */
  .chatwrap{grid-template-columns:1fr}
  .chatside{display:contents}
  .chatrooms{order:1;padding:0.5rem;overflow-x:auto}
  .chatrooms h5{display:none}
  .croomlist{display:flex;gap:0.375rem}
  .croom{white-space:nowrap;margin-bottom:0;border:1px solid var(--line);border-radius:1.25rem;padding:0.375rem 0.75rem}
  .croom.on{border-color:var(--pink)}
  .chatmain{order:2;height:calc(100vh - 17rem);min-height:22rem}
  .chatonline{order:3}
  .cmsg{max-width:88%}
}

/* ---------- การ์ด "เรียนต่อ" หน้าแรก ---------- */
.resume{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  background:linear-gradient(115deg,var(--tint),#eef4fb 70%,#f3f7ee);
  border:1px solid var(--line);border-radius:0.875rem;padding:1.5rem 1.75rem;margin-bottom:1rem}
.rs-hi{font-size:0.6875rem;color:var(--muted)}
.rs-txt h2{font-size:1.125rem;font-weight:700;margin:0.1875rem 0 0.25rem}
.rs-txt p{font-size:0.8125rem;color:#5c5869;line-height:1.6}
.rs-bar{height:0.375rem;border-radius:0.375rem;background:#fff;overflow:hidden;margin-top:0.875rem;max-width:22rem}
.rs-bar i{display:block;height:100%;border-radius:0.375rem;background:linear-gradient(90deg,var(--c4s),var(--pink))}
.rs-pct{display:block;font-size:0.625rem;color:var(--muted);margin-top:0.3125rem}
.rs-go{display:inline-flex;align-items:center;gap:0.375rem;margin-top:1.125rem;padding:0.625rem 1.375rem;font-size:0.8125rem}
.rs-go .ms{font-size:1rem}
.rs-ring{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.rs-ring>span{font-size:0.625rem;color:var(--muted)}

.stats3{grid-template-columns:repeat(3,1fr)}
.stat{transition:border-color .12s,transform .12s}
a.stat:hover{border-color:var(--c4s);transform:translateY(-1px)}

/* ---------- แถบ "ไปต่อ" ใต้คลิป ---------- */
.nextup{display:flex;align-items:center;gap:0.875rem;margin-top:1.125rem;padding:0.9375rem 1.125rem;
  background:#fff;border:1px solid var(--line);border-radius:0.875rem;transition:border-color .12s,box-shadow .12s}
.nextup:hover{border-color:var(--pink)}
.nextup.on{border-color:var(--pink);box-shadow:0 0 0 3px var(--tint)}
.nextup.muted{background:#fbfafc}
.nextup.muted:hover{border-color:var(--line)}
.nu-ic{width:2.375rem;height:2.375rem;border-radius:0.625rem;flex:none;display:grid;place-items:center;
  background:var(--tint);color:var(--pink)}
.nextup.muted .nu-ic{background:#f2f0f5;color:#9a94a0}
.nextup.muted .nu-arr{color:#c3bec8}
.nu-ic .ms{font-size:1.25rem}
.nu-txt{flex:1;min-width:0}
.nu-txt span{display:block;font-size:0.625rem;color:var(--muted)}
.nu-txt b{font-size:0.8125rem;font-weight:600;line-height:1.5}
.nu-arr{color:var(--pink);flex:none}

@media (max-width:820px){
  .resume{grid-template-columns:1fr;gap:1.25rem;padding:1.25rem}
  .rs-ring{flex-direction:row;justify-content:flex-start;gap:0.875rem;text-align:left}
  .rs-ring .dots{margin-left:auto}
  .rs-go{width:100%;justify-content:center;padding:0.75rem 1.375rem}
  .stats3{grid-template-columns:1fr}
}

/* ---------- ปุ่มตาดูรหัสผ่าน ---------- */
.pwbox{position:relative}
.pwbox input{padding-right:2.5rem}
.pweye{position:absolute;right:0.25rem;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;color:var(--muted);padding:0.375rem;display:grid;place-items:center;border-radius:0.375rem}
.pweye:hover{color:var(--pink)}
.pweye .ms{font-size:1.125rem}

/* ---------- เตือนขนาดไฟล์คลิป ---------- */
.datawarn{display:flex;align-items:flex-start;gap:0.375rem;margin-top:0.625rem;font-size:0.6875rem;
  background:#fbfafc;color:#6f6672;padding:0.5rem 0.75rem;border-radius:0.5rem;line-height:1.6}
.datawarn b{font-weight:600}
.datawarn.big{background:var(--c3t);color:#9a7420}
.datawarn .ms{font-size:0.9375rem;flex:none}

/* ---------- แถวเอกสารประกอบ ---------- */
.docrow{display:flex;align-items:center;gap:0.75rem;padding:0.6875rem 0;border-bottom:1px solid #f5f3f8}
.docrow:last-of-type{border-bottom:0}
.doc-ic{width:2.125rem;height:2.125rem;border-radius:0.5rem;flex:none;display:grid;place-items:center;
  background:var(--c4t);color:var(--c4)}
.doc-ic .ms{font-size:1.125rem}
.doc-txt{flex:1;min-width:0}
.doc-txt b{display:block;font-size:0.75rem;font-weight:600}
.doc-txt span{font-size:0.625rem;color:var(--muted)}
.doc-arr{color:var(--pink);flex:none}
a.docrow:hover .doc-txt b{color:var(--pink)}

/* ---------- ป้ายนับงานค้างบนเมนูหลังบ้าน ---------- */
.nav a .badge{margin-left:auto;background:var(--pink);color:#fff;font-size:0.5938rem;font-weight:600;
  min-width:1.125rem;height:1.125rem;padding:0 0.3125rem;border-radius:1rem;display:grid;place-items:center}

/* แถบบนหน้าผู้เรียน — ชื่อผู้ใช้กดไปหน้าโปรไฟล์ได้ */
a.me{cursor:pointer}
a.me:hover b{color:var(--pink)}

/* ---------- ฟอร์มความยินยอม (PDPA) ---------- */
.req{color:var(--pink)}
.consentbox{background:#fbfafc;border:1px solid var(--line);border-radius:0.5rem;padding:0.875rem;margin-bottom:1rem}
.consent{display:flex;gap:0.5625rem;align-items:flex-start;font-size:0.6875rem;line-height:1.7;
  color:#5c5869;cursor:pointer;padding:0.375rem 0}
.consent + .consent{border-top:1px solid var(--line);margin-top:0.375rem;padding-top:0.75rem}
.consent input{margin-top:0.2rem;accent-color:var(--pink);flex:none;width:0.9375rem;height:0.9375rem}
.consent a{color:var(--pink);text-decoration:underline}

/* ---------- เอกสารยาว เช่น ประกาศความเป็นส่วนตัว (ชื่อ .docpage อย่าใช้ .doc ซ้ำกับคอมโพเนนต์แถวไอคอนด้านบน) ---------- */
.docpage h1{font-size:1.25rem;font-weight:700;line-height:1.5}
.docpage h2{font-size:0.9375rem;font-weight:700;margin:1.75rem 0 0.625rem;padding-top:1rem;border-top:1px solid var(--line)}
.docpage h2:first-of-type{border-top:0;padding-top:0}
.docpage p,.docpage li{font-size:0.8125rem;line-height:1.9;color:#4a444f}
.docpage p{margin-bottom:0.75rem}
.docpage ol,.docpage ul{margin:0 0 0.75rem 1.25rem}
.docpage li{margin-bottom:0.375rem}
.docpage .meta{font-size:0.6875rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem}
.docpage .lead{background:var(--tint);border-radius:0.5rem;padding:0.875rem 1rem;font-size:0.75rem}
.docpage .strong{background:#f2f6ef;border-left:3px solid var(--c2);padding:0.75rem 1rem;border-radius:0 0.5rem 0.5rem 0}
.docpage .ref{font-size:0.6562rem;color:var(--muted)}
/* ตารางในเอกสารต้องยอมหดตามจอ ไม่งั้นบนมือถือจะดันหน้าให้เลื่อนซ้ายขวา */
.docpage .tbl{margin-bottom:1rem;min-width:0}
.docpage .tbl td,.docpage .tbl th{font-size:0.75rem;line-height:1.7;vertical-align:top;white-space:normal}
.docpage .note{background:#fbfafc;border:1px solid var(--line);border-radius:0.5rem;padding:0.875rem 1rem;
  font-size:0.75rem;line-height:1.85;margin-bottom:1rem}
.docpage .note.ok{background:#f2f6ef;border-color:var(--c2s)}

/* ---------- ตัวช่วยอธิบายข้าง label (แตะ/โฟกัสก็ขึ้น ไม่ใช่แค่เอาเมาส์ชี้) ---------- */
.tip{display:inline-flex;align-items:center;justify-content:center;width:0.9375rem;height:0.9375rem;
  margin-left:0.25rem;border-radius:50%;background:var(--tint);color:var(--pink);
  font-size:0.5625rem;font-weight:700;cursor:help;position:relative;vertical-align:middle}
.tip:hover,.tip:focus{background:var(--pink);color:#fff;outline:none}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 0.375rem);left:50%;
  transform:translateX(-50%);white-space:pre;background:#2f2a38;color:#fff;font-weight:400;
  font-size:0.625rem;line-height:1.7;padding:0.5rem 0.625rem;border-radius:0.375rem;
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:20;
  box-shadow:0 4px 14px rgba(0,0,0,.18);text-align:left}
.tip:hover::after,.tip:focus::after{opacity:1;visibility:visible}

/* ============================================================
   แถบโลโก้ผู้สนับสนุน — หน้าล็อกอินและหน้าแรกของผู้เรียน
   ไฟล์โลโก้พื้นขาว จึงต้องวางบนพื้นขาวเสมอ ห้ามวางทับพื้นสี
   ============================================================ */
.funders{
  background:#fff;border:1px solid var(--line);border-radius:0.75rem;
  padding:0.875rem 1rem;text-align:center;
}
.funders img{width:100%;max-width:34rem;height:auto;display:block;margin:0 auto}
.fd-note{
  display:block;font-size:0.625rem;color:var(--muted);
  letter-spacing:.2px;margin-bottom:0.5rem;
}
@media (max-width:480px){
  .funders{padding:0.75rem}
  .funders img{max-width:100%}
}

/* ============================================================
   คำโปรยโครงการ — ถอดจากแบนเนอร์มาเป็นตัวหนังสือ
   เส้นคั่นบาง ๆ แยกจากชื่อโครงการ แล้วไล่น้ำหนักลงมา
   บรรทัดอธิบายเบา ประโยคเน้นหนักและใหญ่กว่า
   ============================================================ */
.slogan{
  margin:0.875rem 0 0;padding-top:0.875rem;
  border-top:1px solid var(--line);text-align:center;
}
.sl-line{
  font-size:0.6875rem;line-height:1.75;color:#6f6672;
  margin:0;text-wrap:balance;
}
.sl-quote{
  font-size:0.8125rem;line-height:1.6;font-weight:700;
  color:var(--ink);margin:0.5rem 0 0;text-wrap:balance;
}
/* เครื่องหมายคำพูดเป็นสีแบรนด์ ตัวใหญ่ ลอยออกมาจากข้อความเล็กน้อย */
.sl-quote span{position:relative;padding:0 0.75rem}
.sl-quote span::before,
.sl-quote span::after{
  position:absolute;top:-0.15em;font-size:1.5em;font-weight:400;
  color:var(--pink);opacity:.55;line-height:1;
}
.sl-quote span::before{content:"\201C";left:-0.1rem}
.sl-quote span::after{content:"\201D";right:-0.1rem}