.elementor-36 .elementor-element.elementor-element-e5a0f01{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-e5a0f01 *//* meshop.live Homepage */ body{margin:0;background:#F2F3F5} .hm{--ink:#101319;--steel:#171B22;--steel2:#222731;--line:rgba(255,255,255,.1);--lined:rgba(16,19,25,.1);--amber:#FFB000;--amber2:#FF7A1A;--paper:#F2F3F5;--muted:#5A616C;--display:'Chakra Petch',system-ui,sans-serif;--body:'IBM Plex Sans Thai',system-ui,sans-serif;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65;overflow-x:hidden;width:100%} .hm *{box-sizing:border-box;margin:0;padding:0} .hm img{display:block;max-width:100%} .hm a{color:inherit;text-decoration:none} .hm .wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px} .hm h1,.hm h2,.hm h3,.hm h4{font-family:var(--display);font-weight:700;line-height:1.2;color:inherit} .hm .eyebrow{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#B37A00;display:flex;align-items:center;gap:10px} .hm .eyebrow::before{content:'';width:22px;height:2px;background:currentColor} .hm .hd{position:sticky;top:0;z-index:80;background:rgba(16,19,25,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);color:#fff} .hm .hd-in{display:flex;align-items:center;gap:18px;height:64px} .hm .brand{display:flex;align-items:center;gap:10px;flex:none} .hm .brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-content:center;background:linear-gradient(135deg,var(--amber),var(--amber2));color:#101319;font-family:var(--display);font-weight:700;font-size:20px} .hm .brand-name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em} .hm .brand-name b{color:var(--amber)} .hm .nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0} .hm .nav::-webkit-scrollbar{display:none} .hm .nav a{white-space:nowrap;font-size:15px;padding:8px 14px;border-radius:8px;color:rgba(255,255,255,.72);transition:.15s} .hm .nav a:hover{color:#fff;background:rgba(255,255,255,.06)} .hm .nav a.on{color:#101319;background:var(--amber);font-weight:600} .hm .icon-btn{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:transparent;color:#fff;display:grid;place-content:center;cursor:pointer} .hm .icon-btn svg{width:19px;height:19px} .hm .icon-btn:focus-visible,.hm button:focus-visible,.hm a:focus-visible,.hm input:focus-visible{outline:3px solid var(--amber);outline-offset:2px} .hm .searchbar{display:none;border-top:1px solid var(--line);padding:12px 0} .hm .searchbar.open{display:block} .hm .searchbar form{display:flex;gap:8px} .hm .searchbar input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;padding:0 14px;font:inherit} .hm .searchbar button{height:44px;padding:0 18px;border-radius:10px;border:none;background:var(--amber);color:#101319;font-family:var(--display);font-weight:600;cursor:pointer} .hm .hero{position:relative;color:#fff;padding:56px 0 72px;background:radial-gradient(760px 420px at 85% 0%,rgba(255,176,0,.16),transparent 60%),radial-gradient(600px 360px at 0% 100%,rgba(255,122,26,.12),transparent 60%),linear-gradient(180deg,var(--ink),var(--steel))} .hm .hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%)} .hm .hero-grid{position:relative;display:grid;gap:40px;grid-template-columns:1fr;align-items:center} @media(min-width:940px){.hm .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}} .hm .hero .eyebrow{color:var(--amber)} .hm .hero h1{font-size:clamp(34px,6vw,60px);margin:16px 0 14px;letter-spacing:-.01em} .hm .hero h1 span{display:block;color:var(--amber)} .hm .hero .lead{font-size:17px;color:rgba(255,255,255,.72);max-width:52ch} .hm .hero-search{margin-top:26px;display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:6px 6px 6px 16px;max-width:520px;box-shadow:0 18px 40px rgba(0,0,0,.25)} .hm .hero-search svg{width:20px;height:20px;color:#8A9099;flex:none} .hm .hero-search input{flex:1;min-width:0;border:none;outline:none;font:inherit;font-size:16px;color:var(--ink);background:transparent;height:44px} .hm .hero-search button{height:46px;padding:0 22px;border:none;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:600;font-size:16px;cursor:pointer} .hm .hero-search button:hover{background:#262C36} .hm .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .hm .pills span{font-size:13px;color:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:100px;padding:6px 14px} .hm .pills b{font-family:var(--display);color:var(--amber);margin-right:4px} .hm .feat{display:block;background:#fff;color:var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35);transition:transform .25s} .hm .feat:hover{transform:translateY(-4px)} .hm .feat-img{position:relative;aspect-ratio:16/10;background:#fff} .hm .feat-img img{width:100%;height:100%;object-fit:contain;padding:5%} .hm .feat-tag{position:absolute;top:14px;left:14px;background:var(--amber);color:#101319;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;padding:6px 12px;border-radius:6px} .hm .feat-body{padding:20px 22px 22px;border-top:1px solid var(--lined)} .hm .feat-body h3{font-size:clamp(19px,2.4vw,23px);margin-bottom:8px} .hm .feat-body p{font-size:15px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hm .feat-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:14px;color:var(--muted)} .hm .feat-foot b{font-family:var(--display);color:var(--ink)} .hm .sec{padding:64px 0} .hm .sec.alt{background:#fff} .hm .sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap} .hm .sec-hd h2{font-size:clamp(24px,4vw,36px);margin-top:10px} .hm .sec-hd.center{flex-direction:column;align-items:center;text-align:center} .hm .sec-hd .all{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);border-bottom:2px solid var(--amber);padding-bottom:2px} .hm .tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .hm .tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:170px;border-radius:16px;overflow:hidden;background:var(--ink);color:#fff;padding:22px;isolation:isolate;transition:transform .2s} .hm .tile:hover{transform:translateY(-4px)} .hm .tile img{position:absolute;right:-8%;bottom:-10%;width:62%;height:auto;opacity:.95;z-index:-1;background:#fff;border-radius:14px;padding:4%;transform:rotate(-6deg);transition:transform .3s} .hm .tile:hover img{transform:rotate(-2deg) scale(1.04)} .hm .tile::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--ink) 35%,rgba(16,19,25,.2))} .hm .tile h3{font-size:22px} .hm .tile span{font-size:14px;color:rgba(255,255,255,.7)} .hm .tile .go{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--amber);margin-top:18px} .hm .tile.all-tile{background:linear-gradient(135deg,var(--amber),var(--amber2));color:#101319} .hm .tile.all-tile::after{display:none} .hm .tile.all-tile span,.hm .tile.all-tile .go{color:#101319} .hm .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .hm .chip{font-family:var(--display);font-weight:600;font-size:14px;padding:9px 16px;border-radius:100px;border:1.5px solid var(--lined);background:#fff;color:var(--ink);cursor:pointer;transition:.15s} .hm .chip:hover{border-color:var(--ink)} .hm .chip[aria-selected='true']{background:var(--ink);color:#fff;border-color:var(--ink)} .hm .chip i{font-style:normal;opacity:.6;margin-left:6px} .hm .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .hm .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lined);border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s} .hm .sec.alt .card{background:var(--paper)} .hm .card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(16,19,25,.12)} .hm .card-img{position:relative;display:block;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--lined)} .hm .card-img img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform .35s} .hm .card:hover .card-img img{transform:scale(1.05)} .hm .noimg{position:absolute;inset:0;display:grid;place-content:center;color:#9AA0A8;font-size:14px;background:repeating-linear-gradient(45deg,#F0F1F3 0 12px,#E8EAED 12px 24px)} .hm .badge{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px} .hm .card-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 16px} .hm .card-body h3{font-size:17px;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hm .card-body h3 a:hover{color:#B37A00} .hm .card-body p{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px} .hm .card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding-top:12px;border-top:1px dashed var(--lined)} .hm .more{font-family:var(--display);font-weight:600;color:var(--ink)} .hm .more:hover{color:#B37A00} .hm .more-wrap{text-align:center;margin-top:28px} .hm .btn-ghost{font-family:var(--display);font-weight:600;font-size:16px;padding:13px 28px;border-radius:10px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer} .hm .btn-ghost:hover{background:var(--ink);color:#fff} .hm .empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--muted);background:#fff;border:1px dashed var(--lined);border-radius:14px} .hm .row-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px} .hm .row-scroll .card{scroll-snap-align:start} .hm .how{background:var(--ink);color:#fff} .hm .how .eyebrow{color:var(--amber)} .hm .steps{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:800px){.hm .steps{grid-template-columns:repeat(3,1fr)}} .hm .step{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))} .hm .step b{display:block;font-family:var(--display);font-size:34px;color:var(--amber);line-height:1;margin-bottom:14px} .hm .step h3{font-size:19px;margin-bottom:8px} .hm .step p{font-size:15px;color:rgba(255,255,255,.66)} .hm .ft{background:#0B0D11;color:rgba(255,255,255,.62);padding:48px 0 0;font-size:14px} .hm .ft-grid{display:grid;gap:30px;grid-template-columns:1fr} @media(min-width:800px){.hm .ft-grid{grid-template-columns:1.3fr 1fr 1.3fr}} .hm .ft .brand{color:#fff;margin-bottom:12px} .hm .ft h4{color:#fff;font-size:15px;margin-bottom:12px;letter-spacing:.04em} .hm .ft ul{list-style:none;display:grid;gap:8px} .hm .ft ul a:hover{color:var(--amber)} .hm .disc{border:1px dashed var(--line);border-radius:10px;padding:14px} .hm .ft-bot{margin-top:36px;padding-top:18px;padding-bottom:22px;border-top:1px solid var(--line);font-size:13px} .hm .sk{border-radius:16px;background:linear-gradient(90deg,#E6E8EB 25%,#F2F3F5 50%,#E6E8EB 75%);background-size:200% 100%;animation:hmsk 1.2s linear infinite} .hm .hero .sk{background:linear-gradient(90deg,#1E232B 25%,#2A303A 50%,#1E232B 75%);background-size:200% 100%} .hm .sk-feat{aspect-ratio:16/13} .hm .sk-tile{height:170px} .hm .sk-card{height:360px} @keyframes hmsk{to{background-position:-200% 0}} .hm .rise{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease} .hm .rise.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.hm *{animation:none!important;transition:none!important}.hm .rise{opacity:1;transform:none}}/* End custom CSS */