
:root{--navy:#092d50;--navy2:#061e36;--blue:#0d5f92;--orange:#f58220;--teal:#009a9a;--paper:#f5f7f9;--ink:#142536;--muted:#647484;--line:#dce4ea;--white:#fff;--shadow:0 20px 50px rgba(5,31,56,.13)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans Thai","Tahoma",sans-serif;color:var(--ink);background:#fff}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.top{background:var(--navy2);color:#dbe8f2;font-size:13px}.top .wrap{display:flex;justify-content:space-between;padding:9px 0}.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid #edf1f4}.nav .wrap{height:76px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--navy);font-size:18px}.brandmark{width:45px;height:45px;background:linear-gradient(135deg,var(--navy),var(--teal));border-radius:14px;color:white;display:grid;place-items:center;font-size:21px}.navlinks{margin-left:auto;display:flex;gap:25px;font-size:14px;font-weight:700}.btn{border:0;border-radius:10px;padding:13px 20px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn.primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(245,130,32,.28)}.btn.dark{background:var(--navy);color:#fff}.hero{background:linear-gradient(115deg,var(--navy2) 0%,var(--navy) 62%,#0a526a 100%);color:white;min-height:610px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:550px;height:550px;border:90px solid rgba(255,255,255,.04);border-radius:50%;right:-140px;top:-100px}.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:610px;position:relative;z-index:2}.eyebrow{color:#70d3cd;text-transform:uppercase;letter-spacing:2px;font-weight:800;font-size:12px}.hero h1{font-size:clamp(39px,5vw,66px);line-height:1.1;margin:17px 0}.hero p{color:#d3e2ec;font-size:18px;line-height:1.8;max-width:640px}.actions{display:flex;gap:12px;margin-top:30px}.visual{position:relative;height:460px}.roll{position:absolute;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle at 52% 48%,#fff 0 17%,#e4eaed 18% 26%,#fff 27% 54%,#cfd8dc 55% 58%,#fff 59%);right:25px;top:72px;box-shadow:0 35px 70px #00101f}.label{position:absolute;background:#fff;color:var(--navy);padding:20px 25px;border-radius:6px;box-shadow:var(--shadow);transform:rotate(-7deg);left:12px;top:135px;width:260px}.barcode{height:48px;background:repeating-linear-gradient(90deg,#17202a 0 3px,transparent 3px 6px,#17202a 6px 8px,transparent 8px 11px);margin-top:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:-48px;position:relative;z-index:4}.stat{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:24px}.stat b{display:block;color:var(--orange);font-size:28px}.section{padding:90px 0}.soft{background:var(--paper)}.sectionhead{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px}.sectionhead h2{font-size:37px;margin:8px 0;color:var(--navy)}.sectionhead p{color:var(--muted);max-width:580px}.category-grid,.product-grid,.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cat{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;transition:.2s;cursor:pointer}.cat:hover,.cat.active{border-color:var(--orange);transform:translateY(-4px);box-shadow:var(--shadow)}.cat .icon{font-size:30px}.cat h3{color:var(--navy);margin-bottom:8px}.cat p{color:var(--muted);font-size:14px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}.filter{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 15px;cursor:pointer}.filter.active{background:var(--navy);color:white}.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card img{width:100%;height:230px;object-fit:cover}.cardbody{padding:22px}.tag{display:inline-block;color:var(--orange);font-weight:800;font-size:12px;margin-bottom:8px}.card h3{color:var(--navy);margin:4px 0 10px}.card p{color:var(--muted);font-size:14px;line-height:1.7}.textlink{color:var(--blue);font-weight:800;cursor:pointer}.feature{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.feature-image{height:470px;border-radius:26px;background:linear-gradient(145deg,rgba(9,45,80,.1),rgba(0,154,154,.15)),url('https://paperrollthermalpos.com/assets/img/product-banner.jpg') center/cover;box-shadow:var(--shadow)}.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.check{background:#fff;border:1px solid var(--line);padding:17px;border-radius:12px;font-weight:700}.quote{background:linear-gradient(110deg,var(--navy2),var(--navy));color:white}.quote-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}.quote h2{font-size:42px}.quote p{color:#cfdeea;line-height:1.8}.form{background:#fff;color:var(--ink);padding:32px;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.2)}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fbfcfd}.field.full{grid-column:1/-1}.contact-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:40px}.contact-card{background:var(--paper);border-radius:20px;padding:30px}.map{min-height:380px;border:0;border-radius:20px;width:100%}.footer{background:var(--navy2);color:#aebfcd;padding:40px 0}.footer .wrap{display:flex;justify-content:space-between;gap:20px}.modal{display:none;position:fixed;inset:0;background:rgba(3,17,29,.72);z-index:80;padding:30px;overflow:auto}.modal.open{display:grid;place-items:center}.modalbox{width:min(780px,100%);background:#fff;border-radius:22px;padding:30px;position:relative}.close{position:absolute;right:18px;top:18px;border:0;background:#edf2f5;border-radius:50%;width:38px;height:38px;cursor:pointer}.toast{position:fixed;right:25px;bottom:25px;background:#083e37;color:white;padding:16px 22px;border-radius:12px;display:none;z-index:100}.toast.show{display:block}.admin{background:#eef2f5;min-height:100vh}.adminbar{background:var(--navy2);color:white;padding:16px 0}.adminbar .wrap{display:flex;align-items:center;justify-content:space-between}.adminmain{padding:35px 0 70px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.tab{border:0;background:#fff;border-radius:9px;padding:11px 16px;font-weight:800;cursor:pointer}.tab.active{background:var(--orange);color:white}.panel{display:none}.panel.active{display:block}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metric{background:#fff;padding:22px;border-radius:15px}.metric b{font-size:32px;color:var(--navy)}.tablebox{background:#fff;border-radius:16px;overflow:auto}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 16px}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:14px;font-size:13px}.table th{background:#f7f9fa;color:var(--muted)}.mini{border:0;padding:7px 10px;border-radius:7px;cursor:pointer;margin-right:4px}.edit{background:#e8f3f9;color:#075783}.delete{background:#fdebec;color:#a51c2b}.adminform{display:grid;grid-template-columns:1fr 1fr;gap:14px}.adminform .full{grid-column:1/-1}.adminform input,.adminform textarea,.adminform select{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px}.drawer{display:none;background:#fff;padding:25px;border-radius:16px;margin-bottom:18px}.drawer.open{display:block}@media(max-width:850px){.navlinks{display:none}.hero .wrap,.feature,.quote-grid,.contact-grid{grid-template-columns:1fr}.visual{display:none}.hero .wrap{min-height:560px}.stats,.category-grid,.product-grid,.article-grid{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr 1fr}}@media(max-width:560px){.top .wrap{display:block}.stats,.category-grid,.product-grid,.article-grid,.formgrid,.adminform{grid-template-columns:1fr}.field.full,.adminform .full{grid-column:auto}.section{padding:65px 0}.sectionhead{display:block}.hero h1{font-size:39px}.footer .wrap{display:block}.wrap{width:min(100% - 28px,1180px)}}