*{box-sizing:border-box}body{margin:0;background:#f6f8fc;color:#182840;font:16px Kanit, sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;background:white;border:1px solid #dbe3ee;border-radius:10px;padding:10px 16px;color:inherit}button.active,.primary{background:#1266dc;color:white}header{background:white;border-bottom:1px solid #e0e7ef;padding:18px 5%;display:flex;justify-content:space-between;align-items:center;gap:15px}header b{font-size:24px;color:#1266dc}nav{display:flex;gap:8px;flex-wrap:wrap}main{max-width:1250px;margin:auto;padding:28px 24px}.banner{background:#1266dc;color:white;padding:25px 30px;border-radius:18px;margin-bottom:28px}.banner h1{margin:0;font-size:28px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:20px}.card{background:white;border:1px solid #dde4ee;border-radius:15px;overflow:hidden;display:flex;flex-direction:column}.cover{padding:28px 22px;background:var(--tint);height:155px;color:var(--color);font-size:28px;font-weight:600}.cover small{font-size:16px;display:block}.body{padding:18px;flex:1}.body h3{margin:4px 0 16px}.muted{color:#6a788e;font-size:14px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:15px 0}progress{width:100%;accent-color:#1266dc;height:8px}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;padding:22px;border:1px solid #dde4ee;border-radius:14px}.lesson{display:block;width:100%;text-align:left;margin:7px 0}.player{background:#101c2b;aspect-ratio:16/9;border-radius:14px;display:grid;place-items:center;color:white;overflow:hidden}.player video{width:100%;height:100%}label{display:block;margin:14px 0 6px}input,select,textarea{width:100%;padding:11px;border:1px solid #ccd7e5;border-radius:8px;background:white}input[type=checkbox]{width:auto}textarea{min-height:85px}.form{max-width:620px;margin:auto}.notice{background:#fff1ca;padding:12px 20px;font-size:14px}.tabs{display:flex;gap:8px;margin:18px 0}.empty{padding:32px;text-align:center;color:#6a788e}@media(max-width:760px){header{align-items:flex-start;flex-direction:column}.layout{display:flex;flex-direction:column}.layout aside{order:2}main{padding:20px 15px}nav button{padding:8px 12px}.banner{padding:20px}.banner h1{font-size:24px}}

body{padding-bottom:100px}header{justify-content:center}header nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#fff;border-top:1px solid #dce4ef;display:flex;justify-content:center;gap:0;padding:8px 16px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px #18284008}header nav button{border:0;background:transparent;color:#778399;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:130px;min-height:60px;font-size:14px}header nav button.active{background:#eef5ff;color:#1266dc}header nav svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}header nav button:focus-visible{outline:2px solid #1266dc;outline-offset:-2px}@media(max-width:760px){header{align-items:center}header nav{flex-wrap:nowrap;padding-left:8px;padding-right:8px}header nav button{width:25%;max-width:130px;padding:7px 8px}}

.learning-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px;margin-top:20px;align-items:start}.sidebar-shell{background:#eaf0f8;border:1px solid #ccd8e9;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:12px}.course-info{background:#fff;border:1px solid #d5e2f2;border-radius:12px;padding:20px;min-height:180px}.course-info h2{font-size:22px;margin:0 0 8px}.course-info p{margin:8px 0}.content-card{background:white;border:1px solid #d5ddea;border-radius:12px;padding:10px;min-height:410px}.learning-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e0e5ed;margin-bottom:14px}.learning-tabs button{border:0;border-radius:0;background:transparent;padding:13px 4px;color:#758298}.learning-tabs button[aria-selected=true]{color:#1266dc}.tab-line{position:absolute;bottom:-1px;left:0;width:50%;height:3px;background:#1266dc;border-radius:3px;transition:transform .28s ease}.chapter-card{border:1px solid #dbe2ed;border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff}.chapter-card.current-chapter{border-color:#87b6fa;box-shadow:0 0 0 1px #87b6fa;background:#f5f9ff}.chapter-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;border-radius:0;padding:13px 12px;text-align:left;background:#f3f6fb;font-weight:500}.current-chapter .chapter-heading{background:#e8f1ff;color:#105dbb}.chevron{width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;margin:4px 5px 0}.chapter-heading[aria-expanded=false] .chevron{transform:rotate(45deg);margin-top:0}.chapter-items[hidden]{display:none}.chapter-items .lesson{margin:0;padding:13px 12px;border:0;border-top:1px solid #e3e9f2;border-radius:0;background:transparent;font-size:15px}.chapter-items .lesson.active{color:#1266dc;background:#e6efff;border-left:3px solid #1266dc}.chapter-heading small{display:block;font-size:12px;font-weight:400}.file-row{width:100%;border:0;border-top:1px solid #e3e9f2;border-radius:0;text-align:left;padding:13px 12px;background:transparent;display:block;color:inherit;text-decoration:none;font-size:14px}.video-heading h2{font-size:28px;margin:0 0 6px}.video-heading p{font-size:20px;margin:0 0 18px}.lesson-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap}.lesson-actions button:disabled{opacity:.4;cursor:default}.demo-screen{text-align:center;padding:25px}.demo-screen strong{display:block;font-size:25px;margin-bottom:10px}.demo-play{border:1px solid #61748c;border-radius:50%;width:62px;height:62px;margin:0 auto 18px;display:grid;place-items:center;background:#22344b;color:white;font-size:26px}.demo-file-note{font-size:14px;color:#6a788e;margin:12px 0}.demo-toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#182840;color:white;padding:12px 20px;border-radius:12px;z-index:110;max-width:90%;text-align:center}
@media(min-width:1101px) and (hover:hover) and (pointer:fine){body{padding-bottom:0}header{position:sticky;top:0;z-index:100;justify-content:space-between}header nav{position:static;width:auto;border:0;box-shadow:none;padding:0;gap:8px}header nav button{width:auto;min-height:44px;flex-direction:row;padding:10px 16px}header nav svg{width:21px;height:21px}.demo-toast{bottom:30px}}
@media(max-width:760px){.learning-layout{grid-template-columns:1fr;gap:20px}.learning-layout .video-column{grid-row:1}.sidebar-shell{padding:10px}.content-card{min-height:0}.video-heading h2{font-size:24px}.video-heading p{font-size:18px}.lesson-actions{gap:8px}.lesson-actions button{font-size:14px;padding:9px 11px}}
@media(prefers-reduced-motion:reduce){.tab-line,.chevron{transition:none}}

/* ---- ส่วนที่เพิ่มสำหรับระบบจริง ---- */
.notice{background:#fff1ca;padding:12px 20px;font-size:14px;text-align:center}
.google-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#182840;border:1px solid #cfd9e7;border-radius:999px;padding:12px 22px;text-decoration:none;font-weight:500}
.google-btn:hover{background:#f3f7fd}.google-btn svg{width:20px;height:20px}
.lesson{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lesson .tick{width:18px;height:18px;flex:none;border:1.5px solid #b7c4d6;border-radius:50%;display:grid;place-items:center;color:transparent}
.lesson.done .tick{background:#1266dc;border-color:#1266dc;color:#fff}
.tick svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.file-row{display:flex;align-items:center;gap:10px}.file-row svg,.demo-play svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.demo-play svg{width:26px;height:26px;fill:currentColor;stroke:none}
.player .loading{color:#9fb1c8;font-size:15px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid #dde4ee;border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:11px 12px;text-align:left;border-bottom:1px solid #edf1f6;vertical-align:middle}.tbl th{background:#f3f6fb;font-weight:500}
.tbl-wrap{overflow-x:auto}
.badge{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:#eef2f8;color:#53647c}.badge.on{background:#e1f4e6;color:#1e6a3f}.badge.off{background:#fff1c9;color:#8a5a00}
.admin-tabs{display:flex;gap:8px;margin:14px 0 22px;flex-wrap:wrap}
.editor{display:grid;gap:18px;max-width:900px}
.sec{background:#fff;border:1px solid #dde4ee;border-radius:14px;padding:20px}.sec h2{margin:0 0 4px;font-size:19px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.chip-row button{padding:6px 12px;font-size:13px;border-radius:999px}
.ch-box{border:1px solid #dbe2ed;border-radius:12px;padding:14px;margin-top:14px;background:#f8fafd}
.ch-head,.ls-row,.fl-row{display:flex;gap:8px;align-items:center}
.ch-head input{font-weight:500}.ls-row,.fl-row{margin-top:10px;flex-wrap:wrap;background:#fff;border:1px solid #e3e9f2;border-radius:10px;padding:10px}
.ls-row .nm,.fl-row .nm{flex:2 1 200px}.ls-row .src,.fl-row .src{flex:3 1 260px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ls-row .src input[type=url]{flex:1 1 180px}
.mini{padding:6px 10px;font-size:13px;border-radius:8px}.danger{color:#b43a3a;border-color:#efc9c9}
.uploaded{font-size:13px;color:#1e6a3f;word-break:break-all}.progress-txt{font-size:13px;color:#53647c}
.sticky-save{position:sticky;bottom:84px;background:#ffffffee;backdrop-filter:blur(4px);border:1px solid #dde4ee;border-radius:14px;padding:12px 16px;display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
@media(min-width:1101px) and (hover:hover) and (pointer:fine){.sticky-save{bottom:16px}}
.sr{position:absolute;left:-9999px}

/* ---- กระจกฝ้า + hover (liquid glass) ---- */
:root{--glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.78);--glass-edge:rgba(255,255,255,.75);--glass-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -12px rgba(24,40,64,.18),0 2px 6px rgba(24,40,64,.04);--ease:cubic-bezier(.22,.8,.24,1)}
body{background:radial-gradient(60vmax 45vmax at 8% -5%,#dbe8ff 0,transparent 60%),radial-gradient(50vmax 40vmax at 100% 10%,#ece4ff 0,transparent 58%),radial-gradient(55vmax 40vmax at 40% 105%,#d9f1f0 0,transparent 60%),#f6f8fc;background-attachment:fixed}
header{background:var(--glass-strong);border-bottom-color:rgba(255,255,255,.7)}
header nav{background:var(--glass-strong)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 header,header nav,.sticky-save{-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
 header,header nav{background:rgba(255,255,255,.62)}
 .card,.sidebar-shell,.panel,.sec,.tbl{-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
}
.card,.panel,.sec{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.sidebar-shell{background:rgba(234,240,248,.55);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.course-info,.content-card{background:var(--glass-strong);border-color:rgba(255,255,255,.8)}
.card{position:relative;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.75),rgba(255,255,255,0) 62%);mix-blend-mode:soft-light}
.card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,1);background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 48%,transparent 60%) no-repeat;background-size:250% 100%;background-position:120% 0}
.cover{transition:transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){
 .card:hover{transform:translateY(-6px);border-color:#fff;box-shadow:0 1px 0 #fff inset,0 24px 44px -18px rgba(18,102,220,.28),0 8px 18px -8px rgba(24,40,64,.12)}
 .card:hover::before,.card:hover::after{opacity:1}
 .card:hover::after{background-position:-40% 0;transition:opacity .35s,background-position .9s var(--ease)}
 .card:hover .cover{transform:scale(1.04)}
 button{transition:background .25s,box-shadow .3s var(--ease),transform .25s var(--ease),border-color .25s,color .25s}
 button:not(.primary):not(:disabled):not(.active):hover{background:rgba(255,255,255,.85);border-color:#fff;box-shadow:0 6px 16px -8px rgba(18,102,220,.35)}
 .primary:not(:disabled):hover{box-shadow:0 8px 22px -6px rgba(18,102,220,.55),0 0 0 4px rgba(18,102,220,.12);transform:translateY(-1px)}
 button:not(:disabled):active{transform:scale(.97)}
 header nav button:not(.active):hover{background:rgba(18,102,220,.07);color:#1266dc}
 .chapter-heading:hover{background:#e9f0fb}
 .chapter-items .lesson:not(.active):hover,.file-row:hover{background:rgba(18,102,220,.06);box-shadow:none;transform:none}
 .tbl tbody tr{transition:background .2s}.tbl tbody tr:hover{background:rgba(18,102,220,.05)}
}
@media(prefers-reduced-motion:reduce){.card,.cover,button{transition:none}.card:hover{transform:none}.card:hover .cover{transform:none}.card::after{display:none}}
@media(min-width:1101px) and (hover:hover) and (pointer:fine){header nav{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}