:root { --brand:#2563eb; }
body { font:16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.navbar .btn { border-radius: 999px; }
.border { border-color: #e9ecef !important; }
.rounded-4 { border-radius: 1rem !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }

/* พื้นหลังไล่เฉดแบบสุภาพสำหรับ Hero */
.hero-gradient{
  position: relative;
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(16,185,129,.15), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(59,130,246,.12), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.py-lg-6{ padding-top:5rem!important; padding-bottom:5rem!important; }

.rounded-4 { border-radius: 1rem !important; }
.hover-card:hover { transform: translateY(-2px); transition: .2s ease; }


/* Timeline */
.timeline{position:relative;margin:0;padding:0}
.timeline:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e9ecef}
.timeline-item{position:relative;padding-left:40px;margin-bottom:24px}
.timeline-marker{position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%;background:#0d6efd;border:2px solid #fff;box-shadow:0 0 0 2px #e9ecef}
.timeline-content{background:#fff;border:1px solid #e9ecef;border-radius:12px;padding:16px}

/* เพิ่มสัมผัสนุ่ม ๆ ให้การ์ด */
.hover-card{ transition: transform .2s ease, box-shadow .2s ease; }
.hover-card:hover{ transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }

/* ปรับสไตล์ข้อความช่วยเหลือฟอร์มให้ดูสะอาด */
.form-text{ color:#6c757d; }

/* === Hacker Luxe Nav === */
:root{
  --hk-bg:#0b1220;           /* พื้นหลังเข้ม */
  --hk-bg-hi:#111a2e;        /* ไฮไลต์ */
  --hk-grid:rgba(255,255,255,.035);
  --hk-accent:#22d3ee;       /* cyan */
  --hk-accent-2:#10b981;     /* emerald */
  --hk-text:#e2e8f0;         /* slate-200 */
  --hk-text-dim:#94a3b8;     /* slate-400 */
}

.hacker-nav{
  background:
    radial-gradient(1200px 420px at 10% -200px, var(--hk-bg-hi) 0%, var(--hk-bg) 60%) ,
    linear-gradient(180deg, rgba(34,211,238,.08), rgba(16,185,129,0) 70%);
  border-bottom: 1px solid rgba(34,211,238,.22);
  position: relative;
}

/* subtle grid */
.hacker-nav::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(transparent 23px, var(--hk-grid) 24px),
    linear-gradient(90deg, transparent 23px, var(--hk-grid) 24px);
  background-size: 24px 24px;
  pointer-events:none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}

/* brand: แบบ monospace + glow เบาๆ */
.brand-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .5px;
  color: var(--hk-accent) !important;
  text-shadow: 0 0 8px rgba(34,211,238,.35);
}

/* เคอร์เซอร์กระพริบ */
.cursor-blink{
  display:inline-block; margin-left:2px; width:.6ch; height:1.1em; vertical-align:-.15em;
  background: linear-gradient(180deg, var(--hk-accent), var(--hk-accent-2));
  box-shadow: 0 0 10px rgba(34,211,238,.55);
  animation: blink 1.2s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ลิงก์เมนูแบบ ghost + เส้นเรืองใต้ลิงก์ */
.navbar-dark .navbar-nav .nav-link{
  color: var(--hk-text-dim);
  position: relative;
  padding: .5rem .75rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{
  color: var(--hk-text);
}
.link-ghost::after{
  content:"";
  position:absolute; left:.6rem; right:.6rem; bottom:.35rem;
  height:2px; transform: scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--hk-accent), var(--hk-accent-2));
  box-shadow: 0 0 10px rgba(34,211,238,.55);
  transition: transform .18s ease-in-out;
}
.link-ghost:hover::after, .link-ghost:focus::after, .nav-link.active.link-ghost::after{
  transform: scaleX(1);
}
.nav-link.active{ color: var(--hk-text) !important; }

/* ปุ่ม Contact โทนแฮกเกอร์หรู */
.btn-hacker{
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: 999px;
  color:#04131a;
  background: linear-gradient(90deg, var(--hk-accent), var(--hk-accent-2));
  border:1px solid rgba(34,211,238,.4);
  box-shadow: 0 0 10px rgba(34,211,238,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn-hacker:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 14px rgba(34,211,238,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ปรับข้อความใน nav ให้สว่างขึ้นนิด */
.hacker-nav .navbar-brand,
.hacker-nav .nav-link{ text-shadow: 0 0 1px rgba(255,255,255,.05); }


/* === Tech / Circuit Hero Background (dark, premium) === */
:root{
  --tech-bg: #0b1220;        /* พื้นเข้ม */
  --tech-hi: #111a2e;        /* ไฮไลต์ */
  --tech-line: rgba(255,255,255,.04); /* เส้นกริด */
  --tech-cyan: #22d3ee;      /* accent cyan */
  --tech-emerald: #10b981;   /* accent emerald */
  --tech-text: #e2e8f0;      /* ตัวอักษรหลักบนพื้นเข้ม */
  --tech-dim: #94a3b8;       /* ตัวอักษรรอง */
}

/* ใช้กับ section ด้านบนของแต่ละหน้าแทน hero-gradient */
.hero-tech{
  position: relative;
  color: var(--tech-text);
  background-color: var(--tech-bg);
  overflow: clip;
  /* ไล่เฉด + glow เบา ๆ */
  background-image:
    radial-gradient(1200px 480px at 10% -15%, var(--tech-hi) 0%, transparent 60%),
    radial-gradient(900px 400px at 105% 0%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(800px 400px at -5% 100%, rgba(16,185,129,.10), transparent 60%),
    /* เส้นกริดแนวนอน/แนวตั้ง */
    repeating-linear-gradient(0deg,  transparent 23px, var(--tech-line) 24px),
    repeating-linear-gradient(90deg, transparent 23px, var(--tech-line) 24px);
  background-size: cover, cover, cover, 24px 24px, 24px 24px;
  border-bottom: 1px solid rgba(34,211,238,.22);
}

/* จุด node เรือง ๆ + เคลื่อนไหวช้า ๆ */
.hero-tech::before,
.hero-tech::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
}
.hero-tech::before{
  /* จุดเล็ก ๆ บนกริด */
  background:
    radial-gradient(circle at 8% 22%, rgba(34,211,238,.28) 1.2px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(16,185,129,.25) 1.2px, transparent 2px),
    radial-gradient(circle at 78% 78%, rgba(34,211,238,.25) 1.2px, transparent 2px),
    radial-gradient(circle at 24% 74%, rgba(16,185,129,.25) 1.2px, transparent 2px);
  mix-blend-mode: screen;
}
.hero-tech::after{
  /* glow เคลื่อนช้า ๆ */
  background:
    radial-gradient(600px 220px at 20% 15%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(520px 200px at 80% 85%, rgba(16,185,129,.12), transparent 60%);
  filter: blur(1px);
  animation: tech-drift 20s ease-in-out infinite alternate;
}
@keyframes tech-drift{
  to{ background-position: 28% 25%, 86% 90%; }
}

/* ปรับสีตัวอักษรย่อยใน hero */
.hero-tech .text-secondary{ color: var(--tech-dim) !important; }

/* การ์ดยังเป็นพื้นขาวเพื่อคอนทราสต์สวย */
.card, .bg-white{ background-color:#fff; }

/* เผื่อผู้ใช้ตั้ง Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .hero-tech::after{ animation: none; }
}

/* แตะเอฟเฟกต์ hover การ์ดเดิมให้ดูพรีเมียมขึ้นเล็กน้อย */
.hover-card{ transition: transform .2s ease, box-shadow .2s ease; }
.hover-card:hover{ transform: translateY(-2px); box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.08); }

/* Global typography (English-first, crisp on Windows) */
html, body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
h1, .display-1, .display-2, .display-5 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
h2, h3, h4 { font-weight: 700; }
.small, .text-secondary { letter-spacing: 0; }

/* Brand in navbar: hacker luxe */
.brand-mono{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 600;
}

.card-img-top{ border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.card h6, .card .h6{ letter-spacing: -.01em; }
.badge{ border-radius: 999px; }


/* Focus cards – icon header (no images needed) */
.focus-card{ border-radius: .75rem; overflow: hidden; }
.focus-card__head{
  height: 140px;
  position: relative;
  background:
    radial-gradient(900px 360px at 10% -10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(780px 360px at 105% 0%, rgba(16,185,129,.12), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #111a2e 100%),
    repeating-linear-gradient(0deg, transparent 23px, rgba(255,255,255,.04) 24px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.04) 24px);
  border-bottom: 1px solid rgba(34,211,238,.18);
}

/* circular gradient icon */
.focus-icon{
  position: absolute; left: 16px; bottom: -24px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hk-accent, #22d3ee), var(--hk-accent-2, #10b981));
  box-shadow: 0 8px 24px rgba(34,211,238,.25), inset 0 0 0 1px rgba(255,255,255,.16);
}
.focus-icon i{ font-size: 1.4rem; color:#031019; }

/* chips */
.chip{
  display:inline-block; padding:.28rem .6rem; border-radius:999px;
  font-size:.75rem; border:1px solid #e9ecef; background:#fff;
}

/* hover polish */
.hover-card{ transition:.2s ease; }
.hover-card:hover{ transform: translateY(-2px); box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.08); }

/* ===== Cyber–Purple Theme ===== */
:root{
  /* แกนสีใหม่ (ม่วงไซเบอร์) */
  --hk-accent:   #a78bfa;  /* lavender */
  --hk-accent-2: #7c3aed;  /* violet */
  --hk-text:     #e2e8f0;
  --hk-text-dim: #a1a1aa;
}

/* NAV: glow + เส้นใต้ลิงก์เป็นม่วง */
.hacker-nav{
  background:
    radial-gradient(1200px 420px at 10% -200px, #151a2e 0%, #0b1220 60%),
    linear-gradient(180deg, rgba(167,139,250,.10), rgba(124,58,237,0) 70%);
  border-bottom: 1px solid rgba(167,139,250,.28);
}
.link-ghost::after{
  background: linear-gradient(90deg, var(--hk-accent), var(--hk-accent-2));
  box-shadow: 0 0 10px rgba(167,139,250,.55);
}
.brand-mono{
  color: var(--hk-accent) !important;
  text-shadow: 0 0 8px rgba(167,139,250,.35);
}

/* ปุ่ม Contact ไล่เฉดม่วง */
.btn-hacker{
  background: linear-gradient(90deg, var(--hk-accent), var(--hk-accent-2));
  border:1px solid rgba(167,139,250,.45);
  box-shadow: 0 0 10px rgba(167,139,250,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* HERO: พื้นหลัง Tech ใช้ม่วงเป็นแสงเนียน ๆ */
.hero-tech{
  color: var(--hk-text);
  background-color:#0b1220;
  background-image:
    radial-gradient(1200px 480px at 10% -15%, #141a2e 0%, transparent 60%),
    radial-gradient(900px 400px at 105% 0%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(800px 400px at -5% 100%, rgba(124,58,237,.14), transparent 60%),
    repeating-linear-gradient(0deg,  transparent 23px, rgba(255,255,255,.04) 24px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.04) 24px);
  border-bottom: 1px solid rgba(167,139,250,.25);
}
.hero-tech .text-secondary{ color: var(--hk-text-dim) !important; }

/* FOCUS CARDS: หัวการ์ด + ไอคอนไล่เฉดม่วง */
.focus-card__head{
  background:
    radial-gradient(900px 360px at 10% -10%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(780px 360px at 105% 0%, rgba(124,58,237,.14), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #111a2e 100%),
    repeating-linear-gradient(0deg, transparent 23px, rgba(255,255,255,.04) 24px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.04) 24px);
  border-bottom: 1px solid rgba(167,139,250,.22);
}
.focus-icon{
  background: linear-gradient(90deg, var(--hk-accent), var(--hk-accent-2));
  box-shadow: 0 8px 24px rgba(167,139,250,.25), inset 0 0 0 1px rgba(255,255,255,.16);
}

/* === Pro CTA (Cyber–Purple) === */
.cta-pro{
  color: var(--hk-text, #e2e8f0);
  background:
    radial-gradient(1100px 420px at 8% -10%, rgba(167,139,250,.16), transparent 60%),
    radial-gradient(900px 360px at 105% 0%, rgba(124,58,237,.12), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #101828 100%),
    repeating-linear-gradient(0deg, transparent 23px, rgba(255,255,255,.04) 24px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.04) 24px);
  border: 1px solid rgba(167,139,250,.22);
}

/* chips */
.chip{
  display:inline-block;
  padding:.32rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  background:#fff;
  border:1px solid #e9ecef;
}
.chip-glow{
  border-color: rgba(167,139,250,.35);
  box-shadow: 0 0 0 2px rgba(167,139,250,.08) inset;
}

/* gradient icon bubble */
.bg-gradient-cta{
  background: linear-gradient(90deg, var(--hk-accent, #a78bfa), var(--hk-accent-2, #7c3aed));
  color:#0b1120;
  box-shadow: 0 8px 24px rgba(167,139,250,.25), inset 0 0 0 1px rgba(255,255,255,.16);
}
.place-center{ place-items: center; }

/* primary CTA button */
.btn-cta{
  --bg1: var(--hk-accent, #a78bfa);
  --bg2: var(--hk-accent-2, #7c3aed);
  color:#0b1120;
  background: linear-gradient(90deg, var(--bg1), var(--bg2));
  border:1px solid rgba(167,139,250,.45);
  box-shadow: 0 0 10px rgba(167,139,250,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn-cta:hover{ filter: brightness(1.05); }

/* ===== Readability Patch for CTA ===== */

/* พื้น CTA ม่วงไซเบอร์แบบเข้มแต่ไม่กินตัวอักษร */
.cta-pro{
  color:#e8edf7;
  background:
    radial-gradient(1100px 420px at 8% -10%, rgba(167,139,250,.14), transparent 60%),
    radial-gradient(900px 360px at 105% 0%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(180deg, #0d1322 0%, #111a2e 100%); /* เข้มขึ้นเล็กน้อย */
  border: 1px solid rgba(167,139,250,.25);
}

/* หัวข้อ/ข้อความหลักให้สว่างและหนาขึ้น */
.cta-pro h2{ color:#f8fafc; font-weight:800; letter-spacing:-.01em; }
.cta-pro p{ color:#d8e0ea; }
.cta-pro .text-secondary{ color:#c9d1db !important; }
.cta-pro li{ color:#d8e0ea; line-height:1.6; }

/* ไอคอนติ๊กให้เด่นขึ้น */
.cta-pro .bi-check2-circle{ color:#22c55e !important; filter: drop-shadow(0 0 6px rgba(34,197,94,.25)); }

/* ชิปให้คอนทราสต์ชัด (พื้นขาว ตัวหนังสือเข้ม) */
.chip{
  background:#ffffff;
  color:#0f172a;
  border:1px solid #e5e7eb;
  font-weight:600;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.chip i{ color:#6b7280; }

/* การ์ดฝั่งขวา: ตัวเลขเข้ม, คำอธิบายสีเทาชัด */
.cta-card .h5, .cta-card .value{ color:#0f172a; font-weight:800; }
.cta-card .text-secondary{ color:#64748b !important; }

/* ปุ่มหลักให้อ่านง่ายบนกราเดียนต์ม่วง */
.btn-cta{
  color:#ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  border-color: rgba(167,139,250,.55);
  box-shadow: 0 6px 14px rgba(124,58,237,.25), inset 0 0 0 1px rgba(255,255,255,.10);
}
.btn-cta:hover{ filter: brightness(1.07); }

/* เว้นระยะให้โปร่งตา */
.cta-pro .chip{ margin-bottom:.25rem; }
.cta-pro .list-unstyled{ margin-top:.25rem; }

/* ===== Tech Footer (Cyber–Purple) ===== */
.footer-tech{
  color: var(--hk-text, #e2e8f0);
  background:
    radial-gradient(1100px 420px at 6% -10%, rgba(167,139,250,.14), transparent 60%),
    radial-gradient(900px 360px at 105% 0%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #111a2e 100%),
    repeating-linear-gradient(0deg, transparent 23px, rgba(255,255,255,.035) 24px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.035) 24px);
  border-top: 1px solid rgba(167,139,250,.28);
}

.footer-hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Footer links: subtle -> accent underline on hover */
.footer-link{
  color: var(--hk-text-dim, #a1a1aa);
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.footer-link:hover{ color: var(--hk-text, #e2e8f0); }
.footer-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  transform: scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--hk-accent, #a78bfa), var(--hk-accent-2, #7c3aed));
  box-shadow: 0 0 8px rgba(167,139,250,.45);
  transition: transform .18s ease-in-out;
}
.footer-link:hover::after{ transform: scaleX(1); }

/* Social pills (icon circles with gradient) */
.social-pill{
  width: 38px; height: 38px; display:grid; place-items:center;
  border-radius:999px; color:#0b1120;
  background: linear-gradient(90deg, var(--hk-accent, #a78bfa), var(--hk-accent-2, #7c3aed));
  border:1px solid rgba(167,139,250,.45);
  box-shadow: 0 8px 24px rgba(167,139,250,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}
.social-pill:hover{ filter: brightness(1.05); }

/* Back to top alignment tweak */
.top-link{ display:inline-flex; align-items:center; gap:.25rem; }

/* Typography polish */
html, body{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
}
h1,h2,h3,.h1,.h2,.h3{ letter-spacing:-.02em; }

/* Avatar */
.about-avatar{
  width: 128px; height: 128px; object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Timeline */
.timeline{ position:relative; padding-left: 1.25rem; }
.timeline::before{
  content:""; position:absolute; left:.2rem; top:.25rem; bottom:.25rem; width:2px;
  background: linear-gradient(180deg, var(--hk-accent, #a78bfa), var(--hk-accent-2, #7c3aed));
  opacity:.6;
}
.tl-item{ position:relative; padding-left: 1.25rem; margin-bottom: 1rem; }
.tl-dot{
  position:absolute; left:-.2rem; top:.3rem; width:10px; height:10px; border-radius:50%;
  background: linear-gradient(90deg, var(--hk-accent, #a78bfa), var(--hk-accent-2, #7c3aed));
  box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}
.tl-title{ font-weight:700; }
.tl-meta{ margin-top:.1rem; }
.tl-desc{ margin-top:.25rem; }

/* Reuse existing focus-card head/icon from previous setup */
.focus-card__head{
  height: 120px;
  background:
    radial-gradient(900px 360px at 10% -10%, rgba(167,139,250,.18), transparent 60%),
    radial-gradient(780px 360px at 105% 0%, rgba(124,58,237,.14), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #111a2e 100%),
    repeating-linear-gradient(0deg, transparent 23px, rgba(255,255,255,.04) 24px),
    repeating-linear-gradient(90deg, transparent 23px, rgba(255,255,255,.04) 24px);
  border-bottom: 1px solid rgba(167,139,250,.22);
  position: relative;
}
.focus-icon{
  position:absolute; left:16px; bottom:-24px; width:56px; height:56px;
  display:grid; place-items:center; border-radius:999px;
  background: linear-gradient(90deg, var(--hk-accent, #a78bfa), var(--hk-accent-2, #7c3aed));
  color:#0b1120;
  box-shadow: 0 8px 24px rgba(167,139,250,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* CTA button uses existing .btn-cta colors */
.btn-cta{ color:#fff !important; }

/* Contact: subtle polish */
.contact-modern .form-label{ font-weight:600; }
.contact-modern .form-control,
.contact-modern .form-select{
  border-radius: .75rem;
  border-color: #e7ecf3;
}
.contact-modern .form-control:focus,
.contact-modern .form-select:focus{
  border-color: rgba(167,139,250,.55);
  box-shadow: 0 0 0 .25rem rgba(167,139,250,.15);
}

/* ====== Buttons Fix ====== */
button {
  font-family: 'Segoe UI', sans-serif; /* ฟอนต์เดียวกันทุกปุ่ม */
  font-size: 16px;                     /* ขนาดฟอนต์เท่ากัน */
  line-height: 1.5;                    /* ให้อักษรอยู่กลางแนวตั้ง */
  padding: 10px 20px;                  /* ช่องไฟสม่ำเสมอ */
  border-radius: 6px;
  border: none;
  cursor: pointer;
  vertical-align: middle;              /* ป้องกันกระโดดขึ้น/ลง */
}