:root{
      --blue:#1A73E8;
      --blue-700:#1557B0;
      --ink:#0B1220;
      --text:#1F2937;
      --muted:#6B7280;
      --bg:#F6F8FC;
      --card:#FFFFFF;
      --border: rgba(15,23,42,.10);
      --shadow: 0 10px 30px rgba(2,6,23,.08);
      --shadow-soft: 0 8px 20px rgba(2,6,23,.06);
      --r16:16px;
      --r24:24px;
      --max:1180px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:"Prompt", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 15% 0%, rgba(26,115,232,.14), transparent 58%),
        radial-gradient(900px 520px at 85% 10%, rgba(26,115,232,.11), transparent 55%),
        var(--bg);
    }
    a{ color:inherit; text-decoration:none; }
    .container{ width:min(var(--max), calc(100% - 32px)); margin:0 auto; }
    .icon{
      font-family:"Material Symbols Rounded";
      font-variation-settings:'FILL' 0, 'wght' 520, 'GRAD' 0, 'opsz' 24;
      font-size: 18px; line-height: 1;
    }

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(160%) blur(10px);
      background: rgba(246,248,252,.76);
      border-bottom:1px solid rgba(15,23,42,.08);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 0;
      gap: 12px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      padding: 8px 10px;
      border-radius: 999px;
    }
    .logo{
      width:38px; height:38px; border-radius: 14px;
      background: linear-gradient(145deg, #2563eb 0%, #1557b0 100%);
      box-shadow: 0 10px 18px rgba(26,115,232,.25);
      display:grid; place-items:center;
      color:white; font-weight:900;
      letter-spacing:-0.03em;
      font-size:18px;
      position: relative;
      overflow: hidden;
    }
    /* auto_awesome เล็กมุมขวาบน — ใช้ร่วมกับ hero */
    .logo .logo-ai {
      position: absolute;
      top: 8px;
      right: 6px;
      font-size: 10px;
      color: rgba(255,255,255,.90);
      line-height: 1;
      font-family: 'Material Symbols Rounded', 'Material Icons';
      font-variation-settings: 'FILL' 1;
      animation: aiGlow 2.5s ease-in-out infinite;
    }
    @keyframes aiGlow {
      0%,100% { opacity: 0.90; transform: scale(1);    }
      50%      { opacity: 1;    transform: scale(1.15); }
    }
    .brand .t{ display:flex; flex-direction:column; line-height:1.1; }
    .brand .t strong{ font-size: 15px; color: var(--ink); }
    .brand .t span{ font-size: 12px; color: var(--muted); }

    .navlinks{ display:flex; gap:10px; align-items:center; }
    .navlinks a{
      font-size:13px;
      padding: 8px 10px;
      border-radius: 999px;
      color: rgba(31,41,55,.92);
    }
    .navlinks a:hover{ background: rgba(26,115,232,.08); color: var(--ink); }

    .btn{
      border:1px solid rgba(26,115,232,.16);
      background: rgba(26,115,232,.08);
      color: var(--blue-700);
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 13px;
      display:inline-flex; align-items:center; gap:8px;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); background: rgba(26,115,232,.12); }
    .btn.primary{
      background: var(--blue);
      color:white;
      border-color: rgba(26,115,232,.55);
      box-shadow: 0 14px 26px rgba(26,115,232,.22);
    }
    .btn.primary:hover{ background:#1767CF; }
    .actions{ display:flex; align-items:center; gap:10px; }

    /* Hero */
    .hero{ padding: 34px 0 18px; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 16px;
      align-items: stretch;
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border:1px solid rgba(26,115,232,.18);
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 24px rgba(2,6,23,.06);
      color: rgba(31,41,55,.92);
      font-size: 13px;
      width: fit-content;
    }
    h1{
      margin: 12px 0 10px;
      font-size: clamp(26px, 3.6vw, 44px);
      line-height: 1.08;
      letter-spacing: -.2px;
      color: var(--ink);
    }
    .lead{
      margin: 0 0 14px;
      color: rgba(31,41,55,.84);
      font-size: clamp(14px, 1.6vw, 17px);
      line-height: 1.7;
      max-width: 70ch;
    }
    .hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin: 14px 0 0; }

    .card{
      background: rgba(255,255,255,.86);
      border:1px solid rgba(15,23,42,.10);
      border-radius: var(--r24);
      box-shadow: var(--shadow);
    }
    .side{
      padding: 14px;
      position: relative;
      overflow:hidden;
    }
    .side::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(520px 320px at 20% 12%, rgba(26,115,232,.18), transparent 55%),
        radial-gradient(520px 320px at 85% 10%, rgba(26,115,232,.12), transparent 55%);
      opacity:.95;
      pointer-events:none;
    }
    .side > *{ position:relative; z-index:1; }

    .statgrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .stat{
      border-radius: 18px;
      background: rgba(255,255,255,.9);
      border:1px solid rgba(15,23,42,.10);
      box-shadow: 0 10px 24px rgba(2,6,23,.06);
      padding: 12px;
    }
    .stat .k{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
    .stat .v{ margin-top:6px; font-weight:800; color:var(--ink); }
    .progress{ height:10px; background: rgba(15,23,42,.08); border-radius:999px; overflow:hidden; margin-top:10px; }
    .progress > i{ display:block; height:100%; width:68%; background: linear-gradient(90deg, var(--blue), rgba(26,115,232,.55)); border-radius:999px; }

    /* Layout sections */
    section{ padding: 18px 0; }
    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: 12px;
      margin: 14px 0 12px;
    }
    .section-title h2{
      margin:0; color:var(--ink);
      font-size: 20px;
      letter-spacing:-.1px;
    }
    .section-title p{ margin:0; color:var(--muted); font-size: 13px; max-width: 70ch; }

    /* Course overview cards */
    .overview{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .panel{
      padding: 14px;
      border-radius: var(--r24);
      background: rgba(255,255,255,.86);
      border:1px solid rgba(15,23,42,.10);
      box-shadow: 0 12px 26px rgba(2,6,23,.06);
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.75);
      color: rgba(31,41,55,.86);
      font-size: 13px;
    }
    .panel .row{
      display:flex; justify-content:space-between; gap: 10px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(15,23,42,.12);
      color: var(--muted);
      font-size: 13px;
    }

    /* Accordion topics */
    /* Subject grouping */
    .subject-block{ margin-top: 18px; }
    .subject-head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:12px;
      padding: 6px 4px 10px;
    }
    .subject-head h3{
      margin:0;
      font-size: 18px;
      letter-spacing:.2px;
      color: var(--ink);
    }
    .subject-head p{
      margin:4px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    .accordion{ display:flex; flex-direction:column; gap: 12px; }
    details.topic{
      border-radius: var(--r24);
      background: rgba(255,255,255,.86);
      border:1px solid rgba(15,23,42,.10);
      box-shadow: 0 12px 26px rgba(2,6,23,.06);
      /* overflow:hidden ทำให้ 3D transform ของ flashcard ไม่ทำงานใน Safari/Chrome */
      overflow: clip;
    }
    summary.topic-head{
      cursor:pointer;
      list-style:none;
      padding: 14px 14px;
      display:flex; align-items:center; justify-content:space-between;
      gap: 10px;
      user-select:none;
    }
    summary.topic-head::-webkit-details-marker{ display:none; }
    .head-left{ display:flex; align-items:center; gap: 10px; }
    .topic-ic{
      width: 42px; height: 42px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: rgba(26,115,232,.10);
      color: var(--blue-700);
      border:1px solid rgba(26,115,232,.18);
      flex: 0 0 42px;
    }
    .topic-title{
      display:flex; flex-direction:column; line-height:1.2;
    }
    .topic-title b{ color:var(--ink); font-size: 14px; }
    .topic-title span{ color:var(--muted); font-size: 12.5px; }
    .chev{
      width: 34px; height: 34px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(15,23,42,.06);
      border:1px solid rgba(15,23,42,.10);
      color: rgba(31,41,55,.86);
      transition: transform .2s ease;
      flex: 0 0 34px;
    }
    details[open] .chev{ transform: rotate(180deg); }

    .topic-body{ padding: 0 14px 14px; border-top: 1px solid rgba(15,23,42,.08); }
    .tabs{ display:flex; flex-wrap:wrap; gap: 8px; padding: 12px 0 10px; }
    .tab{
      border-radius: 999px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.72);
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(31,41,55,.9);
      display:inline-flex; align-items:center; gap:8px;
      cursor:pointer;
      user-select:none;
    }
    .tab.active{
      background: rgba(26,115,232,.12);
      border-color: rgba(26,115,232,.22);
      color: var(--blue-700);
    }

    .tabpanes{ margin-top: 4px; }
    .pane{ display:none; }
    .pane.active{ display:block; }

    /* Lesson styles */
    .lesson{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 12px;
      align-items:start;
    }
    .lesson-card{
      background: rgba(255,255,255,.86);
      border:1px solid rgba(15,23,42,.10);
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 10px 24px rgba(2,6,23,.05);
    }
    .lesson-card h3{ margin:0 0 6px; color:var(--ink); font-size: 15px; }
    .lesson-card p{ margin: 0 0 10px; color: rgba(31,41,55,.86); line-height:1.75; font-size: 13.5px; }
    .callout{
      border-radius: 16px;
      border: 1px solid rgba(26,115,232,.18);
      background: rgba(26,115,232,.07);
      padding: 10px 12px;
      color: rgba(31,41,55,.86);
      font-size: 13px;
      line-height:1.7;
    }
    .callout b{ color: var(--blue-700); }

    .imgph{
      border-radius: 18px;
      border:1px dashed rgba(15,23,42,.18);
      background:
        radial-gradient(280px 160px at 25% 30%, rgba(26,115,232,.14), transparent 55%),
        rgba(255,255,255,.70);
      padding: 12px;
      box-shadow: 0 10px 24px rgba(2,6,23,.04);
    }
    .imgph .cap{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      color: var(--muted);
      font-size: 12.5px;
      margin-bottom: 10px;
    }
    .imgph .frame{
      border-radius: 16px;
      height: 160px;
      border:1px solid rgba(15,23,42,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
      display:grid; place-items:center;
      color: rgba(31,41,55,.75);
      font-weight: 700;
      text-align:center;
      padding: 12px;
      line-height:1.4;
    }

    /* Quiz */
    .quiz{
      display:flex; flex-direction:column; gap: 10px;
    }
    .q{
      border-radius: 18px;
      background: rgba(255,255,255,.86);
      border:1px solid rgba(15,23,42,.10);
      padding: 12px;
      box-shadow: 0 10px 24px rgba(2,6,23,.04);
      font-size: 13px;
    }
    .q .qhead{
      display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
      margin-bottom: 8px;
      font-size: 14px;
      line-height: 1.45;
    }
    .q b{ color: var(--ink); font-size: 14px; font-weight: 600; }
    .opts{ display:grid; gap: 8px; margin-top: 8px; }
    label.opt{
      display:flex; gap: 10px; align-items:flex-start;
      padding: 8px 10px;
      border-radius: 14px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.75);
      cursor:pointer;
      transition: transform .12s ease, background .12s ease;
      font-size: 13px;
    }
    label.opt:hover{ transform: translateY(-1px); background: rgba(26,115,232,.06); }
    .opt input{ margin-top: 2px; }
    .hint{
      margin-top: 10px;
      border-radius: 14px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(15,23,42,.05);
      padding: 10px 10px;
      color: rgba(31,41,55,.86);
      font-size: 13px;
      line-height:1.65;
      display:none;
    }
    .hint.ok{
      border-color: rgba(26,115,232,.22);
      background: rgba(26,115,232,.08);
    }
    .hint.bad{
      border-color: rgba(239,68,68,.22);
      background: rgba(239,68,68,.07);
    }
    .quiz-actions{
      display:flex; flex-wrap:wrap; gap: 10px;
      margin-top: 8px;
    }

    /* Flashcards */
    .cards{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }
    .fcard{
      perspective: 900px;
      height: 160px;     /* ต้องมี height จริง → .face absolute inset:0 จึงมีขนาด */
    }
    .flip{
      position:relative;
      width:100%;
      height:100%;       /* รับ height จาก .fcard */
      border-radius: 18px;
      transform-style: preserve-3d;
      transition: transform .5s ease;
      cursor:pointer;
      box-shadow: 0 10px 24px rgba(2,6,23,.05);
    }
    .flip.is-flipped{ transform: rotateY(180deg); }
    .face{
      position:absolute; inset:0;
      border-radius: 18px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.86);
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      padding: 12px;
      display:flex; flex-direction:column; justify-content:space-between;
      gap: 8px;
    }
    .face.back{
      transform: rotateY(180deg);
      background: rgba(26,115,232,.08);
      border-color: rgba(26,115,232,.18);
    }
    .fc-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; color: var(--muted); font-size: 12.5px; }
    .fc-q{ font-weight: 800; color: var(--ink); font-size: 13px; line-height:1.35; }
    .fc-a{ color: rgba(31,41,55,.88); font-size: 13px; line-height:1.55; }

    /* Footer */
    footer{ padding: 26px 0 40px; color: rgba(31,41,55,.8); }
    .foot{
      border-top:1px solid rgba(15,23,42,.10);
      margin-top: 18px; padding-top: 16px;
      display:flex; flex-wrap:wrap;
      align-items:center; justify-content:space-between;
      gap: 10px;
      font-size: 13px;
    }
    .foot .links{ display:flex; flex-wrap:wrap; gap: 12px; }
    .foot .links a{ color: rgba(31,41,55,.8); }
    .foot .links a:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

    /* กรอปภาพ */
    .lesson-img{
        width:100%;
        border-radius:18px;
        box-shadow:0 8px 24px rgba(0,0,0,0.08);
        display:block;
      }
      .lesson-img.zoomable{
        cursor: zoom-in;
        transition: transform .15s ease, box-shadow .15s ease;
      }
      .lesson-img.zoomable:hover{
        transform: translateY(-1px);
        box-shadow:0 12px 30px rgba(0,0,0,0.10);
      }

      /* Image lightbox / modal */
      /* ===== Modal Overlay ธีมเดียวกับเว็บ ===== */
