:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#172e46;background:#f4f7fa;font-size:16px;line-height:1.65;--navy:#122f48;--teal:#087f80;--border:#e1e8ef}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,a,input,select{outline-offset:4px}
button{cursor:pointer}
header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:white;border-bottom:1px solid var(--border)}
.brand{display:flex;gap:14px;align-items:center;font-size:22px;font-weight:bold}
.brand small{display:block;font-size:13px;font-weight:normal;color:#607387}
.logo{background:var(--navy);color:white;display:grid;place-content:center;position:relative;width:53px;height:53px;border-radius:15px;font-size:28px;letter-spacing:-2px}
.logo span{position:absolute;color:#59d5c6;right:7px;top:-3px}
.term,.tag{font-size:14px;border:1px solid var(--border);padding:5px 12px;border-radius:8px;background:#fff}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);max-width:1600px;margin:auto;min-height:calc(100vh - 170px)}
aside{padding:36px 22px;border-right:1px solid var(--border);background:#fbfcfe}
.eyebrow{font-size:12px;color:#687c90;letter-spacing:1px;margin:0 12px 16px}
aside nav{display:grid;gap:9px}
aside nav a{padding:12px 16px;border-radius:9px;display:flex;gap:12px;font-size:16px;color:#5a6d80}
aside nav a.active{background:#e6f3f2;color:#076f73;font-weight:bold}
.aside-note{margin:55px 12px 0;color:#6b7c8d;font-size:14px}
.aside-note p{margin:15px 0 8px}
main{padding:35px 42px 60px;min-width:0}
.topline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px;flex-wrap:wrap}
h1{font-size:29px;line-height:1.4;margin:0 0 6px;letter-spacing:-.7px}
h2{font-size:20px;margin:0}
h3{font-size:18px;line-height:1.55;margin:0 0 8px}
p{margin:8px 0}
.muted{color:#64778b;font-size:14px}
.week-banner{background:var(--navy);color:#fff;padding:24px 28px;border-radius:16px;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}
.week-banner .muted{color:#c1d2e0}
.week-banner h2{font-size:24px;margin-top:3px}
.week-nav{display:flex;gap:8px;align-items:center}
.week-nav button{background:#28475f;border:1px solid #567084;color:white;border-radius:8px;width:40px;height:40px}
button:disabled{opacity:.35;cursor:default}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:20px 0;flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button,.btn{padding:8px 15px;border:1px solid var(--border);border-radius:8px;background:white;color:#466075;font-size:14px;display:inline-block}
.filters button.active,.btn.primary{background:var(--teal);color:white;border-color:var(--teal)}
input{border:1px solid var(--border);border-radius:8px;padding:9px 13px;background:white;max-width:100%;width:270px;font-size:14px}
.day{display:grid;grid-template-columns:75px minmax(0,1fr);gap:22px;margin-bottom:22px}
.date-box{text-align:center;padding-top:9px;color:#677b8d;font-size:14px}
.date-box strong{display:block;font-size:31px;color:var(--navy);line-height:1.25}
.lessons{display:grid;gap:12px}
.lesson{background:white;border:1px solid var(--border);border-left:4px solid var(--course);border-radius:11px;padding:20px 24px;display:grid;grid-template-columns:1fr auto;gap:15px;transition:box-shadow .15s}
.lesson:hover{box-shadow:0 5px 18px #1734490c}
.badge{display:inline-block;color:var(--course);background:var(--tint);font-size:13px;font-weight:bold;padding:3px 9px;border-radius:5px;margin-bottom:9px}
.lesson .action{align-self:center;color:#0a777b;font-size:14px;white-space:nowrap}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:30px 0 15px}
.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.course-card{border:1px solid var(--border);border-top:4px solid var(--course);padding:22px;background:white;border-radius:11px;display:flex;flex-direction:column}
.course-card h3{font-size:17px;flex:1}
.course-card .muted{margin-top:12px}
.panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;margin:18px 0}
.empty{padding:30px;text-align:center;border:1px dashed #cdd8e2;border-radius:10px;color:#6d7f90;font-size:14px;background:#fbfcfd}
.file{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}
.file:last-child{border:0}
.file strong{font-size:16px;font-weight:normal}
.back{font-size:14px;color:var(--teal);display:inline-block;margin-bottom:20px}
.detail-meta{display:flex;gap:30px;flex-wrap:wrap;margin:18px 0}
.detail-meta p{margin:0}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--border);border-top:1px solid var(--border);background:#fff}
.cal-head,.cal-day{padding:10px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:0}
.cal-head{text-align:center;font-size:14px;background:#eaf0f5}
.cal-day{min-height:110px;font-size:14px}
.cal-day.blank{background:#f8fafc}
.cal-day a{display:block;background:var(--tint);color:var(--course);border-radius:4px;padding:4px 6px;margin-top:5px;font-size:12px}
.notice{background:#edf5f7;padding:12px 16px;border-radius:8px;color:#4f6c7c;font-size:14px;margin:18px 0}
footer{display:flex;justify-content:space-between;padding:20px 42px;font-size:13px;color:#6c7f91;border-top:1px solid var(--border);gap:20px}
@media(max-width:1050px){.shell{grid-template-columns:195px 1fr}main{padding:28px 24px}.course-grid{grid-template-columns:1fr}.lesson{padding:17px}.cal-day{padding:5px}}
@media(max-width:700px){header{height:85px;padding:14px 18px}.brand{font-size:18px;gap:9px}.brand small{font-size:12px}.term{font-size:12px;padding:4px 7px}.logo{width:42px;height:42px}.shell{display:block}aside{padding:8px 10px;border-right:0;border-bottom:1px solid var(--border)}aside .eyebrow,.aside-note{display:none}aside nav{display:flex;justify-content:space-between;gap:2px}aside nav a{font-size:13px;padding:9px 6px;gap:4px}main{padding:24px 17px 40px}h1{font-size:25px}.topline{margin-bottom:18px}.week-banner{padding:19px 17px}.week-banner h2{font-size:19px}.week-nav{gap:5px}.week-nav button{width:32px;height:36px}.day{grid-template-columns:47px 1fr;gap:10px}.date-box strong{font-size:26px}.lesson{display:block;padding:15px}.lesson h3{font-size:16px}.lesson .action{display:block;margin-top:12px}.muted{font-size:13px}.toolbar input{width:100%}.calendar{overflow-wrap:anywhere}.cal-head{font-size:12px;padding:8px 0}.cal-day{min-height:90px}.cal-day a{font-size:12px;padding:3px 2px}.cal-topic{display:none}.panel{padding:19px}.file{align-items:flex-start}.file .btn{white-space:nowrap}footer{padding:18px;display:block}footer span{display:block;margin-top:5px}.detail-meta{gap:15px}}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
aside nav a{align-items:center;min-height:48px}
.btn,.back,.filters button,.month-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px;font-weight:600;transition:background .15s,box-shadow .15s}
.btn{background:#e7f3f2;border:1px solid #c4e0de;color:#076c70;padding:10px 16px}
.btn:hover,.back:hover{background:#d4eae8}
.back{padding:8px 14px;background:#fff;border:1px solid var(--border)}
.lesson .action{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#087f80;color:white;border-radius:10px;min-height:44px;padding:10px 15px;font-weight:600}
.lesson .action svg{width:18px;height:18px}
.lesson:hover .action{background:#066769}
.lesson:focus-visible,.course-card:focus-visible{outline:3px solid #087f80}
.section-title>a{padding:8px 13px;background:#fff;border:1px solid var(--border);border-radius:10px;color:#076c70}
.week-nav button{width:44px;height:44px;border-radius:12px;font-size:24px}
.month-controls{display:flex;gap:12px;align-items:center;font-size:14px}
.month-controls button{background:white;border:1px solid var(--border);width:44px;font-size:24px;color:var(--navy)}
.global-search{display:flex;align-items:center;gap:12px;background:white;border:1px solid #b8d4d6;border-radius:15px;padding:5px 17px;box-shadow:0 3px 10px #17344906;color:var(--teal)}
.global-search input{width:100%;border:0;background:transparent;min-height:50px;font-size:16px;outline-offset:0}
.global-search:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.cal-day{background:white;color:var(--navy);font:inherit;text-align:left;display:flex;flex-direction:column;align-items:stretch;border-top:0;border-left:0;cursor:pointer}
.cal-day.blank{cursor:default}
.cal-day:hover:not(.blank){background:#f0f7f7}
.cal-day.selected{background:#eaf5f3;box-shadow:inset 0 0 0 2px #087f80}
.cal-day.selected .day-number{font-weight:bold;color:#076c70}
.cal-event{display:block;background:var(--tint);color:var(--course);border-radius:5px;padding:4px 5px;margin-top:5px;font-size:13px}
.panel .empty{padding:16px;text-align:left;border:0;border-radius:8px}
#day-agenda{scroll-margin-bottom:120px}
@media(max-width:700px){header{height:74px;padding:10px 16px}.brand small{font-size:12px}.brand{font-size:17px}.term{font-size:12px}aside{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:1000;padding:7px 5px;background:rgba(255,255,255,.97);border:1px solid #dce7ec;border-radius:23px;box-shadow:0 7px 32px #163c4826;backdrop-filter:blur(16px)}aside nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:2px}aside nav a{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:7px 0;border-radius:15px;font-size:12px;line-height:1.5;min-height:58px;white-space:nowrap}aside nav a.active{background:#e7f4f2;color:#08777a}aside nav .nav-icon{height:24px}aside nav .search-nav{overflow:visible;background:transparent}aside nav .search-nav .nav-icon{width:52px;height:52px;margin-top:-29px;border-radius:50%;background:#087f80;color:white;box-shadow:0 4px 12px #087f8033;border:4px solid white}aside nav .search-nav.active .nav-icon{background:#123c52;box-shadow:0 0 0 2px #8ebebf}aside nav .search-nav.active{color:#08777a}main{padding:22px 16px 30px}.topline{gap:8px}.topline>.tag{display:none}.week-banner{gap:10px;padding:18px 16px}.week-banner h2{font-size:19px}.week-banner .muted{font-size:13px}.week-nav{gap:6px;flex-shrink:0}.week-nav button{width:44px;height:44px}.day{grid-template-columns:43px minmax(0,1fr);gap:9px}.date-box strong{font-size:28px}.lesson{padding:16px;border-radius:14px}.lesson .muted{font-size:14px;line-height:1.8}.lesson .action{display:inline-flex;margin-top:14px;font-size:14px}.lesson h3{font-size:17px;line-height:1.65}.filters{gap:6px}.filters button{padding:8px 12px}.cal-head{font-size:13px}.cal-day{min-height:98px;padding:6px 3px;font-size:14px}.cal-event{font-size:12px;padding:3px 1px;text-align:center}.month-controls{width:100%;justify-content:space-between}.month-controls strong{font-size:16px}.calendar{border-radius:12px;overflow:hidden}.panel{margin:14px 0;padding:18px}.file{flex-wrap:wrap;gap:10px}.file .btn{margin-left:auto}.global-search input{padding-left:0}footer{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))}.back{margin-bottom:18px}html{scroll-padding-bottom:130px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@font-face{font-family:Anakotmai;src:url('fonts/anakotmai-medium.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:Anakotmai;src:url('fonts/anakotmai-bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}
:root{font-family:Anakotmai,Tahoma,sans-serif;line-height:1.75}
h1{font-size:28px;letter-spacing:normal;line-height:1.5}
h2,h3{letter-spacing:normal;line-height:1.65}
.logo{font-family:Tahoma,sans-serif}
.week-label{font-size:14px;color:#536d82;white-space:nowrap;display:inline-block;margin-bottom:8px}
.btn svg,.back svg{width:19px;height:19px;flex-shrink:0}
.week-nav button svg,.month-controls button svg{width:21px;height:21px}
.week-nav button{display:inline-flex;align-items:center;justify-content:center}
.lesson .muted{font-size:14px;line-height:1.8}
.lesson .action{white-space:normal}
@media(max-width:700px){h1{font-size:25px}.lesson h3{font-size:18px}aside nav a{font-size:12px}.week-banner h2{font-size:21px}.brand{font-size:17px}}