@import "https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap";
@font-face{font-family:SaoChingcha;src:url(/E-Learning/fonts/SaoChingcha/SaoChingcha-Light.otf)format("opentype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:SaoChingcha;src:url(/E-Learning/fonts/SaoChingcha/SaoChingcha-Regular.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:SaoChingcha;src:url(/E-Learning/fonts/SaoChingcha/SaoChingcha-Bold.otf)format("opentype");font-weight:700;font-style:normal;font-display:swap}:root{--primary:#0f766e;--primary-hover:#0d9488;--primary-light:#0f766e14;--success:#047857;--success-light:#04785714;--alert:#b91c1c;--alert-light:#b91c1c14;--background:#f0fdf4;--foreground:#0f172a;--surface:#fff;--surface-border:#dcfce7;--text-muted:#475569;--text-inverse:#fff;--font-sans:"Sarabun", sans-serif;--font-display:"SaoChingcha", "Sarabun", sans-serif;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-full:9999px;--transition-standard:color .2s cubic-bezier(.25, 1, .5, 1), background-color .2s cubic-bezier(.25, 1, .5, 1), border-color .2s cubic-bezier(.25, 1, .5, 1), box-shadow .2s cubic-bezier(.25, 1, .5, 1), transform .2s cubic-bezier(.25, 1, .5, 1);--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-quint:cubic-bezier(.22, 1, .36, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--shadow-sm:0 1px 3px #0f766e08;--shadow-md:0 4px 6px -1px #0f766e0a, 0 2px 4px -1px #0f766e05;--shadow-lg:0 10px 15px -3px #0f766e0a, 0 4px 6px -2px #0f766e05;--z-base:0;--z-raised:2;--z-sticky:100;--z-dropdown:300;--z-modal-backdrop:700;--z-modal:800;--z-toast:900;--z-tooltip:950}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:0;text-wrap:balance;font-weight:600;line-height:1.25}a{color:var(--primary);transition:var(--transition-standard);text-decoration:none}a:hover{color:var(--primary-hover)}.container{max-width:1200px;padding:0 var(--space-md);margin:0 auto}.card{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-sm);transition:var(--transition-standard)}.card.interactive-card:hover,a.card:hover,button.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.form-group{margin-bottom:var(--space-md)}.form-label{margin-bottom:var(--space-sm);color:var(--foreground);font-size:.875rem;font-weight:500;display:block}.form-input{width:100%;font-family:var(--font-sans);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--foreground);transition:var(--transition-standard);outline:none;padding:10px 14px;font-size:.95rem}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f766e29}.form-select{width:100%;font-family:var(--font-sans);background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--foreground);transition:var(--transition-standard);cursor:pointer;outline:none;padding:10px 14px;font-size:.95rem}.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f766e29}.btn{min-height:44px;font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-standard);text-align:center;border:none;justify-content:center;align-items:center;padding:10px 20px;font-size:.95rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--primary);color:var(--text-inverse)!important}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);color:var(--text-inverse)!important}.btn-secondary{border:1px solid var(--surface-border);background:0 0;color:var(--foreground)!important}.btn-secondary:hover{background:var(--surface-border)}.btn-disabled{background:var(--surface-border);cursor:not-allowed;color:var(--text-muted)!important}.navbar{background:var(--surface);border-bottom:1px solid var(--surface-border);height:64px;padding:0 var(--space-lg);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-sans);background:#fffc;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}html.dark .navbar{background:#0f172acc}.nav-btn-link:hover{color:var(--primary)!important;background:#0000000a!important}html.dark .nav-btn-link:hover{color:var(--foreground)!important;background:#ffffff0f!important}.nav-btn-teacher:hover{opacity:.95;transform:translateY(-1px);box-shadow:0 6px 14px #4f46e54d!important}.navbar-brand-link{min-height:44px}.nav-btn-link,.dropdown-item{font-family:var(--font-sans);min-height:44px}.hamburger-btn{min-width:44px;min-height:44px}.dropdown-item:hover{background:var(--primary-light)!important;color:var(--primary)!important}.dropdown-item-alert:hover{background:var(--alert-light)!important;color:var(--alert)!important}html.dark .dropdown-item:hover{color:var(--foreground)!important;background:#4f46e526!important}:focus-visible{outline:3px solid var(--primary);outline-offset:2px;box-shadow:none!important}.btn:focus-visible,.navbar a:focus-visible,.card:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.form-input:focus-visible{border-color:var(--primary);outline:3px solid var(--primary);outline-offset:1px}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.btn:active,.card:active{transition:transform .1s var(--ease-out-quint)!important;transform:scale(.98)!important}.form-input,.form-select{transition:border-color .15s var(--ease-out-quart), box-shadow .15s var(--ease-out-quart)}.safe-rich-text{overflow-wrap:anywhere;word-break:break-word;text-wrap:pretty;max-width:72ch}.safe-rich-text p+p,.safe-rich-text ul,.safe-rich-text ol{margin-top:.75rem}.safe-rich-text ul,.safe-rich-text ol{padding-inline-start:1.25rem}.classroom-layout{gap:var(--space-lg);grid-template-columns:1fr 320px;display:grid}.dashboard-layout{gap:var(--space-xl);grid-template-columns:1fr 340px;display:grid}.milestones-layout{text-align:center;grid-template-columns:1fr 1fr 1fr;gap:16px;display:grid}.review-header-layout{justify-content:space-between;align-items:flex-start;display:flex}.booking-slot-layout{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.home-hero-title-accent,.home-hero-lead{white-space:nowrap}@media (max-width:991px){.classroom-layout{grid-template-columns:1fr}.dashboard-layout{gap:var(--space-lg);grid-template-columns:1fr}}@media (max-width:576px){.home-hero-title{max-width:100%!important;font-size:1.82rem!important;line-height:1.22!important}.home-hero-title-accent,.home-hero-lead{white-space:normal;text-wrap:balance}.home-hero-lead{line-height:1.65;font-size:1.05rem!important}.milestones-layout{text-align:left;grid-template-columns:1fr;gap:12px}.milestones-layout>div{align-items:center;gap:12px;display:flex}.booking-slot-layout{align-items:stretch;gap:var(--space-sm);flex-direction:column}.booking-slot-layout>button{width:100%}}@media (pointer:coarse){.btn,button,.nav-btn-link,.dropdown-item{min-height:44px}}.course-card-grid>.card,.public-quiz-catalog-card,.course-intro-main,.course-enrollment-panel{min-width:0}.course-card-footer,.course-card-actions,.public-quiz-catalog-meta{flex-wrap:wrap}.course-category-filter button{min-height:44px!important}.public-quiz-catalog-body,.public-quiz-catalog-body strong,.course-card-grid h3,.course-card-grid p{overflow-wrap:anywhere}.public-quiz-catalog-action{flex-shrink:0}.course-enrollment-panel{align-self:flex-start}.teacher-analytics-layout,.teacher-public-quiz-layout,.teacher-analytics-layout>*,.teacher-public-quiz-panel,.teacher-public-quiz-card,.teacher-public-quiz-card-head>div,.teacher-public-quiz-card strong{min-width:0}.teacher-public-quiz-card strong,.teacher-public-quiz-card span,.teacher-public-quiz-card p,.teacher-analytics-layout button{overflow-wrap:anywhere}.teacher-back-link{align-items:center;min-height:44px;display:inline-flex}.public-quiz-page{overflow-x:hidden}.suggestion-item{overflow-wrap:anywhere;min-height:44px;line-height:1.45}.public-quiz-option span,.public-quiz-question-card h3,.public-quiz-sticky-header span{overflow-wrap:anywhere}@media (max-width:767px){.btn,button,.nav-btn-link,.dropdown-item,.mobile-nav-drawer a,.mobile-nav-drawer button{min-height:44px}.course-card-grid{gap:16px!important}.course-card-footer{flex-direction:column!important;align-items:stretch!important}.course-card-actions,.course-card-footer .btn,.course-card-footer button,.course-card-footer a{width:100%}.course-card-actions{flex-direction:column!important}.public-quiz-catalog-card{flex-direction:column!important;align-items:stretch!important;padding:20px 16px!important}.public-quiz-catalog-title-row,.public-quiz-catalog-meta{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}.public-quiz-catalog-action,.public-quiz-catalog-action .btn,.public-quiz-catalog-action button{width:100%}.course-intro-layout{gap:20px!important}.course-enrollment-panel{flex-basis:auto!important;max-width:100%!important;position:static!important}.course-enrollment-card{padding:22px 16px!important}.teacher-analytics-layout{gap:var(--space-lg)!important;grid-template-columns:1fr!important}.teacher-analytics-tabs,.teacher-analytics-toolbar{flex-direction:column!important;align-items:stretch!important}.teacher-analytics-tabs button,.teacher-analytics-toolbar button,.teacher-public-quiz-card-head,.teacher-public-quiz-actions{width:100%}.teacher-public-quiz-layout{gap:var(--space-lg)!important;flex-direction:column!important}.teacher-public-quiz-panel{flex-basis:auto!important;width:100%!important}.teacher-public-quiz-card{padding:18px 16px!important}.teacher-public-quiz-card-head{flex-direction:column!important}.teacher-public-quiz-actions{flex-direction:column!important;align-items:stretch!important}.teacher-public-quiz-actions .btn,.teacher-public-quiz-actions button,.teacher-public-quiz-actions a{width:100%;justify-content:center!important;margin-left:0!important}.teacher-breadcrumb{flex-wrap:wrap!important;align-items:flex-start!important}.public-quiz-create-modal-card{width:100%!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 32px)!important;overflow-y:auto!important}.public-quiz-page{padding:20px 12px 44px!important}.public-quiz-container{max-width:100%!important}.public-quiz-card,.public-quiz-question-card{padding:22px 16px!important}.public-quiz-name-grid,.public-quiz-info-grid{grid-template-columns:1fr!important}.public-quiz-info-grid>div{grid-column:auto!important}.public-quiz-actions{flex-direction:column!important}.public-quiz-sticky-header{padding:10px 12px!important;top:8px!important}.public-quiz-sticky-top-row,.public-quiz-tab-row{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}.public-quiz-sticky-top-row strong{font-size:1rem!important}.public-quiz-option{align-items:flex-start!important;padding:12px!important}.public-quiz-option input{flex-shrink:0;margin-top:3px}.suggestions-container{max-height:220px!important}}@media (max-width:900px){.teacher-analytics-layout{gap:var(--space-lg)!important;grid-template-columns:1fr!important}.teacher-public-quiz-layout{gap:var(--space-lg)!important;flex-direction:column!important}.teacher-public-quiz-panel{flex-basis:auto!important;width:100%!important}}@media (max-width:1023px){.btn,button,.nav-btn-link,.dropdown-item,.mobile-nav-drawer a,.mobile-nav-drawer button,.course-card-actions a,.course-card-actions button,.public-quiz-catalog-action a,.public-quiz-catalog-action button,.teacher-public-quiz-actions a,.teacher-public-quiz-actions button{min-height:44px!important}}@media (max-width:480px){.home-hero-title{font-size:1.65rem!important}.review-header-layout{flex-direction:column;gap:4px}}@media (min-width:1024px){.desktop-only{display:flex!important}.mobile-only{display:none!important}}@media (max-width:1023px){.desktop-only{display:none!important}.mobile-only{display:flex!important}}@keyframes slideDown{0%{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-15px)}}.slide-down-enter{animation:.2s cubic-bezier(.22,1,.36,1) forwards slideDown}.slide-up-exit{animation:.2s cubic-bezier(.25,1,.5,1) forwards slideUp}.banner-frame{border-radius:var(--radius-lg);width:100%;height:320px;box-shadow:var(--shadow-lg);border:1px solid var(--surface-border);background:var(--surface);position:relative;overflow:hidden}.banner-overlay-panel{width:50%;height:100%;padding:40px var(--space-xl);color:#fff;z-index:2;pointer-events:none;flex-direction:column;justify-content:center;display:flex;position:absolute;top:0;left:0}.footer-grid{grid-template-columns:2fr 1fr 1fr;gap:40px;display:grid}@media (max-width:767px){.banner-frame{height:240px}.banner-overlay-panel{width:85%;padding:24px var(--space-md)}.banner-overlay-panel h2{margin-bottom:8px!important;font-size:1.35rem!important;line-height:1.3!important}.banner-overlay-panel span{padding:6px 14px!important;font-size:.75rem!important}.footer-grid{grid-template-columns:1fr;gap:30px}}.feature-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.feature-card{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-md);transition:var(--transition-standard);flex-direction:column;gap:12px;padding:24px 20px;display:flex}.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature-card-icon{border-radius:var(--radius-sm);background:var(--primary-light);width:48px;height:48px;color:var(--primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.feature-card-featured-2{background:linear-gradient(135deg, var(--surface) 0%, #0f766e08 100%);border-color:#0f766e33;grid-column:span 2}.feature-card-featured-3{background:linear-gradient(135deg, var(--surface) 0%, #10b98108 100%);border-color:#10b98133;grid-column:span 3}@media (min-width:768px){.feature-card-featured-2,.feature-card-featured-3{flex-direction:row;align-items:center;gap:24px}.feature-card-featured-2 .feature-card-icon,.feature-card-featured-3 .feature-card-icon{width:56px;height:56px}}@media (max-width:991px){.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-card-featured-2,.feature-card-featured-3{grid-column:span 2}}@media (max-width:767px){.feature-grid{grid-template-columns:1fr}.feature-card-featured-2,.feature-card-featured-3{grid-column:span 1}}.notification-item:focus-visible{outline:2px solid var(--primary)!important;outline-offset:-2px!important}