.img-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* พื้นหลังโทนเดียวกับเว็บ */
  background: rgba(26,115,232,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}

.img-modal.open {
  display: flex;
}

/* ===== Card แบบเดียวกับ lesson-card ===== */
.modal-card{
  background:#fff;
  border-radius:24px;
  padding:18px;
  width:min(980px, 94vw);
  max-height:92vh;

  /* สำคัญ: ปิดสกรอลล์ของกล่อง */
  overflow:hidden;

  display:flex;
  flex-direction:column;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06);
}

/* ===== ภาพ ===== */
.modal-card img{
  width:100%;
  max-height:calc(92vh - 56px); /* 56px เผื่อพื้นที่ปุ่มปิด/หัวบน */
  object-fit:contain;
  border-radius:16px;
  display:block;
}

/* ===== Header บน popup ===== */
.modal-top {
  display: flex;
  justify-content: flex-end;
}

/* ===== ปุ่มปิด ใช้สีเดียวกับเว็บ ===== */
.modal-btn {
  background: var(--blue-700);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 6px 16px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: 0.2s;
}

.modal-btn:hover {
  background: var(--blue-800);
  transform: translateY(-1px);
}

/* ===== Animation ===== */
@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Payment / Plans */
.section{ padding:28px 0; }
.section-title h2{ margin:0; font-size:22px; letter-spacing:-.2px; }
.section-title .muted{ margin-top:8px; color:var(--muted); }

