@import"https://fonts.googleapis.com/css2?family=Anuphan:wght@100..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";:root{--pad-n: 7px;--pad-l: 10px;--main-color: #454f5b;--main-mid: #374655;--main-dark: #2a3541;--main-darker: #1b222a;--main-darkest: #0b0e11;--br-top: 5px 5px 0 0;--br-bottom: 0 0 5px 5px;--br-main: 5px;--font-topic: #71c0f0;--red:rgb(255, 130, 130);--lh-tb: 1.75rem;--lh-label: 2rem}*{box-sizing:border-box;padding:0;margin:0;font-family:Anuphan,Sarabun,"sans-serif"}html{font-size:16px;color:#f5f5f5}body{background-color:#222;margin:auto}.fs-s{font-size:.7rem}.fs-xm{font-size:.8rem}.fs-m{font-size:.85rem}.fs-ns{font-size:.9rem}.fs-n{font-size:.95rem}.fs-l{font-size:1.15rem}.fs-x{font-size:1.25rem}.fs-xl{font-size:1.3rem}.fs-xxl{font-size:1.75rem}.fs-3xl{font-size:2rem}.al-r{text-align:right}.al-l{text-align:left}.al-c{text-align:center}.mg-s{margin:3px!important}.mg-m{margin:5px!important}.mg-l{margin:7px!important}.mg-xl{margin:10px!important}.mg-xxl{margin:15px!important}.mg-t-s{margin-top:3px!important}.mg-t-m{margin-top:5px!important}.mg-t-l{margin-top:7px!important}.mg-t-xl{margin-top:10px!important}.mg-t-xxl{margin-top:15px!important}.mg-b-s{margin-bottom:3px!important}.mg-b-m{margin-bottom:5px!important}.mg-b-l{margin-bottom:7px!important}.mg-b-xl{margin-bottom:10px!important}.mg-b-xxl{margin-bottom:15px!important}.mg-r-s{margin-right:3px!important}.mg-r-m{margin-right:5px!important}.mg-r-l{margin-right:7px!important}.mg-r-xl{margin-right:10px!important}.mg-r-xxl{margin-right:15px!important}.mg-l-s{margin-left:3px!important}.mg-l-m{margin-left:5px!important}.mg-l-l{margin-left:7px!important}.mg-l-xl{margin-left:10px!important}.mg-l-xxl{margin-left:15px!important}.pd-s{padding:3px!important}.pd-m{padding:5px!important}.pd-l{padding:7px!important}.pd-xl{padding:10px!important}.pd-xxl{padding:15px!important}.pd-t-s{padding-top:3px!important}.pd-t-m{padding-top:5px!important}.pd-t-l{padding-top:7px!important}.pd-t-xl{padding-top:10px!important}.pd-t-xxl{padding-top:15px!important}.pd-l-s{padding-left:3px!important}.pd-l-m{padding-left:5px!important}.pd-l-l{padding-left:7px!important}.pd-l-xl{padding-left:10px!important}.pd-l-xxl{padding-left:15px!important}.pd-r-s{padding-right:3px!important}.pd-r-m{padding-right:5px!important}.pd-r-l{padding-right:7px!important}.pd-r-xl{padding-right:10px!important}.pd-r-xxl{padding-right:15px!important}.pd-b-s{padding-bottom:3px!important}.pd-b-m{padding-bottom:5px!important}.pd-b-l{padding-bottom:7px!important}.pd-b-xl{padding-bottom:10px!important}.pd-b-xxl{padding-bottom:15px!important}.ident-s{text-indent:10px!important}.ident-m{text-indent:20px!important}.ident-l{text-indent:30px!important}.ident-xl{text-indent:40px!important}.ident-xxl{text-indent:50px!important}.ident-3xl{text-indent:60px!important}.ident-4xl{text-indent:70px!important}.bn{border:none}.ba{border:1px solid black!important}.bl{border-left:1px solid black!important}.br{border-right:1px solid black!important}.bt{border-top:1px solid black!important}.bb{border-bottom:1px solid black!important}.ba2{border:1px dotted lightgray!important}.bl2{border-left:1px dotted lightgray!important}.br2{border-right:1px dotted lightgray!important}.bt2{border-top:1px dotted lightgray!important}.bb2{border-bottom:1px dotted lightgray!important}.ba3{border:1px dashed var(--main-color)}.bl3{border-left:1px dashed var(--main-color)}.br3{border-right:1px dashed var(--main-color)}.bt3{border-top:1px dashed var(--main-color)}.bb3{border-bottom:1px dashed var(--main-color)}.ba4{border:3px solid black!important}.bl4{border-left:3px solid black!important}.br4{border-right:3px solid black!important}.bt4{border-top:3px solid black!important}.bb4{border-bottom:3px solid black!important}.ba5{border:3px solid var(--main-dark)!important}.bl5{border-left:3px solid var(--main-dark)!important}.br5{border-right:3px solid var(--main-dark)!important}.bt5{border-top:3px solid var(--main-dark)!important}.bb5{border-bottom:3px solid var(--main-dark)!important}.ba6{border:1px solid var(--main-dark)!important}.bl6{border-left:1px solid var(--main-dark)!important}.br6{border-right:1px solid var(--main-dark)!important}.bt6{border-top:1px solid var(--main-dark)!important}.bb6{border-bottom:1px solid var(--main-dark)!important}.ba-y{border:1px dashed gray!important}.bl-y{border-left:1px dashed gray!important}.br-y{border-right:1px dashed gray!important}.bt-y{border-top:1px dashed gray!important}.bb-y{border-bottom:1px dashed gray!important}.bdr3{border-radius:3px}.bdr5{border-radius:5px}.bdr3-top{border-radius:3px 3px 0 0}.bdr3-bottom{border-radius:0 0 3px 3px}.bg-line-swap{background-color:#49596c}.bg-line-swap-main{background-color:var(--main-color)}.bg-line-swap-dark{background-color:var(--main-dark)}.bg-red{background-color:red}.bg-black{background-color:#000}.bg-111{background-color:#111}.bg-222{background-color:#222}.bg-333{background-color:#333}.bg-444{background-color:#444}.bg-555{background-color:#555}.bg-666{background-color:#666}.bg-777{background-color:#777}.bg-888{background-color:#888}.bg-999{background-color:#999}.bg-aaa{background-color:#aaa}.bg-bbb{background-color:#bbb}.bg-ccc{background-color:#ccc}.bg-ddd{background-color:#ddd}.bg-eee{background-color:#eee}.bg-blue{background-color:#00f}.bg-yellow{background-color:#ff0}.bg-orange{background-color:orange}.bg-dkorange{background-color:#ff8c00}.bg-khaki{background-color:khaki}.bg-greenyellow{background-color:#adff2f}.bg-green{background-color:green}.bg-plum{background-color:plum}.bg-pink{background-color:pink}.bg-magenta{background-color:#f0f}.bg-white{background-color:#fff}.bg-lightgray{background-color:#d3d3d3}.bg-grey{background-color:gray}.bg-lightslategrey{background-color:#789}.bg-aquamarine{background-color:#7fffd4}.bg-aqua{background-color:#0ff}.bg-deepskyblue{background-color:#00bfff}.bg-cornflowerblue,.bg-cornblue{background-color:#6495ed}.bg-dgblue,.bg-dodgerblue{background-color:#1e90ff}.bg-steelblue{background-color:#4682b4}.bg-slateblue{background-color:#6a5acd}.bg-mediumspringgreen{background-color:#00fa9a}.bg-mediumseagreen{background-color:#3cb371}.bg-main,.bg-main-color{background-color:var(--main-color)}.bg-main-mid{background-color:var(--main-mid)}.bg-main-dark{background-color:var(--main-dark)}.bg-main-darker{background-color:var(--main-darker)}.bg-comment{background-image:linear-gradient(#6495ed,#4169e1)}.bg-reset{background-image:linear-gradient(#b900b9,#590059);color:#fff}.bg-submit{background-image:linear-gradient(#008b8b,#005050)}.bg-get{background-image:linear-gradient(#b8860b,#543c00);color:#fff}.bg-btn-course{background-image:linear-gradient(var(--main-mid),var(--main-darker));color:#fff}.bg-btn-course-active{background-image:linear-gradient(#4682b4,#4169e1);color:#fff}.bg-rename{background-image:linear-gradient(#008b8b,#005050)}.bg-move{background-image:linear-gradient(#ff8c00,#864900)}.bg-list{background-image:linear-gradient(#ff69b4,#8c1e55)}.bg-preview{background-image:linear-gradient(#bdb76b,#56532a)}.bg-link{background-image:linear-gradient(#008b8b,#005050)}.bg-login,.bg-load{background-image:linear-gradient(#6495ed,#4169e1)}.bg-load-emoji{background-color:#6495ed}.bg-load-inactive{background-color:var(--main-color)}.bg-load-active{background-color:#00f!important;pointer-events:none}.bg-reload{background-image:linear-gradient(orchid,#8b008b)}.bg-reload-emoji{background-color:orchid}.bg-save{background-image:linear-gradient(#73bb73,#006400)}.bg-save-emoji{background-color:#73bb73}.bg-add{background-image:linear-gradient(#4169e1,#2a457f)}.bg-add-emoji{background-color:#4169e1}.bg-new{background-image:linear-gradient(#4169e1,#00008b)}.bg-new-emoji{background-color:#4169e1}.bg-update{background-image:linear-gradient(#4169e1,#00008b)}.bg-update-emoji{background-color:#4169e1}.bg-register{background-image:linear-gradient(#73bb73,#006400)}.bg-register-emoji{background-color:#73bb73}.bg-copy{background-image:linear-gradient(#76bfc2,#4682b4)}.bg-copy-emoji{background-color:#4682b4}.bg-edit{background-image:linear-gradient(orange,#ff4500)}.bg-edit-active{background-image:linear-gradient(#21c3a5,#157d6a)}.bg-delete{background-image:linear-gradient(red,#8b0000)}.bg-delete-emoji{background-color:#d12c2c}.bg-print{background-image:linear-gradient(#719726,#445526);color:#fff}.bg-print-emoji{background-color:#719726}.bg-change{background-image:linear-gradient(#f0f,#890089)}.bg-search{background-image:linear-gradient(#4bcbc5,#2a6360)}.bg-search-emoji{background-color:#69fff7}.bg-fs{background-color:#263f3f}.bg-check,.bg-cancel{background-image:linear-gradient(orange,#b8860b)}.bg-import{background-image:linear-gradient(#4169e1,#293a6c);color:#fff}.bg-import-emoji{background-color:#4169e1}.bg-clear{background-image:linear-gradient(#b900b9,#590059);color:#fff}.bg-clear-emoji{background-color:#9370db}.bg-report{background-image:linear-gradient(#ff69b4,#8c1e55)}.bg-view{background-image:linear-gradient(#00c8a7,#008770);color:#fff}.bg-view-emoji{background-color:#00c8a7}.bg-create{background-image:linear-gradient(#ebb325,#82600a);color:#fff}.bg-send{background-image:linear-gradient(#a781f3,#58447f);color:#fff}.bg-send-emoji{background-color:#7656b7;color:#fff}.bg-close{background-image:linear-gradient(#d18c2c,#906219);color:#fff}.bg-finish{background-image:linear-gradient(#ff8c00,#8b0000);color:#fff}.bg-open,.bg-borrow{background-color:#4169e1}.bg-locate{background-image:linear-gradient(#00a075,#55751d);color:#fff}.bg-scan{background-color:orchid;color:#fff}.bg-minus{background-image:linear-gradient(#d12c2c,#901919);color:#fff}.bg-undo{background-image:linear-gradient(#008b8b,#004443);color:#fff}.bg-undo-emoji{background-color:#008b8b}.bg-dn{background-image:linear-gradient(violet,#9735c1);color:#fff}.bg-dn-emoji{background-color:violet}.bg-up{background-image:linear-gradient(#2abce8,#265f79);color:#fff}.bg-up-emoji{background-color:#2abce8}.bg-play,.bg-upload{background-image:linear-gradient(#2abce8,#265f79);color:#fff}.fc-white{color:#fff}.fc-lavender{color:#e6e6fa}.fc-black{color:#000}.fc-gray{color:gray}.fc-ligray{color:#d3d3d3}.fc-dkgrey{color:#a9a9a9}.fc-dimgray{color:#696969}.fc-silver{color:silver}.fc-deepskyblue{color:#00bfff}.fc-steelblue{color:#4682b4}.fc-cornblue{color:#6495ed}.fc-cadetblue{color:#5f9ea0}.fc-dodgerblue{color:#1e90ff}.fc-cyan{color:#0ff}.fc-licyan{color:#e0ffff}.fc-dkcyan{color:#008b8b}.fc-dkturquoise{color:#00ced1}.fc-blue{color:#00f}.fc-liblue{color:#add8e6}.fc-liskyblue{color:#87cefa}.fc-skyblue{color:#87ceeb}.fc-khaki{color:khaki}.fc-yellow{color:#ff0}.fc-goldrod{color:#daa520}.fc-yg{color:#9acd32}.fc-gy{color:#adff2f}.fc-lawngreen{color:#7cfc00}.fc-lime{color:#0f0}.fc-limegreen{color:#32cd32}.fc-palegreen{color:#98fb98}.fc-ligreen{color:#90ee90}.fc-lired{color:var(--red);font-weight:400}.fc-red{color:red}.fc-gold{color:gold}.fc-pink{color:pink}.fc-plum{color:plum}.fc-hotpink{color:#ff69b4}.fc-orchid{color:orchid}.fc-magenta,.fc-mgt{color:#f0f}.fc-green{color:green}.fc-msg{color:#3cb371}.fc-orange{color:orange}.fc-orangered{color:#ff4500}.fc-888{color:#888}.fc-999{color:#999}.fc-aaa{color:#aaa}.fc-bbb{color:#bbb}.fc-ccc{color:#ccc}.fc-ddd{color:#ddd}.fc-eee{color:#eee}.fc-sort{color:#0f0;opacity:1}.fw-b{font-weight:700}.fx-x{text-decoration:line-through}.box-lime{color:#0f0!important;padding:0 3px;border:1px solid lime;border-radius:3px}.box-lime:hover{background-color:#006400}.box-yellow{color:#ff0!important;padding:0 3px;border:1px solid yellow;border-radius:3px}.box-yellow:hover{background-color:#482800}.box-liblue{color:#add8e6!important;padding:0 3px;border:1px solid lightblue;border-radius:3px}.box-liblue:hover{background-color:#00008b}.box-red{color:var(--red)!important;padding:0 3px;border:1px solid var(--red);border-radius:3px}.box-red:hover{background-color:#8b0000}.box-download{color:#32cd32!important;padding:3px 12px;border:1px solid green;border-radius:30px;background-color:var(--main-darker)}.box-download:hover{filter:brightness(150%)}.box-button{background-color:#444;text-align:center;border:none;border:1px solid black;border-radius:3px;padding:0 5px;cursor:pointer}.box-button:hover{filter:brightness(130%)}.img{max-width:100%;height:auto}kbd{color:#fff;border-radius:3px;background-color:gray;padding:1px 3px;margin:0 1px;font-family:Roboto,sans-serif}.lh-7xs{line-height:.6rem}.lh-6xs{line-height:.7rem}.lh-5xs{line-height:.8rem}.lh-4xs{line-height:.9rem}.lh-3xs{line-height:1rem}.lh-2xs{line-height:1.15rem}.lh-xs{line-height:1.25rem}.lh-s{line-height:1.5rem}.lh-n{line-height:1.75rem}.lh-m{line-height:2rem}.lh-l{line-height:2.5rem}.lh-xl{line-height:3rem}.lh-tb{line-height:var(--lh-tb)}.lh-label{line-height:var(--lh-label)}.lh-p{line-height:1.75rem}.clickable{cursor:pointer}.clickable:hover{filter:brightness(130%)}a:link{color:#90ee90;text-decoration:none}a:visited{color:#9acd32;text-decoration:none}a:hover{color:#0f0;text-decoration:dashed}a:active{color:#32cd32;text-decoration:none}.dp-n{display:none!important}.vd-n{background-color:#ff0!important;border:1px solid red!important}ol{padding:3px 0;margin-left:10px;line-height:1.5rem}ol li{padding:3px 0;margin-left:5px}ol li.topic{color:#add8e6}ul{padding:3px 0;margin-left:10px;line-height:1.5rem}ul li{padding:3px 0;margin-left:5px}ul li.topic{color:#add8e6}ul.hyphen{list-style-type:disc;padding-left:0}ul.hyphen li::marker{color:#90ee90;content:"-  "}.green{border-top:3px solid lime;border-bottom:3px solid lime;background-color:#006400;color:#fff;font-weight:700}.yellow{border-top:3px solid darkgoldenrod;border-bottom:3px solid darkgoldenrod;background-color:#ff0;color:#2f3000;font-weight:700}.blue{border-top:3px solid RoyalBlue;border-bottom:3px solid RoyalBlue;background-color:#1e90ff;color:#fff;font-weight:700}.red{border-top:3px solid red;border-bottom:3px solid red;background-color:#8b0000;color:#fff;font-weight:700}@keyframes fadeToastIn{0%{bottom:0;opacity:0}to{bottom:90px;opacity:1}}@keyframes fadeToastIOut{0%{bottom:90px;opacity:1}to{bottom:0;opacity:0}}@-webkit-keyframes fadeToastIn{0%{bottom:0;opacity:0}to{bottom:90px;opacity:1}}@-webkit-keyframes fadeToastIOut{0%{bottom:90px;opacity:1}to{bottom:0;opacity:0}}#notify{text-align:center;position:absolute;z-index:999;left:0;bottom:90px;width:100%;padding:15px 5px;line-height:1.75rem;animation:none;visibility:"visible";animation:fadeNotifyIn .5s,fadeNotifyOut .5s 4s}@keyframes fadeNotifyIn{0%{bottom:0;opacity:0}to{bottom:90px;opacity:1}}@keyframes fadeNotifyOut{0%{bottom:90px;opacity:1}to{bottom:0;opacity:0}}@-webkit-keyframes fadeNotifyIn{0%{bottom:0;opacity:0}to{bottom:90px;opacity:1}}@-webkit-keyframes fadeNotifyOut{0%{bottom:90px;opacity:1}to{bottom:0;opacity:0}}fieldset{border:none;border-radius:5px;margin-inline-start:2px;margin-inline-end:2px;padding-block-start:.25em;padding-block-end:.25em;padding-inline-start:.75em;padding-inline-end:.75em;margin:0}fieldset legend{padding:0 5px}.roww{display:flex;flex-direction:row;flex-wrap:wrap}.row{display:flex;flex-direction:row}.col-01{flex-basis:1%;max-width:1%}.col-02{flex-basis:2%;max-width:2%}.col-03{flex-basis:3%;max-width:3%}.col-04{flex-basis:4%;max-width:4%}.col-05{flex-basis:5%;max-width:5%}.col-06{flex-basis:6%;max-width:6%}.col-07{flex-basis:7%;max-width:7%}.col-08{flex-basis:8%;max-width:8%}.col-09{flex-basis:9%;max-width:9%}.col-10{flex-basis:10%;max-width:10%;overflow:hidden;white-space:nowrap}.col-11{flex-basis:11%;max-width:11%;overflow:hidden;white-space:nowrap}.col-12{flex-basis:12%;max-width:12%;overflow:hidden;white-space:nowrap}.col-13{flex-basis:13%;max-width:13%;overflow:hidden;white-space:nowrap}.col-14{flex-basis:14%;max-width:14%;overflow:hidden;white-space:nowrap}.col-15{flex-basis:15%;max-width:15%;overflow:hidden;white-space:nowrap}.col-16{flex-basis:16%;max-width:16%;overflow:hidden;white-space:nowrap}.col-17{flex-basis:17%;max-width:17%;overflow:hidden;white-space:nowrap}.col-18{flex-basis:18%;max-width:18%;overflow:hidden;white-space:nowrap}.col-19{flex-basis:19%;max-width:19%;overflow:hidden;white-space:nowrap}.col-20{flex-basis:20%;max-width:20%;overflow:hidden;white-space:nowrap}.col-21{flex-basis:21%;max-width:21%;overflow:hidden;white-space:nowrap}.col-22{flex-basis:22%;max-width:22%;overflow:hidden;white-space:nowrap}.col-23{flex-basis:23%;max-width:23%;overflow:hidden;white-space:nowrap}.col-24{flex-basis:24%;max-width:24%;overflow:hidden;white-space:nowrap}.col-25{flex-basis:25%;max-width:25%;overflow:hidden;white-space:nowrap}.col-26{flex-basis:26%;max-width:26%;overflow:hidden;white-space:nowrap}.col-27{flex-basis:27%;max-width:27%;overflow:hidden;white-space:nowrap}.col-28{flex-basis:28%;max-width:28%;overflow:hidden;white-space:nowrap}.col-29{flex-basis:29%;max-width:29%;overflow:hidden;white-space:nowrap}.col-30{flex-basis:30%;max-width:30%;overflow:hidden;white-space:nowrap}.col-31{flex-basis:31%;max-width:31%;overflow:hidden;white-space:nowrap}.col-32{flex-basis:32%;max-width:32%;overflow:hidden;white-space:nowrap}.col-33{flex-basis:33%;max-width:33%;overflow:hidden;white-space:nowrap}.col-34{flex-basis:34%;max-width:34%;overflow:hidden;white-space:nowrap}.col-35{flex-basis:35%;max-width:35%;overflow:hidden;white-space:nowrap}.col-36{flex-basis:36%;max-width:36%;overflow:hidden;white-space:nowrap}.col-37{flex-basis:37%;max-width:37%;overflow:hidden;white-space:nowrap}.col-38{flex-basis:38%;max-width:38%;overflow:hidden;white-space:nowrap}.col-39{flex-basis:39%;max-width:39%;overflow:hidden;white-space:nowrap}.col-40{flex-basis:40%;max-width:40%;overflow:hidden;white-space:nowrap}.col-41{flex-basis:41%;max-width:41%;overflow:hidden;white-space:nowrap}.col-42{flex-basis:42%;max-width:42%;overflow:hidden;white-space:nowrap}.col-43{flex-basis:43%;max-width:43%;overflow:hidden;white-space:nowrap}.col-44{flex-basis:44%;max-width:44%;overflow:hidden;white-space:nowrap}.col-45{flex-basis:45%;max-width:45%;overflow:hidden;white-space:nowrap}.col-46{flex-basis:46%;max-width:46%;overflow:hidden;white-space:nowrap}.col-47{flex-basis:47%;max-width:47%;overflow:hidden;white-space:nowrap}.col-48{flex-basis:48%;max-width:48%;overflow:hidden;white-space:nowrap}.col-49{flex-basis:49%;max-width:49%;overflow:hidden;white-space:nowrap}.col-50{flex-basis:50%;max-width:50%;overflow:hidden;white-space:nowrap}.col-51{flex-basis:51%;max-width:51%;overflow:hidden;white-space:nowrap}.col-52{flex-basis:52%;max-width:52%;overflow:hidden;white-space:nowrap}.col-53{flex-basis:53%;max-width:53%;overflow:hidden;white-space:nowrap}.col-54{flex-basis:54%;max-width:54%;overflow:hidden;white-space:nowrap}.col-55{flex-basis:55%;max-width:55%;overflow:hidden;white-space:nowrap}.col-56{flex-basis:56%;max-width:56%;overflow:hidden;white-space:nowrap}.col-57{flex-basis:57%;max-width:57%;overflow:hidden;white-space:nowrap}.col-58{flex-basis:58%;max-width:58%;overflow:hidden;white-space:nowrap}.col-59{flex-basis:59%;max-width:59%;overflow:hidden;white-space:nowrap}.col-60{flex-basis:60%;max-width:60%;overflow:hidden;white-space:nowrap}.col-61{flex-basis:61%;max-width:61%;overflow:hidden;white-space:nowrap}.col-62{flex-basis:62%;max-width:62%;overflow:hidden;white-space:nowrap}.col-63{flex-basis:63%;max-width:63%;overflow:hidden;white-space:nowrap}.col-64{flex-basis:64%;max-width:64%;overflow:hidden;white-space:nowrap}.col-65{flex-basis:65%;max-width:65%;overflow:hidden;white-space:nowrap}.col-66{flex-basis:66%;max-width:66%;overflow:hidden;white-space:nowrap}.col-67{flex-basis:67%;max-width:67%;overflow:hidden;white-space:nowrap}.col-68{flex-basis:68%;max-width:68%;overflow:hidden;white-space:nowrap}.col-69{flex-basis:69%;max-width:69%;overflow:hidden;white-space:nowrap}.col-70{flex-basis:70%;max-width:70%;overflow:hidden;white-space:nowrap}.col-71{flex-basis:71%;max-width:71%;overflow:hidden;white-space:nowrap}.col-72{flex-basis:72%;max-width:72%;overflow:hidden;white-space:nowrap}.col-73{flex-basis:73%;max-width:73%;overflow:hidden;white-space:nowrap}.col-74{flex-basis:74%;max-width:74%;overflow:hidden;white-space:nowrap}.col-75{flex-basis:75%;max-width:75%;overflow:hidden;white-space:nowrap}.col-76{flex-basis:76%;max-width:76%;overflow:hidden;white-space:nowrap}.col-77{flex-basis:77%;max-width:77%;overflow:hidden;white-space:nowrap}.col-78{flex-basis:78%;max-width:78%;overflow:hidden;white-space:nowrap}.col-79{flex-basis:79%;max-width:79%;overflow:hidden;white-space:nowrap}.col-80{flex-basis:80%;max-width:80%;overflow:hidden;white-space:nowrap}.col-81{flex-basis:81%;max-width:81%;overflow:hidden;white-space:nowrap}.col-82{flex-basis:82%;max-width:82%;overflow:hidden;white-space:nowrap}.col-83{flex-basis:83%;max-width:83%;overflow:hidden;white-space:nowrap}.col-84{flex-basis:84%;max-width:84%;overflow:hidden;white-space:nowrap}.col-85{flex-basis:85%;max-width:85%;overflow:hidden;white-space:nowrap}.col-86{flex-basis:86%;max-width:86%;overflow:hidden;white-space:nowrap}.col-87{flex-basis:87%;max-width:87%;overflow:hidden;white-space:nowrap}.col-88{flex-basis:88%;max-width:88%;overflow:hidden;white-space:nowrap}.col-89{flex-basis:89%;max-width:89%;overflow:hidden;white-space:nowrap}.col-90{flex-basis:90%;max-width:90%;overflow:hidden;white-space:nowrap}.col-95{flex-basis:95%;max-width:95%;overflow:hidden;white-space:nowrap}.col-100{flex-basis:100%;max-width:100%;overflow:wrap;white-space:wrap}.site-header{display:flex;align-items:center;flex-wrap:wrap}.site-header .header-image{flex:0 0 70%;max-width:70%;display:flex;align-items:center;justify-content:center}.header-slogan{padding:10px 20px;text-align:center}.slogan-text{margin:0;font-size:1.2rem;font-style:italic;color:#87cefa;line-height:1.4}.site-header .header-titles{flex:0 0 30%;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:5px 10px}.site-header .header-logo{height:60px;width:auto;object-fit:contain}.site-header .site-name{margin:0;font-size:1.4rem;color:#777}@media screen and (max-width:768px){.site-header{flex-direction:column}.site-header .header-image,.site-header .header-titles{flex:0 0 100%;max-width:100%;width:100%;padding:15px 0}}@media screen and (max-width:480px){.site-header .site-name{font-size:1.2rem}.site-header .header-logo{height:45px}.slogan-text{font-size:1.1rem}}#adminToolbar{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:space-around;padding:3px 0}#adminToolbar div{text-align:center;background-color:var(--main-dark);border:1px solid var(--main-color);margin-left:2px;padding:0 3px;border-radius:3px}#adminToolbar div.admin-active{background-color:#000;pointer-events:none}#adminToolbar a span{font-size:1rem}@media screen and (max-width:768px){#adminToolbar div{text-align:center;border-left:1px solid olivedrab;padding:0 5px}#adminToolbar a span{font-size:.95rem}}@media screen and (max-width:480px){#adminToolbar div{padding:0 3px;line-height:2rem}#adminToolbarSmall a{font-size:.75rem}}footer{background-color:var(--main-dark);border-radius:var(--br-bottom);display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center}footer section{text-align:center}footer section img.icon{height:30px}footer section img.qr{height:100px}footer .ft-row-1{display:flex;justify-content:center}footer .ft-row-1 div{min-width:5%;padding:10px 5px}footer .ft-row-2{display:flex;justify-content:center;align-items:center;border-top:1px dashed var(--main-color);padding:5px 0}footer .ft-row-2 address{padding:0 10px}footer .ft-row-2 p{font-size:.85rem;line-height:1.5rem;font-style:italic}footer .ft-row-2 .ft-col-1{text-align:right}footer .ft-row-2 .ft-col-2{text-align:left}footer .ft-row-3{min-width:5%;padding:5px 5px 10px;border-top:1px dashed var(--main-color);font-size:.8rem;font-style:italic}@media screen and (max-width:768px){footer{border-radius:0}}@media screen and (max-width:480px){footer section.ft-row-1{margin-top:0}footer section.ft-row-1 div{min-width:15%;max-width:19%}footer section.ft-row-1 div:last-child{max-width:30%}footer section.ft-row-1{margin-top:7px;flex-wrap:wrap}footer .ft-row-2{flex-wrap:wrap}footer .ft-row-2 .ft-col-1,footer .ft-row-2 .ft-col-2{flex-basis:100%;max-width:100%;text-align:left;padding-left:20px}footer .ft-row-2 .ft-col-2{padding-top:7px}}nav{overflow:hidden;background-color:var(--main-dark);border-radius:var(--br-top)}nav a:hover{backdrop-filter:brightness(50%)}nav a{text-decoration:none}nav>a.left,nav>a.right{color:#fff;padding:7px 15px}nav>a.left{float:left;border-right:2px solid var(--main-color)}.user-info{display:flex;justify-content:center;float:right;margin:5px 7px}.user-img{width:20px;height:auto}.user-info form input[type=submit]{border:none;color:var(--red);background-color:#0000;cursor:pointer}.user-info form input[type=submit]:hover{filter:brightness(150%)}nav>a.right{float:right}nav>a.active{background-color:var(--main-color);pointer-events:none}nav>a:hover{color:#0f0}nav>form.right{float:right}nav form input[type=submit]{border:none;color:var(--red);background-color:#0000;cursor:pointer;margin-left:7px}nav form input[type=submit]:hover{filter:brightness(150%)}.dropdown{float:left;overflow:hidden;display:none}.dropdown .dropbtn{border:none;outline:none;color:#fff;padding:10px 16px;background-color:inherit;cursor:pointer}.dropdown:hover .dropbtn{backdrop-filter:brightness(50%)}.dropdown-content{display:none;position:absolute;background-color:var(--main-mid);min-width:160px;border:1px solid #333;box-shadow:0 8px 16px #0003;z-index:99}.dropdown-content a{float:none;color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left}.dropdown-content a.active{backdrop-filter:brightness(70%)}.dropdown-content a:hover{color:#0f0;backdrop-filter:brightness(50%)}.dropdown:hover .dropdown-content{display:block}@media screen and (max-width:768px){nav{border-radius:0}nav>a.left{display:none}.dropdown{display:block}}h3{font-weight:400;color:#90ee90;font-family:Noto Sans Thai,Sarabun,"sans-serif";font-size:1.125rem}main{background-color:var(--main-color);display:grid;grid-template-columns:72% 28%;min-height:60vh}main .main-left{padding:7px}main .main-right{padding:0;background-color:var(--main-mid)}main .main-right img{border-top:1px solid black;border-left:1px solid black;border-right:1px solid black}main .main-right img :last-child{border-bottom:1px solid black}.main-left .card-download-ctn .rowg,.main-left .card-live-class-ctn .rowg,.main-left .card-news-ctn .rowg{display:grid;grid-template-columns:10% 90%}.main-left .card-course-ctn .rowg{display:grid;grid-template-columns:12% 88%}.main-left .card-trumb{grid-area:1/1/10/2}.main-left .card-title{grid-area:1/2/2/3}.main-left .card-desc{grid-area:2/2/3/3}.main-left .card-trumb .card-img{border-radius:5%;max-width:100%;height:auto;overflow:hidden}.main-right div.banner-ctn{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px}.main-right div.banner-ctn a{flex-basis:100%;max-width:100%}.main-right div.banner-ctn img{max-width:100%}@media screen and (max-width:768px){body{font-size:12px}main{border-radius:none}main{grid-template-columns:100%}h3{font-weight:300;font-size:1rem}}@media screen and (max-width:480px){body{font-size:11px}h3{font-size:.9rem}}html{font-size:13px}body{max-width:1000px;background-color:#111;color:#fff;font-weight:300}h3{font-weight:400;color:#90ee90;font-family:Sarabun,Noto Sans Thai,"sans-serif";font-size:1.125rem}.container{max-width:800px;margin:5px auto auto}.header-panel{display:flex;justify-content:space-between;align-items:center;background:#2d2d2d;padding:7px 15px;border-radius:8px;margin-bottom:5px}button{background-color:#4caf50;color:#fff;border:none;padding:10px 20px;text-align:center;border-radius:5px;cursor:pointer;transition:.3s}button:hover{background-color:#45a049}button:disabled{background-color:#555;cursor:not-allowed}.btn-danger{background-color:#f44336}.btn-danger:hover{background-color:#d32f2f}#status{font-weight:700;color:#f44336}textarea{width:100%;height:500px;background-color:#121212;color:#0f0;font-size:14px;padding:10px;border:1px solid #444;border-radius:5px;box-sizing:border-box;resize:vertical}.footer-panel{margin-top:15px;text-align:right}@media screen and (max-width:768px){body{font-size:13px}main{border-radius:none}main{grid-template-columns:100%}main .main-left{padding:7px 3px}main .main-right{padding:7px 3px}}@media screen and (max-width:480px){body{font-size:12px}header{flex-wrap:wrap}header .header-image{flex-basis:100%}header .header-image img{width:100%}header .header-titles{flex-basis:100%}}.layer-selector{margin-bottom:15px;background:#222;padding:15px;border-radius:5px;display:flex;flex-wrap:wrap;gap:15px;align-items:flex-end}.selector-group{display:flex;flex-direction:column;gap:5px}.selector-group.flex-grow{flex-grow:1}.layer-selector label{color:#ccc;font-size:13px;font-weight:400}.layer-selector select,.layer-selector input[type=text]{background:#333;color:#fff;border:1px solid #555;padding:8px 10px;border-radius:4px}.layer-selector select:focus,.layer-selector input[type=text]:focus{outline:none;border-color:#4caf50}.pad-layout{background:#1a1a1a;padding:20px;border-radius:8px;border:1px solid #333;margin-bottom:5px}.encoders-container{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:15px;margin-bottom:0}.matrix-container{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.pad-btn{background:#2d2d2d;color:#aaa;border:2px solid #444;border-radius:8px;padding:10px;text-align:center;cursor:pointer;transition:.2s;font-family:monospace;user-select:none;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;line-height:1.4}.pad-btn:hover{background:#3d3d3d;border-color:#666}.pad-btn.active{border-color:#4caf50;background:#2e4a2e;color:#fff;box-shadow:0 0 10px #4caf5080}.pad-btn strong{font-size:14px;margin-bottom:3px;color:#ddd}.pad-btn.active strong{color:#fff}.pad-btn .type-label{font-size:10px;color:#ff9800;margin-bottom:2px}.pad-btn.active .type-label{color:#ffd54f}.pad-btn .value-label{font-size:11px;color:#88b8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.pad-btn.active .value-label{color:#afa}.pad-btn.encoder strong i{margin-left:3px;color:#0af}.pad-btn.encoder.active{background:#003d66;border-color:#0af;box-shadow:0 0 10px #00aaff80}.pad-btn.encoder strong{font-size:11px;margin-bottom:1px}.pad-btn.encoder .type-label{font-size:9px}.pad-btn.encoder .value-label{font-size:10px}.edit-panel{background:#222;border:1px solid #444;padding:20px;border-radius:8px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;color:#ccc}.form-group input[type=text],.form-group select{width:100%;padding:10px;background:#111;border:1px solid #555;color:#0f0;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box}.shortcut-catcher{display:flex;gap:10px}.shortcut-catcher input{flex-grow:1;cursor:pointer}.shortcut-catcher select{width:150px}.seq-item{display:flex;gap:10px;margin-bottom:10px;background:#333;padding:10px;border-radius:4px;align-items:center}.seq-item select{width:120px}.seq-item .btn-del{background:#f44336;padding:5px 10px;border:none;color:#fff;border-radius:3px;cursor:pointer}.save-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease}.save-overlay.show{opacity:1;pointer-events:auto}.save-box{background:#1e1e1e;padding:40px 60px;border-radius:15px;text-align:center;border:2px solid #4CAF50;box-shadow:0 0 40px #4caf5066;transform:scale(.5);transition:transform .4s cubic-bezier(.175,.885,.32,1.275)}.save-overlay.show .save-box{transform:scale(1)}.save-box i{font-size:70px;color:#4caf50;margin-bottom:15px;text-shadow:0 0 20px rgba(76,175,80,.5)}.save-box h2{color:#fff;margin:0 0 10px;font-size:28px}.save-box p{color:#aaa;margin:0;font-size:16px}