/* ===== Base & Container ===== */
*{box-sizing:border-box}
:root{--green:#22c55e;--green-700:#16a34a;--ink:#0f172a;--muted:#64748b;--bg:#ffffff}
html,body{margin:0;padding:0;font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f6fbf8;color:#0b1324}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ===== Sticky ticker ===== */
.ticker-bar{position:sticky;top:0;z-index:50;background:#0b1623;border-bottom:1px solid rgba(255,255,255,.06)}
.ticker-bar .container{padding:8px 16px}
.ticker-track{display:flex;gap:18px;align-items:center;min-height:40px;white-space:nowrap;will-change:transform;animation:marquee 32s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:10px;padding:6px 14px;background:#0f1c2d;border-radius:999px;color:#dbeafe;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.ticker-item img{width:22px;height:22px;border-radius:8px;background:#0b1220}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;color:#fff}
.badge.red{background:#ef4444}
.badge.cyan{background:#06b6d4}
.ticker-empty{color:#94a3b8}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== NAV ===== */
.site-header{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:48px;z-index:40}
.nav{display:flex;align-items:center;justify-content:center;gap:24px;min-height:60px}
.brand{font-weight:800;color:#0b1324;text-decoration:none;margin-right:auto}
.nav-links{display:flex;gap:16px}
.nav-links a{color:#0b1324;text-decoration:none}
.nav-right{margin-left:auto}
.btn-sm{padding:8px 14px;font-weight:700;border:0;border-radius:10px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 10px 24px rgba(34,197,94,.35)}

/* ===== HERO ===== */
.hero{background:linear-gradient(135deg,#22c55e 0%,#0ea5a8 100%);color:#fff}
.hero .center{padding:44px 0;text-align:center}
.hero h1{margin:0 0 6px;font-size:36px}
.hero p{margin:0;opacity:.95}

/* ===== Products (④ การ์ดจตุรัส กระชับ) ===== */
.products{padding:38px 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid #e2e8f0;border-radius:16px;
  padding:20px;display:grid;grid-template-rows:auto 1fr auto;
  align-items:center;justify-items:center;text-align:center;
  box-shadow:0 16px 30px rgba(2,8,23,.06);
  aspect-ratio:1/1;               /* ทำให้เป็น “จตุรัส” */
}
.icon-wrap{
  width:110px;height:110px;border-radius:24px;background:#ffffff !important;
  border:1px solid #e2e8f0;box-shadow:none !important;display:grid;place-items:center;margin-bottom:8px;
}
.icon-wrap img{width:72px;height:72px;object-fit:contain}
.card h3{margin:8px 0 6px}
.card .price{margin:0 0 12px;color:#111827}
.btn{width:100%;padding:14px 18px;border:none;border-radius:12px;cursor:pointer;font-weight:800;letter-spacing:.3px;transition:box-shadow .2s, transform .02s}
.btn-buy{background:var(--green);color:#fff}
.btn-buy:hover{box-shadow:0 12px 30px rgba(34,197,94,.35)}
.btn-buy:active{transform:translateY(1px)}

/* ===== Modal (Flip) ===== */
.modal{position:fixed;inset:0;display:none;z-index:100}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.55);backdrop-filter:blur(2px)}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(560px,92vw);background:#fff;border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);padding:22px 22px 26px
}
.modal-close{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;background:#ecfdf5;color:#111;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.modal-close .close-hit{position:absolute;inset:-8px}

/* ② กล่อง Register เป็น “สี่เหลี่ยมจตุรัส” */
.flip-wrap{
  width:min(420px,80vw);
  aspect-ratio:1/1;                 /* ความสูง = ความกว้าง */
  margin:0 auto;
  position:relative;perspective:1200px
}
.face{
  position:absolute;inset:0;background:#fff;border-radius:14px;
  display:flex;flex-direction:column;gap:12px;padding:14px;
  backface-visibility:hidden
}
.face h2{margin:0 0 6px;color:#0b1324}
.face-register{transform:rotateY(180deg)}
.flip-wrap.flipped .face-login{transform:rotateY(180deg)}
.flip-wrap.flipped .face-register{transform:rotateY(0)}
.flip-wrap,.face{transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}

.input{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px}
.btn-full{width:100%}
.muted{color:#6b7280;font-size:14px}
.muted a{color:#0ea5a8;text-decoration:underline}