.plans{
  margin-top:14px;
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){
  .plans{ grid-template-columns: 1fr; }
}

.plan-card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.plan-card.recommended{
  border-color: rgba(26,115,232,.35);
  box-shadow: 0 16px 40px rgba(26,115,232,.16);
  transform: translateY(-2px);
}

.ribbon{
  position:absolute;
  top:12px; right:12px;
  background: rgba(26,115,232,.10);
  color: var(--blue-700);
  border:1px solid rgba(26,115,232,.25);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  display:flex; align-items:center; gap:6px;
}

.plan-top{ padding:2px 2px 10px; }
.plan-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.04);
  color: var(--ink);
  border:1px solid var(--line);
}
.plan-badge.hot{
  background: rgba(26,115,232,.10);
  border-color: rgba(26,115,232,.25);
  color: var(--blue-700);
}

.plan-name{ margin:10px 0 6px; font-size:18px; }
.plan-price{ display:flex; align-items:baseline; gap:8px; }
.plan-price .price{ font-size:34px; font-weight:900; letter-spacing:-.6px; color:var(--ink); }
.plan-price .per{ color:var(--muted); font-size:13px; }
.plan-sub{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.6; }

.plan-features{
  margin:12px 0 14px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.plan-features li{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--ink);
  font-size:14px;
}
.plan-features .icon.ok{ color: var(--blue-700); font-variation-settings:"FILL" 1; }

