@font-face{font-family:Sarabun;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YL5rik8s6zDX.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YL5rilQs6zDX.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YL5rilUs6zDX.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YL5rilss6w.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aAFJn2QN.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aBpJn2QN.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aBtJn2QN.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVjJx26TKEr37c9aBVJnw.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqik8s6zDX.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqilQs6zDX.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqilUs6zDX.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YOZqilss6w.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptik8s6zDX.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptilQs6zDX.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptilUs6zDX.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YMptilss6w.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5sik8s6zDX.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5silQs6zDX.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5silUs6zDX.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/sarabun/v17/DtVmJx26TKEr37c9YK5silss6w.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #1E3A8A;--primary-dark: #172B70;--primary-mid: #2563EB;--primary-light: #DBEAFE;--primary-surface:#EFF6FF;--accent: #059669;--accent-mid: #10B981;--accent-light: #D1FAE5;--success: #059669;--warning: #D97706;--warning-light: #FEF3C7;--danger: #DC2626;--danger-light: #FEE2E2;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--sidebar-w: 256px;--navbar-h: 60px;--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--radius-xl: 20px;--shadow-xs: 0 1px 2px rgba(0,0,0,.05);--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);--shadow: 0 4px 16px rgba(0,0,0,.08);--shadow-lg: 0 10px 40px rgba(0,0,0,.12);--shadow-primary: 0 4px 14px rgba(30,58,138,.25);--ease-standard: cubic-bezier(.4,0,.2,1);--ease-emphasized:cubic-bezier(.34,1.56,.64,1);--transition: .2s var(--ease-standard);--transition-fast:.12s ease}html,body{width:100%;height:100%}body{font-family:Sarabun,Segoe UI,sans-serif;font-size:16px;color:var(--gray-700);background:var(--gray-50);-webkit-font-smoothing:antialiased;line-height:1.6}app-root{display:block;width:100%;min-height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--gray-300)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius);border:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .16s var(--ease-standard)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary-mid);color:#fff;box-shadow:0 3px 10px #2563eb4d}.btn-primary:hover{background:var(--primary-dark);box-shadow:0 5px 16px #2563eb66;transform:translateY(-1px)}.btn-secondary{background:#fff;color:var(--gray-700);border:1.5px solid var(--gray-200)}.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-ghost{background:transparent;color:var(--gray-500)}.btn-ghost:hover{background:var(--gray-100);color:var(--gray-700)}.modal-overlay{position:fixed;inset:0;z-index:300;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;animation:overlayIn .15s var(--ease-standard)}.modal-card{background:#fff;border-radius:var(--radius-lg);box-shadow:0 20px 60px #00000038;animation:modalIn .2s var(--ease-emphasized);max-height:90vh;overflow-y:auto}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}.es-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center;gap:6px;animation:esIn .25s var(--ease-standard)}.es-icon{width:56px;height:56px;border-radius:50%;background:var(--primary-surface);display:flex;align-items:center;justify-content:center;margin-bottom:14px}.es-title{font-size:15px;font-weight:700;color:var(--gray-800)}.es-sub{font-size:13px;color:var(--gray-500);max-width:320px;line-height:1.6}.es-action{margin-top:16px}@keyframes esIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.skel{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);background-size:200% 100%;animation:skel-shimmer 1.4s infinite;border-radius:var(--radius)}@keyframes skel-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.guide-wrap{padding:0 24px 48px;font-size:16px}.guide-header{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:700;color:var(--gray-900);margin-bottom:20px}.guide-close-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);background:var(--gray-50);color:var(--gray-500);cursor:pointer;transition:background .15s var(--ease-standard),color .15s var(--ease-standard);flex-shrink:0}.guide-close-btn:hover{background:var(--danger-light);color:var(--danger);border-color:#fecaca}.guide-close-btn:active{transform:scale(.92)}.guide-tab-bar{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--gray-200);margin-bottom:28px}.guide-tab-btn{display:flex;align-items:center;gap:7px;padding:10px 20px;border:none;background:none;color:var(--gray-500);font-size:16px;font-weight:500;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:var(--radius) var(--radius) 0 0;transition:background .12s var(--ease-standard),color .12s var(--ease-standard);font-family:inherit}.guide-tab-btn:hover{background:var(--gray-100);color:var(--gray-700)}.guide-tab-btn:active{transform:scale(.96)}.guide-tab-btn.active{color:var(--primary-mid);border-bottom-color:var(--primary-mid);font-weight:700;background:var(--primary-surface)}.guide-tab-btn.active svg{stroke:var(--primary-mid)}.guide-tab-btn--admin{color:#7c3aed}.guide-tab-btn--admin:hover{background:#f5f3ff;color:#6d28d9}.guide-tab-btn--admin.active{color:#7c3aed;border-bottom-color:#7c3aed;background:#f5f3ff}.guide-tab-btn--admin.active svg{stroke:#7c3aed}.guide-tab-content{animation:gtab-in .18s var(--ease-standard)}@keyframes gtab-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.guide-ov-img-wrap{position:relative;margin-bottom:24px}.guide-img-hero{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--gray-200);display:block;cursor:zoom-in;transition:opacity .15s var(--ease-standard)}.guide-img-hero:hover{opacity:.92}.guide-ov-zoom-hint{position:absolute;bottom:12px;right:14px;font-size:13px;color:#fff;background:#00000080;padding:3px 10px;border-radius:20px;pointer-events:none}.guide-section-label{font-size:13px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}.guide-ov-list{display:flex;flex-direction:column;gap:0}.guide-ov-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--gray-100)}.guide-ov-item:last-child{border-bottom:none}.guide-ov-item--admin{border-radius:var(--radius);transition:background .13s var(--ease-standard)}.guide-ov-item--admin:hover{background:#f5f3ff}.guide-ov-num{flex-shrink:0;width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;margin-top:2px}.guide-ov-body{flex:1}.guide-ov-item-title{font-size:16px;font-weight:700;color:var(--gray-900);margin-bottom:5px}.guide-ov-item-text{font-size:16px;color:var(--gray-600);line-height:1.6;margin:0}.guide-ov-item-text strong{color:var(--primary)}.guide-topic-list{display:flex;flex-direction:column;gap:0}.guide-topic{padding:20px 0;border-bottom:1px solid var(--gray-100)}.guide-topic:last-child{border-bottom:none}.guide-topic-head{display:flex;align-items:center;gap:10px;background:var(--tb);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;font-size:16px;font-weight:700;color:var(--tc)}.guide-topic-icon{width:36px;height:36px;border-radius:var(--radius);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 4px #00000014}.guide-topic-icon svg{stroke:var(--tc)}.guide-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}.guide-steps li{font-size:16px;color:var(--gray-600);line-height:1.65}.guide-steps strong{color:var(--gray-900)}.guide-steps em{color:var(--primary-mid);font-style:normal}.guide-warn-box{font-size:16px;color:#92400e;background:#fffbeb;border:1.5px solid #fcd34d;border-radius:var(--radius);padding:10px 14px;margin-top:14px;line-height:1.55}.guide-settings-intro-box{font-size:16px;color:var(--primary-dark);background:var(--primary-surface);border:1.5px solid var(--primary-light);border-radius:var(--radius);padding:12px 16px;margin-bottom:22px;line-height:1.55}.guide-settings-intro-box strong{color:var(--primary)}.guide-goto-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);background:var(--primary-mid);color:#fff;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s var(--ease-standard),transform .1s var(--ease-standard);flex-shrink:0}.guide-goto-btn:hover{background:var(--primary-dark)}.guide-goto-btn:active{transform:scale(.95)}.guide-upload-steps{display:flex;flex-direction:column;gap:20px}.guide-upload-step{display:flex;gap:14px;align-items:flex-start}.guide-upload-step-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--primary-mid);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:2px}.guide-upload-step-body{flex:1}.guide-upload-step-body p{font-size:16px;color:var(--gray-600);line-height:1.65;margin:8px 0 0}.guide-upload-step-body p strong{color:var(--gray-900)}.guide-topic-img{width:100%;max-width:320px;height:auto;border-radius:var(--radius-sm);border:1px solid var(--gray-200);display:block;cursor:zoom-in;margin-bottom:12px;transition:opacity .15s var(--ease-standard)}.guide-topic-img:hover{opacity:.88}.guide-admin-sub-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.guide-admin-sub-btn{display:flex;align-items:center;gap:5px;padding:6px 14px;border:1.5px solid var(--gray-200);border-radius:20px;background:var(--gray-50);font-size:13px;font-weight:500;color:var(--gray-500);cursor:pointer;font-family:inherit;transition:all .14s var(--ease-standard)}.guide-admin-sub-btn:hover{background:var(--gray-100);color:var(--gray-700);border-color:var(--gray-300)}.guide-admin-sub-btn:active{transform:scale(.95)}.guide-admin-sub-btn.active{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe;font-weight:700}.guide-admin-sub-btn svg{flex-shrink:0}.guide-admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.guide-admin-grid .guide-topic{border:1.5px solid var(--gray-100);border-radius:var(--radius-lg);padding:18px;background:#fff;box-shadow:0 1px 4px #0000000d}.guide-admin-grid .guide-topic:last-child{border-bottom:1.5px solid var(--gray-100)}.guide-admin-menu-tag{display:inline-block;font-size:10px;font-weight:700;color:#7c3aed;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:20px;padding:2px 9px;margin-bottom:8px;letter-spacing:.03em}@media(max-width:768px){.guide-admin-grid{grid-template-columns:1fr}}.guide-cyber-tabs{display:flex;flex-direction:column;gap:16px}.guide-cyber-tab-item{border-radius:var(--radius);border:1.5px solid var(--gray-200);padding:14px 16px;background:#fff}.guide-cyber-tab-label{font-size:13px;font-weight:700;border:1.5px solid;border-radius:20px;padding:3px 12px;display:inline-block;margin-bottom:10px}.guide-cyber-tab-item .guide-steps li{padding:4px 0;font-size:14px;color:var(--gray-700)}.guide-topic-img-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}.guide-topic-img-row .guide-topic-img{max-width:100%;margin-bottom:0}.guide-img-overlay{position:fixed;inset:0;z-index:9000;background:#000c;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.guide-img-overlay img{max-width:92vw;max-height:90vh;border-radius:var(--radius);box-shadow:0 8px 40px #00000080}