{"container":{"header":{},"navbar":{"_id":"de135178-9ff1-428b-b634-6a2c164d2ef3","component":"navbar01","data":{"bgcolor":{"r":"216","g":"216","b":"216","a":"1"},"textcolor":{"r":"0","g":"0","b":"0","a":"1"},"carticon":"1","css":{"cartbadge_container":"height: 100%;\npadding: 1px 5px;\nborder-radius: 0px;\nbackground-color: none;\nborder-bottom: 2px solid rgb(255,255,255,1);\nmargin-left: 3px !important;\ncolor :rgb(0,0,0,0.2) !important;\n\n#navbar-badgecount {\ncolor:rgb(255, 255, 255);\nfont-weight: bold;\n}\n","cartbadge_count":"color:blue;\nfont-size:20px;\n","logo":"justify-content:start;\npadding:10px 30px ;\nborder-bottom:1px solid rgb(0,0,0,0.1) ;\nheight:65px;\n\n#navlogo{\nwidth:150px;\nposition: absolute;\ntop:-8px;\n}\n\n","containerinside":"width:100%;\nmargin:auto;\nheight:100%;\nbox-shadow: rgba(0, 0, 0, 0.1) 0px 6px 6px;\n#menu-content-container{\ndisplay:flex;\n\n}\n\n#member-content-container .navtext{\npadding:10px 15px;\n/* background:#000000; */\npadding:12px 25px !important;\nmargin:0px !important;\nborder-right:none !important;\ncolor:#ffffff !important;\nborder-radius: 50px;\n}\n#member-content-container .navtext:hover{\n background:none;\n}\n\n#member-content-container{\n top:10%;\n right: 12%;\n}\n#menu-content-container{\n height: 85px;\n align-items: center;\n}","container":"top:0;\r\nposition: relative;\r\n/* background: rgb(65, 54, 119, 0.97) !important; */\r\nbackground: linear-gradient(180deg, rgb(65 54 119) 43%,rgb(255,255,255,1) 0%);\r\n;\r\n\r\n#cart-content-container{\r\nposition: absolute;\r\ntop: 12%;\r\nright: 2.5%;\r\n\r\n}\r\n#searchbox{\r\nposition: absolute;\r\ntop: 32%;\r\nleft: 50%;\r\ntransform: translate(-50%,-35%);\r\n\r\n}\r\n#member-content-container{\r\nposition: absolute;\r\ntop: 6% !important;\r\nright: 12%;\r\nbackground-color: #F5C74F;\r\nborder-radius: 100px;\r\n}","menuitem":" cursor: pointer;\n height: 100%;\n font-size: 15px;\n /* border-right: 1px solid rgb(0,0,0,0.1);\n border-left: 1px solid rgb(0,0,0,0.1); */\n\n.navtext{\nposition: relative;\ndisplay: block;\ntext-transform: uppercase;\nmargin:0px;\npadding:10px 40px;\ntext-decoration: none;\ncolor: #102229;\nheight:100%;\nfont-family: sans-serif;\ntransition: .5s;\nz-index: 1;\n }\n\n/* .navtext:hover {\n color:#ffffff;\n \n }\n.navtext::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n transform: scaleY(2);\n opacity: 0;\n transition: .3s;\n}\n.navtext::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #102229;\n transform: scale(0);\n opacity: 0;\n transition: .3s;\n z-index: -1;\n }\n.navtext:hover::before {\n transform: scaleY(1);\n opacity: 1;\n}\n.navtext:hover::after {\n transform: scaleY(1);\n opacity: 1;\n} */","carticon":".carticon {\ncolor:rgb(255, 255, 255);\nfont-size:1.75em;\ntransition: font-size 0.5s linear;\nmargin-left: 20px;\ncursor: pointer;\nmargin-top:1.1px;\n}\n\n.carticon:hover {\ncolor:rgb(255, 226, 4);\n}","searchbox":"#searchbox {\n width: 600px;\n margin:0px;\n display: inline-block;\n border: none;\n border-radius: 50px;\n box-sizing: border-box;\n padding:8px 5px 8px 10px;\n transition: all 0.25s ease-in-out;\n background: #ffffff;\n border: 1px solid rgb(0,0,0,0.5);\n color: #144E0D;\n height:35px;\n}\n#searchbox:focus{\n background-color: none;\n outline: none;\n transition: all 0.6s ease;\n \n}\n@media only screen and (max-width: 900px) {\n #searchbox {\nwidth: 300px !important;\n}\n}\n@media only screen and (max-width: 1024px) {\n #searchbox {\nwidth: 400px;\n}\n}","searchbox_suggest":"z-index: 99;\r\nposition: absolute;\r\ntop: 19%;\r\nleft: 50%;\r\ntransform: translate(-50%, -50%);\r\n\r\n\r\n.search-link-container {\r\n color: #161616;\r\n text-decoration: none;\r\n}\r\n\r\n.search-droplist-price {\r\n color: #D14D72;\r\n font-size: 14px !important;\r\n}\r\n.react-autosuggest__suggestions-list {\r\n margin: 0;\r\n padding: 0px;\r\n list-style-type: none;\r\n border-radius:10px;\r\n background-color:white;\r\n box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);\r\n padding: 10px;\r\n\r\n}\r\n\r\n.search-droplist {\r\n padding:10px 5px;\r\n color: #000000;\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n.search-droplist:after {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 3px;\r\n bottom: -1px;\r\n left: -1px;\r\n transform: scaleX(0);\r\n background: #EFECEC ;\r\n transform-origin: bottom right;\r\n transition: transform 0.5s ease-out;\r\n}\r\n.search-droplist:hover::after {\r\n transform: scaleX(1);\r\n transform-origin: bottom left;\r\n}\r\n\r\n.search-textline-droplist {\r\n max-width: 400px;\r\n display: inline-block;\r\n text-overflow: ellipsis; /* enables ellipsis */\r\n white-space: nowrap; /* keeps the text in a single line */\r\n overflow: hidden; /* keeps the element from overflowing its parent */\r\n}\r\n\r\n.search-value-highlight {\r\n color: #2D9596;\r\n font-weight:600;\r\n background-color:#F5F7F8;\r\n padding: 0;\r\n}\r\n\r\n.search-droplist-name-text {\r\n font-size: 18px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n}\r\n\r\n.search-droplist-name-container {\r\n display: flex;\r\n padding: 0px;\r\n}","mobilecontainer":" padding: 16px 35px 10px 35px;\r\n width: 100%;\r\n background-color: #413677 !important;\r\n text-align: end;\r\n border-bottom: 1px solid rgb(0 0 0 / 40%);\r\n z-index:100;\r\n top: 0;\r\n#navbar-content-mobile-toggle {\r\n color: #ffffff;\r\n transition: all 0.5s ease;\r\n transform: rotate(0deg);\r\n font-size:1.6em !important;\r\n}\r\n#navbar-content-mobile-toggle-active {\r\n transition: all 0.5s ease;\r\n transform: rotate(180deg);\r\n color: #ffffff !important;\r\n font-size:1.6em !important;\r\n}\r\n.navbar-mobile-btn {\r\ndisplay: inline-block;\r\n padding: 10px;\r\n margin-bottom: 4px;\r\n border: none;\r\n width: 100%;\r\n background:none;\r\n color: #ffffff;\r\n font-weight:100;\r\n font-size: 22px;\r\nborder-bottom: 1px solid rgb(0 0 0 / 5%);\r\nposition: relative;\r\ntransition: all ease-in-out 0.1s;\r\n}\r\n.navbar-mobile-btn:before {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n width: 0px;\r\n height: 1.5px;\r\n background: #ffffff;\r\n transform: translateX(-50%);\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n }\r\n.navbar-mobile-btn:hover{\r\nwidth: 100%;\r\n\r\n}\r\n.navbar-mobile-btn:hover:before{\r\nwidth: 100%;\r\n}\r\n\r\n#navbar-mobile-cart-icon-container {\r\n padding-left:10px;\r\n}\r\n#navbar-mobile-cart-icon {\r\n font-size:20px;\r\nvertical-align:top;\r\n}\r\n\r\n#navbar-mobile-search-container {\r\n margin-top: 50px;\r\n margin-bottom: 10px;\r\n padding: 4px;\r\n text-align: center;\r\n}\r\n#navbar-mobile-search-input {\r\n width:100%;\r\nborder-top: none;\r\nborder-left: none;\r\nborder-right: none;\r\nborder-bottom: 1px solid rgb(0 0 0 / 5%);\r\noutline: none;\r\ntext-align:center;\r\npadding:10px;\r\n}"},"align":"center","maxwidth":"1900","nolimit_maxwidth":"false","isstick":"true","margin":"145","logo":{"name":"m4server-logo3-02_1723706134.png","path":"logo","position":"top"}},"componentid":"de135178-9ff1-428b-b634-6a2c164d2ef3"},"footer":{"_id":"5f1d2e3d9fbb9bf55863157c","component":"footer_regular","data":{"title":"

DREAM BIG WORK HARD

","coverimg":{"name":"bot-01_1683278654.png","path":"footer"},"customcss":"@media only screen and (max-width: 2103px) {\n#footer_comp_regular_block1 {\nbackground:#17153B;\nspan{\n font-size: min(max(24px, 1.1vw), 28px) !important;\n}\n}\n}\n\n@media only screen and (max-width: 2103px) {\n#footer_comp_regular_block2 {\nbackground:#17153B;\nspan\n{\n font-size: min(max(24px, 1.1vw), 28px) !important;\n}\n}\n}\n\n@media only screen and (max-width: 2103px) {\n#footer_comp_regular_block3 {\nbackground:#17153B;\nspan\n{\n font-size: min(max(24px, 1.1vw), 28px) !important;\n}\n}\n}\nspan,p,strong{\n-webkit-font-smoothing: antialiased;\n}\n\n#footer_comp_regular_block1{\npadding-top:20px;\n}\n#footer_comp_regular_block2{\npadding-top:20px;\n}\n#footer_comp_regular_block3{\npadding-top:20px;\n}","block2":"

$\"\"$ $\"\"$ $\"\"$

","block3":"

$\"\"$

","block1":"

$\"\"$

","script":{"block2":{"data":"","dataid":"","html":"","position":"top"},"block3":{"data":"","dataid":"","html":"

$\"กรมพัฒนาธุรกิจการค้า$

","position":"bottom"}},"noshow_coverimg":"true"},"componentid":"5f1d2e3d9fbb9bf55863157c"}},"color":[{"name":"primary","color":{"r":"227","g":"235","b":"238","a":"1"}},{"name":"secondary","color":{"r":"150","g":"150","b":"150","a":"1"}}],"storedata":{"title":"M4Server.com","description":"แหล่งรวมเซิร์ฟเวอร์ เน็ตเวิร์ค คอมพิวเตอร์ โน้ตบุ๊ค อินเตอร์แบรนด์","fbmessenger":null,"fbmessengername":null,"fbpage":null,"fbpagename":null,"lineurl":"https://line.me/ti/p/~mtsystem","lineid":null,"linename":"id : mtsystem ","tel":"099-320-1152","telcontactname":"ณัฐวุฒิ : ","mobile":null,"mobilecontactname":null,"email":"sale-1@m-techsystem.com","emailcontactname":":","gtag":"G-XCCBP47QC5","pricezatag":null,"slogan":"แหล่งรวมเซิร์ฟเวอร์ เน็ตเวิร์ค คอมพิวเตอร์ โน้ตบุ๊ค อินเตอร์แบรนด์","_id":"672addd0271e729e75029bd0","store_type":"it"},"product":{"prodcardimgsize":{"width":"170","height":"170"},"proddesimgsize":{"width":"250","height":"250"}}}

แท็ก Colour