.plan-actions{ display:grid; gap:10px; margin-top:auto; }
.w100{ width:100%; }

.btn.ghost{
  background:transparent;
  border:1px solid var(--line);
}
.btn.ghost:hover{ background:rgba(0,0,0,.03); }

.paynote{
  margin-top:14px;
  padding:16px;
}
.paynote-grid{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.paynote-title{
  display:flex; align-items:center; gap:8px;
  font-weight:900; margin-bottom:6px;
}
.paynote-cta{ display:flex; gap:10px; flex-wrap:wrap; }


.google-btn{
  background:#fff;
  color:#202124;
  border:1px solid #dadce0;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}

.google-btn:hover{
  background:#f8f9fa;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

.google-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}


    /* ══════════════════════════════════════════
       TOPBAR — Desktop base styles (≥981px)
       ══════════════════════════════════════════ */
    .user-bar{
      display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0;
    }
    .course-pill{
      background:rgba(26,115,232,.10);
      color:rgba(26,115,232,.95);
      border:1px solid rgba(26,115,232,.18);
      white-space:nowrap; flex-shrink:0;
      max-width:180px; overflow:hidden; text-overflow:ellipsis;
    }
    .user-chip{
      display:flex; align-items:center; gap:8px;
      padding:5px 10px 5px 5px;
      border:1px solid rgba(15,23,42,.10);
      border-radius:999px;
      background:#fff; flex-shrink:0;
    }
    .user-avatar{
      width:30px; height:30px; flex-shrink:0;
      border-radius:50%; object-fit:cover;
      border:1px solid rgba(15,23,42,.10); display:block;
    }
    .user-avatar-fallback{
      width:30px; height:30px; flex-shrink:0;
      border-radius:50%;
      display:grid; place-items:center;
      background:rgba(26,115,232,.10);
      color:rgba(26,115,232,.95);
      font-weight:800; font-size:14px;
    }
    .user-info{ line-height:1.1; min-width:0; }
    .user-name{ font-size:13px; font-weight:800; white-space:nowrap; }
    .user-email{ font-size:11.5px; color:rgba(31,41,55,.62); white-space:nowrap; }

    /* Hamburger + drawer — ซ่อนบน desktop */
    .hamburger{ display:none; }
    .mobile-menu{ display:none !important; }

    /* ══════════════════════════════════════════
       Tablet/Mobile ≤980px
       ══════════════════════════════════════════ */
    @media (max-width: 1040px){
      .hero-grid{ grid-template-columns: 1fr; }
      .overview{ grid-template-columns: 1fr; }
    }
    @media (max-width: 980px){
      .navlinks{ display:none; }
      .hamburger{
        display:flex;
        flex-direction:column; justify-content:center; align-items:center; gap:5px;
        width:40px; height:40px; flex-shrink:0;
        border:1px solid rgba(15,23,42,.10);
        border-radius:14px;
        background:rgba(255,255,255,.8);
        cursor:pointer; padding:0;
      }
      .hamburger span{
        display:block; width:18px; height:2px;
        background:var(--ink); border-radius:2px;
        transition: transform .22s ease, opacity .22s ease;
      }
      .hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
      .hamburger.open span:nth-child(2){ opacity:0; }
      .hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

      .mobile-menu{
        display:none !important;
        border-top:1px solid rgba(15,23,42,.08);
      }
      .mobile-menu.open{
        display:block !important;
        animation: slideDown .22s ease forwards;
      }
      @keyframes slideDown{
        from{ opacity:0; transform:translateY(-4px); }
        to  { opacity:1; transform:translateY(0); }
      }
      .mobile-navlinks{ display:flex; flex-direction:column; padding:8px 0 4px; }
      .mobile-link{
        padding:13px 16px; font-size:15px; font-weight:500;
        color:var(--ink); border-radius:12px; margin:0 8px; display:block;
      }
      .mobile-link:hover{ background:rgba(26,115,232,.07); }
      .mobile-actions{
        display:flex; flex-direction:column; gap:10px;
        padding:10px 16px 16px;
        border-top:1px solid rgba(15,23,42,.07);
      }
      .mobile-user{ display:flex; align-items:center; gap:10px; padding:4px 0 8px; }

      .lesson{ grid-template-columns: 1fr; }
      .cards{ grid-template-columns: repeat(2, 1fr); }
      .statgrid{ grid-template-columns: repeat(3, 1fr); }
    }

    /* ══════════════════════════════════════════
       Mobile ≤680px — topbar ประหยัดพื้นที่
       ══════════════════════════════════════════ */
    @media (max-width: 680px){
      .brand-sub{ display:none; }
      .course-pill .course-pill-text{ display:none; }
      .btn-logout .btn-label{ display:none; }
      .btn-logout{ padding:9px 11px; }
      .actions { display: none; }
      .user-chip .user-email{ display:none; }
      /* ซ่อน trial-badge ใน topbar desktop — แสดงใน mobile drawer แทน */
      .actions .trial-badge{ display:none; }
    }

    /* ══════════════════════════════════════════
       Mobile XS ≤520px
       ══════════════════════════════════════════ */
    @media (max-width: 520px){
      .statgrid{ grid-template-columns: 1fr; }
      .cards{ grid-template-columns: 1fr; }
      .user-chip .user-info{ display:none; }
      .actions .course-pill{ display:none; }
    }