/* แถบบน + ท้ายหน้า + ปุ่ม + เมนูภาษา ชุดเดียวกับหน้า landing (คัดจาก landing-x.css · ใช้กับหน้า public ทุกหน้า · นำหน้า body ให้ชนะ .sp a ของ pt-shop.css) */
:root{--n9:#040b1c;--n8:#081631;--n7:#0d2147;--n6:#14306a;
  --blue:#2563ff;--cyan:#35d4ff;--or:#ff6a13;--or2:#ff9a3d;--orink:#c94f0c;
  --ink:#0f172a;--ink2:#475569;--line:#e5e9f0;--bg:#f5f7fb;--card:#fff;
  --r:18px;--wrap:1200px;
  --fh:'Prompt','IBM Plex Sans Thai',sans-serif;--fb:'IBM Plex Sans Thai','Prompt',sans-serif;--fn:'Inter','Prompt',sans-serif;}
body .wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
body .ic{width:24px;height:24px;flex:none}
body .nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
body .nav.is-solid{background:rgba(4,11,28,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
body .nav-in{display:flex;align-items:center;gap:28px;height:72px}
body .logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--fh);font-weight:700;font-size:19px;letter-spacing:.02em}
body .logo img{width:40px;height:40px;object-fit:contain}   /* เจ้าของสั่ง 27 ต.ค. เอาพื้นขาวหลังโลโก้ออก (ไฟล์โลโก้พื้นใสอยู่แล้ว) */
body .logo b{color:var(--or2);font-weight:700}
body .logo small{display:block;font:500 11px var(--fb);color:#9fb3d9;letter-spacing:0}
body .menu{display:flex;gap:26px;margin-left:auto}
body .menu a{color:#d6e2ff;font-size:15px;font-weight:500;position:relative;padding:6px 0}
body .menu a:after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--or);transition:right .25s}
body .menu a:hover{color:#fff}
body .menu a:hover:after{right:0}
body .nav-act{display:flex;gap:10px;align-items:center}
body .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;font:600 15px var(--fh);border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
body .btn-or{background:linear-gradient(135deg,var(--or),#ff4d00);color:#fff;box-shadow:0 10px 28px rgba(255,106,19,.35)}
body .btn-or:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,106,19,.45)}
body .btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
body .btn-glass:hover{background:rgba(255,255,255,.16)}
body .btn-sm{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
body .lx-foot{background:var(--n9);color:#9fb3d9;padding:64px 0 30px;font-size:14px}
body .fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
body .lx-foot h4{color:#fff;font:600 15px var(--fh);margin:0 0 14px}
body .lx-foot a{display:block;padding:4px 0}
body .lx-foot a:hover{color:#fff}
body .fbot{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media (max-width:1024px){body .menu{display:none}body .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){body .wrap{width:calc(100% - 32px)}body .nav-in{height:62px;gap:12px}body .logo{font-size:16px}body .logo small{display:none}body .fgrid{grid-template-columns:1fr 1fr;gap:28px}body .fgrid>div:first-child{grid-column:span 2}}
body .lgm{position:relative}
body .lgm summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;color:#d6e2ff;font:600 13px var(--fn);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 12px}
body .lgm summary::-webkit-details-marker{display:none}
body .lgm summary .ic{width:16px;height:16px}
body .lgm[open] summary{background:rgba(255,255,255,.1)}
body .lgm div{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:14px;background:#0b1a38;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px rgba(0,0,0,.4);display:grid}
body .lgm a{padding:9px 12px;border-radius:9px;color:#d6e2ff;font-size:14px}
body .lgm a:hover{background:rgba(255,255,255,.08);color:#fff}
body .lgm a.is-on{color:var(--or2);font-weight:600}
body .fct{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
body .fct a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#d6e2ff}
body .fct a:hover{background:rgba(255,255,255,.12);color:#fff}
body .fct .ic{width:18px;height:18px;color:var(--or2)}
body .fbot a{display:inline;padding:0}
body .fbot nav{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:640px){body .lgm summary{padding:6px 10px}body .nav-act .btn-glass{display:none}}
