:root{--bg:#fbfdf8;--paper:#fff;--ink:#2d2b2b;--muted:#9c8e94;--line:#deefd9;--accent:#6dcc4a;--accent2:#9bea4d;--accent-dark:#2f9346;--soft:#f3fbef;--soft2:#eaf7e4;--danger:#ff675f;--shadow:0 7px 20px rgba(87,135,73,.11)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#fff 0,#f8fcf5 42%,#f4faef 100%);color:var(--ink);font-family:'Kanit',sans-serif;font-size:14px}a{color:inherit}.ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none}.ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.site-header{height:72px;background:rgba(255,255,255,.97);border-bottom:1px solid #e9f2e6;position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}.header-inner{width:min(1320px,94%);height:100%;margin:auto;display:flex;align-items:center;gap:26px}.brand{width:126px;display:flex;align-items:center}.brand img{width:124px;height:58px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:6px;flex:1}.main-nav a{height:40px;padding:0 14px;border-radius:10px;display:flex;align-items:center;text-decoration:none;color:#927f85;font-weight:600}.main-nav a:hover,.main-nav a.active{background:#eef9e9;color:#4ca644}.chev{margin-left:7px}.account-area{display:flex;align-items:center;gap:9px}.cart-btn{width:43px;height:43px;border:1px solid #d9ecd4;background:#fff;border-radius:14px;display:grid;place-items:center;color:#66c84e;text-decoration:none;box-shadow:0 4px 18px rgba(98,180,80,.12)}.user-menu-wrap{position:relative}.user-pill{height:46px;min-width:184px;border:1px solid #d8ecd3;background:#fff;border-radius:16px;padding:4px 8px 4px 5px;display:flex;align-items:center;gap:8px;font:inherit;cursor:pointer;box-shadow:0 4px 18px rgba(98,180,80,.12)}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6b77d8,#7d8fea);color:#fff;border:2px solid #e6ebff;font-weight:700}.avatar.big{width:44px;height:44px;border-radius:13px}.user-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;flex:1}.user-copy b{color:#53b33f}.user-copy small{margin-top:3px;color:#222;font-weight:600}.menu-arrow{width:27px;height:27px;border-radius:50%;border:1px solid #d8ead4;display:grid;place-items:center;color:#5cb94a}.user-dropdown{position:absolute;top:57px;right:0;width:318px;background:#fff;border:1px solid #d6ead2;border-radius:14px;box-shadow:0 14px 36px rgba(74,116,63,.17);display:none;overflow:hidden}.user-dropdown.show{display:block}.drop-head{padding:14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e9f1e7}.drop-head div{display:flex;flex-direction:column}.drop-head small{color:#787075;margin-top:2px}.user-dropdown>a{display:flex;align-items:center;gap:10px;padding:11px 16px;text-decoration:none;color:#5f5459}.user-dropdown>a:hover{background:#f4faef;color:#3a9b43}.drop-sep{height:1px;background:#e7efe5}.logout-link{color:#ff6d65!important}.login-link,.header-join{font-weight:700;text-decoration:none}.login-link{color:#5a9c4d}.header-join{background:linear-gradient(90deg,#5fc545,#86dc48);color:#fff;padding:10px 14px;border-radius:10px}.page-shell{width:min(1260px,92%);margin:26px auto 0}.alert{padding:12px 15px;border:1px solid #d9e9d6;background:#f5fbf2;border-radius:10px;margin-bottom:16px}.alert.error{border-color:#ffc9c7;background:#fff1f1}.alert.warn{border-color:#f3dfaa;background:#fff8df}.alert.success{border-color:#cce9c5;background:#effbea}.hero-banner{height:405px;border-radius:21px;position:relative;overflow:hidden;background:linear-gradient(130deg,#1d7740 0%,#55b93f 42%,#a9e43c 100%);box-shadow:0 16px 38px rgba(72,151,59,.18);padding:34px 42px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center}.hero-banner:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.38),transparent 18%),radial-gradient(circle at 18% 78%,rgba(255,255,255,.13),transparent 21%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 8px,transparent 8px 20px)}.hero-copy{z-index:2;color:#fff}.hero-kicker{display:inline-flex;padding:6px 12px;border-radius:999px;background:#ebff90;color:#2f7742;font-weight:800}.hero-copy h1{font-size:clamp(48px,5.8vw,80px);line-height:.88;margin:12px 0 0;text-shadow:0 5px 0 rgba(0,77,36,.18)}.hero-copy h1 span{color:#efff76}.hero-copy h2{font-size:29px;margin:12px 0 5px}.hero-copy p{font-size:15px;max-width:560px;color:#efffed;line-height:1.65}.hero-actions{display:flex;gap:12px;margin-top:18px}.hero-btn{background:#fff;color:#3a9945;text-decoration:none;padding:11px 18px;border-radius:11px;font-weight:800}.hero-btn.alt{background:#246636;color:#fff}.hero-art{z-index:2;display:flex;align-items:center;justify-content:center}.hero-art img{width:min(520px,100%);filter:drop-shadow(0 24px 24px rgba(21,65,33,.28))}.hero-dots{position:absolute;bottom:13px;left:50%;display:flex;gap:5px;z-index:3}.hero-dots i{width:8px;height:8px;background:rgba(255,255,255,.55);border-radius:20px}.hero-dots i.active{width:23px;background:#fff}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:27px}.stat-card{height:84px;border:1px solid #e1efdc;border-radius:14px;background:linear-gradient(155deg,#fff,#f2fbeed9);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;width:170px;height:72px;border-radius:50%;left:30px;bottom:-48px;background:rgba(124,220,95,.11)}.stat-card small{display:block;color:#9e8f95}.stat-card strong{font-size:26px;color:#62c446;line-height:1.15}.stat-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #daecd5;color:#69c650;font-size:22px}.recent-strip,.section-box{margin-top:24px;background:#fff;border:1px solid #e0ecdd;border-radius:16px;box-shadow:var(--shadow)}.recent-strip{padding:15px 16px}.recent-strip h3{margin:0 0 13px}.recent-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.recent-item{display:flex;gap:9px;align-items:center;min-width:0}.recent-item img{width:42px;height:42px;object-fit:cover;border-radius:9px;background:#edf6e9}.recent-item div{min-width:0}.recent-item b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-item small{color:#96868d}.qty-pill{background:#eef9e9;color:#52ad44;border-radius:999px;padding:1px 6px;margin-left:4px}.section-box{padding:18px}.section-title,.section-head{display:flex;align-items:center;justify-content:space-between}.section-title{margin-bottom:18px}.section-title h2,.section-head h2{margin:0}.filters input{width:230px;padding:10px 12px;border:1px solid #d9e9d6;border-radius:10px;font:inherit;outline:none}.product-grid,.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card,.card.product{position:relative;border:1px solid #dcebd8;border-radius:9px;background:#fff;overflow:hidden}.product-card .img-wrap,.product img{width:100%;height:180px;object-fit:cover;background:#edf6e9}.product-card .img-wrap img{width:100%;height:100%;object-fit:cover}.sale-tag{position:absolute;top:9px;left:9px;z-index:2;background:#ff7028;color:#fff;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700}.product-card-body{padding:11px 13px 13px}.product-card h3,.product h3{font-size:14px;margin:0 0 6px}.product-divider{height:1px;background:#ecf0eb;margin:7px 0 9px}.product-price,.price{font-size:19px;color:#62c546;font-weight:800}.old-price{font-size:11px;color:#9e9698;text-decoration:line-through;margin-left:5px}.buy-btn,.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:43px;margin-top:10px;border:0;border-radius:10px;background:linear-gradient(90deg,#5fc844,#85db45);color:#fff;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;padding:10px 14px}.btn.mini{width:auto;min-height:36px;margin:0;padding:7px 12px}.product-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:#998a91}.stock-good{color:#31a543}.card{background:#fff;border:1px solid #dcebd8;border-radius:14px;padding:20px;box-shadow:var(--shadow)}.form{max-width:560px;margin:30px auto}.form .card{padding:27px}.form h2{margin-top:0}.form label{display:block;font-weight:600;margin:12px 0 6px}.form input,.form textarea,.form select,.table input,.table select{width:100%;padding:12px 13px;border:1px solid #d9e8d5;border-radius:9px;background:#fff;font:inherit;outline:none}.form input:focus,.form textarea:focus,.form select:focus{border-color:#71cb5a;box-shadow:0 0 0 3px rgba(113,203,90,.12)}.muted{color:#95888d}.balance{background:#edf9e8;color:#4bac42;border:1px solid #d3eaca;border-radius:999px;padding:7px 11px;font-weight:700}.table-wrap{overflow:auto;border:1px solid #dcebd8;border-radius:13px;background:#fff}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #edf1ec;text-align:left;white-space:nowrap}.table th{background:#f8fbf6;color:#6e6568}.badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#edf9e8;color:#4aa342;font-size:12px}.codebox{background:#203426;color:#e6ffe1;border-radius:11px;padding:13px;white-space:pre-wrap;word-break:break-word}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid #dcebd8;border-radius:13px;padding:17px}.stat b{display:block;font-size:1.5rem;color:#59b942}.tabs{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.tabs a{background:#fff;border:1px solid #dbe8d7;border-radius:9px;padding:8px 12px;text-decoration:none}.topup-breadcrumb{color:#9c8e94;margin:12px 0 21px}.topup-breadcrumb b{color:#5aba44}.topup-title{font-size:25px;margin:0 0 18px}.payment-grid{display:grid;grid-template-columns:repeat(3,230px);gap:17px}.payment-card{min-height:225px;border:1px solid #dcebd8;background:#fff;border-radius:15px;box-shadow:var(--shadow);padding:20px 17px;text-align:center;position:relative}.payment-card.recommended:before{content:"แนะนำ";position:absolute;top:-10px;right:14px;padding:4px 9px;background:#6aca4f;color:#fff;border-radius:999px;font-size:12px}.pay-icon{width:86px;height:86px;margin:4px auto 14px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e6f8df,#f4fbf0);font-size:42px}.payment-card h3{font-size:14px}.pay-badge{display:inline-block;padding:4px 9px;border-radius:999px;background:#ecf9e7;color:#4caf43;font-size:11px}.payment-form{margin-top:12px;text-align:left}.site-footer{margin-top:58px;border-top:1px solid #dcebd8;background:radial-gradient(circle at 25% 20%,#fff 0,#f7fbf5 55%,#edf7e9 100%);padding-top:46px}.footer-inner{width:min(1200px,90%);margin:auto;display:grid;grid-template-columns:1.45fr .8fr .8fr .8fr;gap:52px;padding-bottom:36px}.footer-brand img{width:220px;height:96px;object-fit:contain}.footer-brand p{max-width:455px;line-height:1.8;color:#86787e}.footer-col{display:flex;flex-direction:column;gap:12px}.footer-col h4{margin:5px 0 3px;font-size:16px}.footer-col h4:after{content:"";display:block;width:38px;height:3px;background:#69c84c;border-radius:5px;margin-top:10px}.footer-col a{text-decoration:none;color:#86787e}.social-row{display:flex;gap:15px;color:#7d7477;font-weight:800}.footer-bottom{width:min(1200px,90%);margin:auto;border-top:1px solid #d9e8d6;padding:17px 0 24px;display:flex;justify-content:space-between;color:#8b7d82;font-size:12px}.footer-bottom a{text-decoration:none;color:#55ad47;margin-left:18px}@media(max-width:1050px){.main-nav a:last-child{display:none}.product-grid,.grid{grid-template-columns:repeat(3,1fr)}.payment-grid{grid-template-columns:repeat(3,1fr)}.footer-inner{grid-template-columns:1.4fr 1fr 1fr}.footer-col:last-child{display:none}}@media(max-width:780px){.site-header{height:auto}.header-inner{min-height:67px;flex-wrap:wrap;gap:8px;padding:5px 0}.brand{width:105px}.brand img{width:102px}.main-nav{order:3;width:100%;overflow:auto}.main-nav a{white-space:nowrap;height:36px;padding:0 10px}.user-pill{width:47px;min-width:47px}.user-copy,.menu-arrow{display:none}.user-dropdown{right:-4px;width:310px}.cart-btn{display:none}.hero-banner{height:auto;min-height:340px;padding:25px;grid-template-columns:1fr}.hero-art{position:absolute;right:-60px;bottom:-25px;width:55%;opacity:.28}.hero-copy h1{font-size:54px}.stat-grid{grid-template-columns:repeat(2,1fr)}.recent-list{grid-template-columns:repeat(2,1fr)}.product-grid,.grid{grid-template-columns:repeat(2,1fr)}.payment-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr;gap:26px}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:8px}.footer-bottom a{margin-left:0;margin-right:15px}}@media(max-width:500px){.page-shell{width:96%;margin-top:14px}.hero-banner{border-radius:15px}.hero-copy h1{font-size:45px}.hero-copy h2{font-size:22px}.product-grid,.grid{grid-template-columns:1fr}.recent-list{grid-template-columns:1fr}.stat-card{height:78px;padding:10px}.stat-card strong{font-size:21px}.footer-inner{grid-template-columns:1fr}.footer-col{display:none}.footer-brand{display:block}.header-join{display:none}.filters input{width:170px}}

/* =========================
   DINO SHOP V4 - Clean Luxury
   ========================= */
:root{
  --bg:#f7f9f5;
  --paper:#ffffff;
  --ink:#172019;
  --muted:#6f7b72;
  --line:#e4ebe2;
  --accent:#2f7d4a;
  --accent2:#6cae75;
  --accent-dark:#1f5e37;
  --soft:#f2f7f1;
  --soft2:#eaf2e8;
  --danger:#c95858;
  --gold:#b7965b;
  --shadow:0 16px 40px rgba(31,64,42,.08);
  --shadow-sm:0 8px 22px rgba(31,64,42,.06);
  --radius:18px;
}
html{background:var(--bg)}
body{background:linear-gradient(180deg,#fbfcfa 0%,#f6f8f4 48%,#f2f5f0 100%);color:var(--ink);font-size:14px;letter-spacing:.01em}
body,.btn,input,select,button,textarea{font-family:'Kanit',sans-serif}
a{transition:.2s ease}
.ico{width:19px;height:19px}.ico svg{stroke-width:1.75}

.site-header{height:76px;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(221,231,219,.9);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.6)}
.header-inner{width:min(1360px,94%);gap:30px}.brand{width:132px}.brand img{width:132px;height:60px}
.main-nav{gap:4px}.main-nav a{height:42px;padding:0 15px;border-radius:12px;color:#667168;font-weight:500}.main-nav a:hover{background:#f2f6f1;color:var(--accent-dark)}.main-nav a.active{background:#edf4ec;color:var(--accent-dark);box-shadow:inset 0 0 0 1px #e3ece1}.chev{margin-left:6px;display:inline-flex}.chev .ico{width:15px;height:15px}
.account-area{gap:10px}.cart-btn{width:44px;height:44px;border-color:#e2eae0;border-radius:14px;color:var(--accent);box-shadow:none}.cart-btn:hover{background:#f3f7f2;border-color:#d5e2d2}
.user-pill{height:48px;min-width:190px;border-color:#e0e8de;border-radius:15px;box-shadow:none;background:#fff}.avatar{background:linear-gradient(135deg,#2e6f47,#6aa371);border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.user-copy b{color:#294c36}.user-copy small{color:#2b332e;font-weight:500}.menu-arrow{border:none;background:#f4f7f3;color:#627168}.menu-arrow .ico{width:15px;height:15px}
.user-dropdown{top:60px;width:322px;border:1px solid #e0e8de;border-radius:18px;box-shadow:0 24px 60px rgba(28,53,36,.14)}.drop-head{padding:16px;border-bottom-color:#edf1ec}.user-dropdown>a{padding:12px 16px;color:#576159;font-weight:500}.user-dropdown>a:hover{background:#f5f8f4;color:var(--accent-dark)}.logout-link{color:#b95757!important}.drop-sep{background:#edf1ec}
.login-link{color:#405949}.header-join{background:#214f35;color:#fff;padding:11px 16px;border-radius:12px;box-shadow:0 8px 22px rgba(33,79,53,.15)}.header-join:hover{background:#183f2a}

.page-shell{width:min(1280px,92%);margin:30px auto 0}.alert{border-color:#dfe8dc;background:#f8fbf7;border-radius:14px;box-shadow:var(--shadow-sm)}.alert.success{border-color:#d6e8d2;background:#f1f8ef}.alert.error{border-color:#efd6d6;background:#fff7f7}

.hero-banner{height:390px;border-radius:26px;background:linear-gradient(135deg,#1e4b32 0%,#2e6e47 48%,#739c68 100%);box-shadow:0 28px 70px rgba(33,79,53,.18);padding:42px 50px;border:1px solid rgba(255,255,255,.08)}
.hero-banner:before{background:radial-gradient(circle at 80% 14%,rgba(255,255,255,.16),transparent 23%),radial-gradient(circle at 16% 83%,rgba(196,218,185,.12),transparent 25%),linear-gradient(120deg,transparent 52%,rgba(255,255,255,.035) 52% 53%,transparent 53%)}
.hero-kicker{background:rgba(255,255,255,.12);color:#edf6eb;border:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.13em;padding:7px 12px}
.hero-copy h1{font-size:64px;letter-spacing:-.04em;margin:10px 0 0}.hero-copy h1 span{color:#dbe8cc}.hero-copy h2{font-size:28px;margin:2px 0 10px;font-weight:600}.hero-copy p{color:rgba(255,255,255,.76);font-size:15px;line-height:1.8;max-width:590px}.hero-actions{gap:10px}.hero-btn{background:#fff;color:#1f5134;border-radius:12px;padding:12px 18px;box-shadow:0 10px 25px rgba(0,0,0,.08)}.hero-btn.alt{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}.hero-btn:hover{transform:translateY(-1px)}.hero-art img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.18));max-height:290px}.hero-dots i{background:rgba(255,255,255,.45)}.hero-dots i.active{background:#fff}

.stat-grid{gap:14px;margin:20px 0}.stat-card{min-height:86px;background:rgba(255,255,255,.94);border:1px solid #e3ebe1;border-radius:18px;box-shadow:var(--shadow-sm);padding:18px 19px}.stat-card small{color:#7b877e}.stat-card strong{color:#244e33;font-size:25px}.stat-icon{width:44px;height:44px;border-radius:14px;background:#eef4ec;color:#416a4d;display:grid;place-items:center}.stat-icon .ico{width:22px;height:22px}.stat-icon .ico svg{width:22px;height:22px}

.recent-strip,.section-box,.card,.table-wrap{background:#fff;border:1px solid #e2e9e0;border-radius:20px;box-shadow:var(--shadow-sm)}.recent-strip{padding:18px}.recent-strip h3{font-size:16px;font-weight:600}.recent-item{border-color:#edf1ec}.qty-pill{background:#eef4ec;color:#42664c}
.section-box{padding:20px;margin-top:18px}.section-title{margin-bottom:16px}.section-title h2,.section-head h2{font-weight:650;letter-spacing:-.01em}.filters input{border:1px solid #e0e8de;background:#fbfcfa;border-radius:12px;padding:10px 13px;outline:none}.filters input:focus{border-color:#aac4ad;box-shadow:0 0 0 3px rgba(74,122,84,.08)}

.product-grid{gap:16px}.product-card{border:1px solid #e0e8de;border-radius:18px;background:#fff;box-shadow:none;overflow:hidden;transition:.22s ease}.product-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(30,68,43,.09);border-color:#d3dfd0}.img-wrap{background:#f6f8f5}.product-card-body{padding:15px}.product-card-body h3{font-size:15px;line-height:1.5;font-weight:600}.product-divider{background:#edf1ec}.product-price{color:#214f35;font-size:19px;font-weight:700}.old-price{color:#a1aaa3}.sale-tag{top:10px;left:10px;background:rgba(24,53,36,.9);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 9px;display:inline-flex;gap:5px;align-items:center;font-size:11px}.sale-tag .ico{width:14px;height:14px}.sale-tag .ico svg{width:14px;height:14px}.buy-btn,.btn{background:#214f35;color:#fff;border:none;border-radius:12px;font-weight:600;box-shadow:none;transition:.2s ease}.buy-btn{padding:10px 12px}.buy-btn:hover,.btn:hover{background:#183f2a;transform:translateY(-1px)}.product-meta{color:#849087}.stock-good{color:#4e7a57}

.form{max-width:590px}.card{padding:24px}.card h2{font-weight:650}.muted{color:#7b857e}.form label{color:#4d5a50;font-weight:500}.form input,.form select,.form textarea,.table input,.table select{border:1px solid #dce5da;background:#fbfcfa;border-radius:12px;padding:11px 12px;color:#253028;outline:none}.form input:focus,.form select:focus,.form textarea:focus,.table input:focus,.table select:focus{border-color:#9fbaa3;box-shadow:0 0 0 3px rgba(58,104,68,.08)}.btn{padding:11px 16px}.btn.mini{padding:8px 12px;border-radius:10px}

.topup-breadcrumb{color:#89928b}.balance{background:#eef4ec;color:#355b40;border:1px solid #dfe8dc;border-radius:999px;padding:8px 12px}.payment-grid{gap:16px}.payment-card{border:1px solid #e0e8de;border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);padding:22px}.payment-card.recommended{border-color:#cbdcc8}.payment-card.recommended:before{background:#214f35;color:#fff}.pay-icon{width:62px;height:62px;border-radius:18px;background:#edf4eb;color:#2f6640;display:grid;place-items:center}.pay-icon .ico,.pay-icon .ico svg{width:30px;height:30px}.pay-badge{background:#edf4eb;color:#477053;border:1px solid #dce8d9}

.table-wrap{overflow:auto}.table{border-collapse:collapse}.table th{background:#f7f9f6;color:#657068;font-weight:600}.table th,.table td{border-bottom:1px solid #ebf0e9;padding:13px 14px}.table tr:last-child td{border-bottom:0}.table a{color:#2e6640;font-weight:500}.badge{background:#eef4ec;color:#42684c;border:1px solid #dce8d9;border-radius:999px;padding:5px 9px}
.codebox{background:#141a16;color:#e7efe8;border-radius:14px;border:1px solid #29312b;box-shadow:inset 0 1px rgba(255,255,255,.03)}

.stats{gap:14px}.stat{background:#fff;border:1px solid #e1e9df;border-radius:18px;box-shadow:var(--shadow-sm);padding:20px}.stat span{color:#7c877f}.stat b{color:#244e33}.tabs a{background:#fff;border:1px solid #e0e7de;border-radius:12px;color:#405049}.tabs a:hover{background:#f2f6f1;color:#234f34}

.site-footer{margin-top:70px;background:linear-gradient(180deg,#f4f7f2,#edf2eb);border-top:1px solid #e0e7de}.footer-inner{width:min(1220px,92%);padding:52px 0 34px;gap:52px}.footer-brand img{filter:saturate(.92)}.footer-brand p,.footer-col a{color:#68736b;line-height:1.8}.footer-col h4{color:#28352b}.footer-col h4:after{background:#7f9d7d}.social-row{display:flex;gap:10px}.social-row a{width:38px;height:38px;border-radius:12px;background:#fff;border:1px solid #dfe7dc;display:grid;place-items:center;text-decoration:none;color:#53685a}.social-row a:hover{background:#eaf1e8;color:#214f35}.social-row .ico{width:17px;height:17px}.social-text{font-size:10px;font-weight:700}.footer-bottom{width:min(1220px,92%);border-top:1px solid #dfe6dd;color:#7e8880}.footer-bottom a{color:#6c786f}

@media(max-width:900px){.main-nav{display:none}.header-inner{width:94%}.account-area{margin-left:auto}.hero-banner{height:auto;min-height:360px;grid-template-columns:1fr;padding:34px}.hero-art{opacity:.28;position:absolute;right:-30px;bottom:-30px}.hero-copy{max-width:700px}.hero-copy h1{font-size:52px}.stat-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{grid-template-columns:1fr 1fr}.payment-grid{grid-template-columns:1fr}}
@media(max-width:620px){.page-shell{width:94%;margin-top:18px}.brand{width:100px}.brand img{width:100px}.cart-btn{display:none}.user-pill{min-width:0}.user-copy{display:none}.user-pill{width:48px;padding:5px}.menu-arrow{display:none}.user-dropdown{right:-6px;width:min(315px,88vw)}.hero-banner{padding:28px 24px;border-radius:20px}.hero-copy h1{font-size:42px}.hero-copy h2{font-size:22px}.hero-copy p{font-size:13px}.stat-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{min-height:78px;padding:14px}.product-grid{grid-template-columns:1fr}.section-box{padding:14px}.footer-inner{grid-template-columns:1fr;padding-top:36px}.footer-bottom{flex-direction:column;gap:12px}.header-join{padding:9px 11px}}

/* V5 professional interaction + layout refinements */
html,body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column;margin:0}
.page-shell{flex:1 0 auto;width:min(1280px,92%)}
.site-footer{flex-shrink:0;margin-top:70px;position:static!important;bottom:auto!important}

.site-toast{position:fixed;z-index:1300;top:92px;right:24px;width:min(390px,calc(100vw - 32px));display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid #dfe8dc;border-radius:16px;padding:14px 42px 14px 14px;box-shadow:0 22px 55px rgba(29,58,38,.16);animation:toastIn .28s ease both}
.site-toast.hide{opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s ease}
.site-toast .toast-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eef5ec;color:#315f3d;flex:0 0 auto}
.site-toast .toast-icon .ico{width:20px;height:20px}
.site-toast>div{display:flex;flex-direction:column;gap:2px;line-height:1.45}.site-toast b{font-size:14px;color:#243129}.site-toast span{font-size:13px;color:#69736c}.site-toast button{position:absolute;right:12px;top:11px;border:0;background:transparent;color:#8b948d;font-size:22px;cursor:pointer}.site-toast.error{border-color:#ecd9d6}.site-toast.error .toast-icon{background:#fff0ef;color:#b65048}.site-toast.warn .toast-icon{background:#f6f2e8;color:#8a6a30}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

.site-modal-backdrop{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;background:rgba(17,27,20,.48);backdrop-filter:blur(5px);padding:20px;opacity:0;transition:.16s ease}.site-modal-backdrop.open{opacity:1}.site-modal{width:min(430px,100%);background:#fff;border:1px solid #dfe8dc;border-radius:22px;padding:26px;box-shadow:0 35px 90px rgba(18,43,28,.24);text-align:center;transform:translateY(8px) scale(.98);transition:.18s ease}.site-modal-backdrop.open .site-modal{transform:none}.modal-icon{width:54px;height:54px;border-radius:16px;background:#edf4eb;color:#315f3d;display:grid;place-items:center;margin:0 auto 14px}.modal-icon .ico,.modal-icon .ico svg{width:26px;height:26px}.site-modal h3{margin:0 0 8px;font-size:20px;color:#243129}.site-modal p{margin:0;color:#737d76;line-height:1.7}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.btn.ghost{background:#f5f7f4;color:#4e5b52;border:1px solid #dfe7dc}.btn.ghost:hover{background:#edf2eb}.error-placeholder{max-width:560px;margin:60px auto}.error-placeholder .card{text-align:center}

.eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;color:#66806c;margin-bottom:5px}.payment-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0 32px}.payment-choice{position:relative;display:flex;align-items:center;gap:16px;min-height:150px;padding:22px;background:#fff;border:1px solid #e0e8de;border-radius:20px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:.22s ease}.payment-choice:hover{transform:translateY(-3px);border-color:#cbdcc8;box-shadow:0 22px 48px rgba(31,64,42,.10)}.payment-choice.recommended:before{content:'แนะนำ';position:absolute;right:18px;top:16px;padding:5px 9px;border-radius:999px;background:#214f35;color:#fff;font-size:10px;font-weight:600}.choice-icon{width:66px;height:66px;border-radius:18px;background:#edf4eb;color:#315f3d;display:grid;place-items:center;flex:0 0 auto}.choice-icon .ico,.choice-icon .ico svg{width:30px;height:30px}.choice-copy{display:flex;flex-direction:column;gap:6px;min-width:0}.choice-copy b{font-size:18px;color:#26362b}.choice-copy small{font-size:13px;line-height:1.6;color:#758078}.choice-copy em{font-size:11px;font-style:normal;color:#52705a;background:#f0f5ef;width:max-content;max-width:100%;padding:4px 8px;border-radius:999px}.choice-arrow{margin-left:auto;font-size:22px;color:#7f9083}.topup-history{margin-top:28px}.topup-flow{max-width:720px;margin:14px auto 40px;background:#fff;border:1px solid #e0e8de;border-radius:24px;box-shadow:var(--shadow);padding:28px}.flow-back{display:inline-flex;margin-bottom:22px;color:#69786d;text-decoration:none;font-weight:500}.flow-back:hover{color:#214f35}.flow-head{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid #edf1ec}.flow-icon{width:62px;height:62px;border-radius:18px;background:#edf4eb;color:#315f3d;display:grid;place-items:center;flex:0 0 auto}.flow-icon .ico,.flow-icon .ico svg{width:30px;height:30px}.flow-head span{font-size:11px;color:#6a8170;font-weight:700;letter-spacing:.06em}.flow-head h2{margin:3px 0;font-size:23px;color:#253329}.flow-head p{margin:0;color:#7b867e;font-size:13px}.luxury-form{margin-top:22px}.luxury-form label{display:block;margin:0 0 8px;color:#4d5a50;font-weight:500}.luxury-form>input,.money-input{width:100%;box-sizing:border-box;border:1px solid #dce5da;background:#fbfcfa;border-radius:14px;min-height:52px}.luxury-form>input{padding:12px 14px;font-family:inherit;font-size:14px;outline:none}.luxury-form>input:focus,.money-input:focus-within{border-color:#9fbaa3;box-shadow:0 0 0 3px rgba(58,104,68,.08)}.money-input{display:flex;align-items:center;padding:0 14px;gap:8px}.money-input span{color:#5f6d63;font-weight:600}.money-input input{border:0!important;background:transparent!important;box-shadow:none!important;outline:0;width:100%;font:inherit;font-size:16px;padding:13px 0}.quick-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}.quick-amounts button{border:1px solid #dfe7dc;background:#fff;border-radius:11px;padding:10px 6px;color:#5d6961;font-family:inherit;font-weight:500;cursor:pointer}.quick-amounts button:hover{background:#eef4ec;border-color:#cbdcc8;color:#284f34}.luxury-form small{display:block;color:#8b948e;margin:8px 0 14px}.btn.wide{width:100%;min-height:48px}

.profile-page{max-width:760px;margin:8px auto 50px}.profile-card{background:#fff;border:1px solid #e0e8de;border-radius:24px;box-shadow:var(--shadow);padding:30px}.profile-title{padding-bottom:20px;border-bottom:1px solid #edf1ec}.profile-title h2{margin:0;font-size:25px}.profile-title p{margin:5px 0 0;color:#7b867e}.profile-hero{display:flex;align-items:center;gap:18px;padding:24px 0}.profile-avatar{width:74px;height:74px;font-size:30px}.profile-hero h3{margin:0 0 8px;font-size:20px}.profile-balance{display:flex;align-items:center;gap:18px}.profile-balance span{color:#89928b}.profile-balance b{color:#1f6a3d}.profile-section{padding:22px 0;border-top:1px solid #edf1ec}.profile-section h4{margin:0 0 12px;color:#7b857e;font-weight:500}.profile-rows{display:grid;gap:4px}.profile-rows>div{display:grid;grid-template-columns:minmax(170px,.8fr) 1.2fr;gap:18px;align-items:center;min-height:44px;padding:7px 4px}.profile-rows span{display:flex;align-items:center;gap:10px;color:#6d786f}.profile-rows span .ico{color:#55755d;width:18px;height:18px}.profile-rows b{font-weight:500;color:#313b34;overflow-wrap:anywhere}.profile-edit{padding-top:20px;border-top:1px solid #edf1ec}.profile-edit label{display:block;margin-bottom:8px;color:#6f7a72}.inline-edit{display:flex;gap:10px}.inline-edit input{flex:1;border:1px solid #dce5da;background:#fbfcfa;border-radius:12px;padding:11px 12px;font-family:inherit;outline:none}.inline-edit input:focus{border-color:#9fbaa3;box-shadow:0 0 0 3px rgba(58,104,68,.08)}

@media(max-width:720px){.site-toast{top:82px;right:16px}.payment-choice-grid{grid-template-columns:1fr}.topup-flow{padding:20px;border-radius:20px}.quick-amounts{grid-template-columns:repeat(2,1fr)}.flow-head{align-items:flex-start}.profile-card{padding:20px}.profile-rows>div{grid-template-columns:1fr;gap:4px}.inline-edit{flex-direction:column}.modal-actions{grid-template-columns:1fr}}

/* V5.1 hotfix: hidden modal overlay must never block page interaction */
.site-modal-backdrop[hidden]{display:none!important;pointer-events:none!important;visibility:hidden!important}
.site-modal-backdrop:not([hidden]){display:grid;pointer-events:auto;visibility:visible}

/* V6 order history, support center, Discord contact */
.contact-nav{gap:7px}.contact-nav .ico{width:18px;height:18px}
.discord-contact{display:flex!important;align-items:center;gap:11px;max-width:230px;padding:12px 13px!important;border:1px solid #dce8d9;border-radius:13px;background:#fff;text-decoration:none!important;color:#35563f!important}.discord-contact:hover{border-color:#b8d2b8;background:#f8fbf7}.discord-contact>.ico{width:28px;height:28px;color:#5865f2}.discord-contact>.ico svg{width:27px;height:27px}.discord-contact span{display:flex;flex-direction:column;gap:2px}.discord-contact b{font-size:14px}.discord-contact small{font-size:11px;color:#849088;line-height:1.4}.footer-bottom{justify-content:flex-start!important}
.orders-page{margin:8px 0 54px}.orders-hero{text-align:center;padding:8px 0 25px}.orders-hero h1{font-size:28px;margin:3px 0 4px;color:#24372a}.orders-hero p{margin:0;color:#7a867d}.orders-card{background:#fff;border:1px solid #e1ebe0;border-radius:20px;padding:20px;box-shadow:0 8px 28px rgba(43,75,50,.07)}.orders-section-title{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid #edf1ec}.orders-section-title h2{margin:0;font-size:20px}.orders-section-title p{margin:2px 0 0;color:#8b958d}.order-title-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#eef7ec;color:#315f3e}.orders-toolbar{display:flex;align-items:center;gap:8px;padding:18px 0 13px}.orders-search{width:min(360px,100%);height:42px;border:1px solid #dce5da;border-radius:11px;background:#fbfcfb;display:flex;align-items:center;padding:0 11px;gap:8px}.orders-search .ico{color:#859087}.orders-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;color:#263329}.orders-table-wrap{overflow:auto;border:1px solid #e4e9e3;border-radius:12px}.orders-table{width:100%;border-collapse:collapse;min-width:990px}.orders-table th{font-weight:500;color:#768179;background:#fbfcfb;padding:12px 10px;text-align:left;border-bottom:1px solid #e7ece6;white-space:nowrap}.orders-table td{padding:12px 10px;border-bottom:1px solid #edf0ec;vertical-align:middle}.orders-table tbody tr:last-child td{border-bottom:0}.order-product-cell{display:flex;align-items:center;gap:10px;min-width:270px}.order-product-cell img{width:40px;height:40px;border-radius:9px;object-fit:cover;background:#eef5ec}.order-product-cell span{font-weight:500}.actions-col{text-align:right!important}.order-actions{display:flex;justify-content:flex-end;gap:7px}.order-action{height:36px;padding:0 11px;border:1px solid #dce5da;background:#fff;border-radius:9px;font-family:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#34443a;white-space:nowrap}.order-action:hover{background:#f5f9f4;border-color:#bfd0bd}.order-action.danger{color:#a44c4c;border-color:#ead6d4}.order-action.danger:hover{background:#fff7f6}.order-action .ico{width:17px;height:17px}.order-action .ico svg{width:16px;height:16px}.report-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:600;white-space:nowrap}.report-status.none{background:#f3f5f3;color:#7c867e}.report-status.pending{background:#fff5d9;color:#9a6b00}.report-status.resolved{background:#e9f7e9;color:#28723b}.report-status.cancelled{background:#f5ecec;color:#9f4848}.orders-pager{display:flex;align-items:center;justify-content:space-between;padding:14px 2px 0;color:#7f8a82}.orders-pager>div{display:flex;align-items:center;gap:8px}.pager-btn{width:34px;height:34px;border:1px solid #dce5da;border-radius:9px;background:#fff;text-decoration:none;display:grid;place-items:center;font-size:20px}.empty-cell{text-align:center!important;padding:42px!important;color:#89928b}
.order-detail-modal{position:fixed;inset:0;z-index:400;background:rgba(19,31,23,.42);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .14s ease}.order-detail-modal[hidden]{display:none!important;pointer-events:none!important}.order-detail-modal.open{opacity:1}.order-detail-panel{width:min(620px,100%);max-height:min(780px,92vh);overflow:auto;background:#fff;border:1px solid #e1e9df;border-radius:22px;box-shadow:0 24px 70px rgba(24,45,29,.22);padding:24px;position:relative;transform:translateY(10px);transition:transform .14s ease}.order-detail-modal.open .order-detail-panel{transform:translateY(0)}.modal-x{position:absolute;right:16px;top:14px;width:34px;height:34px;border:1px solid #e2e7e1;background:#fff;border-radius:10px;cursor:pointer;font-size:22px;color:#6e7771}.detail-modal-head{display:flex;align-items:center;gap:12px;padding-right:38px}.detail-modal-head>span{width:44px;height:44px;border-radius:12px;background:#eef6ec;color:#386546;display:grid;place-items:center}.detail-modal-head>span.danger-icon{background:#fff0ef;color:#b95650}.detail-modal-head small{color:#8b958d}.detail-modal-head h3{margin:1px 0 0;font-size:19px}.detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.detail-meta>div{background:#f7faf6;border:1px solid #e5ebe3;border-radius:12px;padding:10px 12px}.detail-meta span{display:block;color:#8b958d;font-size:12px}.detail-meta b{display:block;margin-top:3px;font-weight:500}.detail-label{display:block;margin:8px 0;color:#667168}.delivery-data{min-height:130px;white-space:pre-wrap;word-break:break-word;background:#17211b;color:#eaf6ec;border-radius:14px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.65}.copy-delivery{margin-top:12px;gap:8px}.modal-lock{overflow:hidden}.report-form textarea,.admin-report-editor textarea,.admin-report-editor select{width:100%;box-sizing:border-box;border:1px solid #dce5da;background:#fbfcfb;border-radius:12px;padding:12px;font:inherit;outline:none}.report-form textarea:focus,.admin-report-editor textarea:focus,.admin-report-editor select:focus{border-color:#9fbaa3;box-shadow:0 0 0 3px rgba(58,104,68,.08)}.report-form label{display:block;margin:18px 0 7px}.report-form small{display:block;color:#89928b;margin:8px 0 14px}
.admin-report-head{margin-bottom:15px}.admin-report-head h2{margin:2px 0}.admin-report-list{display:grid;gap:13px;margin-top:16px}.admin-report-card{background:#fff;border:1px solid #e1e9df;border-radius:16px;padding:17px;box-shadow:0 5px 18px rgba(43,75,50,.05)}.admin-report-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.admin-report-top h3{margin:3px 0;font-size:17px}.admin-report-top p{margin:0;color:#89928b}.report-id{color:#657168;font-size:12px}.problem-box{margin:14px 0;background:#f8faf7;border:1px solid #e5ebe3;border-radius:12px;padding:12px 14px}.problem-box b{font-weight:600}.problem-box p{margin:5px 0 0;line-height:1.6}.admin-report-editor{max-width:850px;margin:5px auto 50px}.admin-report-editor>.card{margin-top:12px}.admin-report-editor .luxury-form{margin-top:14px}.empty-state{text-align:center;color:#89928b;padding:36px}
@media(max-width:900px){.orders-card{padding:14px}.orders-toolbar{flex-wrap:wrap}.orders-search{width:100%}.detail-meta{grid-template-columns:1fr}.admin-report-top{flex-direction:column}.contact-nav{display:none!important}}

/* V6.5: all non-interactive notifications fade after 4 seconds */
.site-toast{transition:opacity .5s ease,transform .5s ease}
.site-toast.hide,.notice-fade-out{opacity:0!important;transform:translateY(-8px)!important;pointer-events:none!important}
.alert{transition:opacity .5s ease,transform .5s ease}