:root{
  --bg:#ffffff; --text:#101214; --muted:#5b616e;
  --accent:#f4a61c; --accent-dark:#d68f12; --brand:#101214;
  --container:1200px; --radius:14px; --shadow:0 10px 24px rgba(16,18,20,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:.2s}
.btn-lg{padding:14px 22px;font-size:18px}
.btn-sm {
  padding: 8px 14px;
  font-size: 14px;
}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-dark)}
.btn-outline{background:#fff;color:var(--text);border-color:#e3e6ea}.btn-outline:hover{border-color:#cfd5dc}
.site-header{position:sticky;top:0;z-index:50;background:#fff;backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid #f1f3f5}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;letter-spacing:.5px;color:var(--brand);text-decoration:none;font-size:20px}
.brand-accent{color:var(--accent);font-weight:800}
.topnav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}

.topnav a{margin:0 6px;color:#2b3036;text-decoration:none;font-weight:600}
.topnav a:hover{color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:12px}
.lang{position:relative}
.lang-btn{border:1px solid #e5e8ec;background:#fff;border-radius:999px;padding:8px 10px;font-weight:700;cursor:pointer}
.lang-menu{position:absolute;right:0;top:110%;background:#fff;border:1px solid #eceff3;border-radius:12px;box-shadow:var(--shadow);min-width:160px;display:none;z-index:1000}
.lang.open .lang-menu{display:block}
.lang-menu a{display:block;padding:10px 12px;text-decoration:none;color:#14181d}
.lang-menu a.active{font-weight:800;color:var(--accent)}
.lang-menu a:hover{background:#f8fafc}
.hero {
  position: relative;
  min-height: 540px; /* หรือ 100vh */
  color: #fff;

background: linear-gradient(to bottom right, rgba(11,19,43,0.4), rgba(28,37,65,0.7)),
            url("../img/hero1.jpg") center/cover no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: 0 24px;          /* เอา padding บน-ล่างออก เหลือแต่ด้านข้าง */
  max-width: 800px;
  margin: 0 auto;
}
.badge{display:inline-block;background:#fff;color:#333;border-radius:999px;padding:6px 12px;font-weight:700;margin-bottom:16px;box-shadow:var(--shadow)}
.hero-logo{height:62px;margin-bottom:12px}
.hero h1{font-size:56px;line-height:1.05;margin:10px 0 12px;font-weight:800;color:var(--accent)}
.hero .sub{max-width:820px;margin:0 auto 20px;font-size:18px;color:#eef0f3}
.stats{background:#fff;padding:48px 0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:#fff;border:1px solid #eceff3;border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow)}
.stat-value{font-size:28px;font-weight:800;color:var(--accent)}
.stat-label{color:var(--muted);margin-top:6px;font-weight:600}
.brands{padding:40px 0}
.brands h2{text-align:center;font-size:28px;margin-bottom:18px}
.brand-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.brand-card{border:1px solid #eceff3;border-radius:12px;padding:22px;text-align:center;background:#fff;box-shadow:var(--shadow);font-weight:700}
.more{text-align:center;color:var(--muted);margin-top:14px}
.more-text{text-align:center;color:var(--muted);margin-top:14px; color:var(--accent)}
.pricing{background:#f8fafc;padding:56px 0}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid #eceff3;border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:20px}
.price{font-size:26px;font-weight:800;color:var(--accent);margin:6px 0 14px}
.card ul{margin:0 0 18px 18px}
.card-emphasis{border:2px solid var(--accent);transform:translateY(-4px)}
.card-emphasis .btn-accent{box-shadow:0 6px 16px rgba(244,166,28,.35)}
.contact{padding:56px 0}
.contact .contact-form{display:flex;gap:12px;justify-content:center}
.contact input{min-width:320px;padding:12px 14px;border-radius:999px;border:1px solid #e1e6ec;outline:none}
.contact input:focus{border-color:var(--accent)}
.site-footer{border-top:1px solid #f1f3f5;padding:20px 0;color:var(--muted);font-size:14px}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}
.made{opacity:.9}
@media (max-width:992px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .hero h1{font-size:42px}
  .hero .sub{font-size:16px}
}

/* ===== MaxPay Features (scoped) ===== */
.mp-feat { padding: 56px 0; background: #fff8e6; } /* สีพื้นอ่อนสไตล์ภาพตัวอย่าง */
.mp-feat__container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.mp-feat__eyebrow { color: #d97706; font-weight: 700; margin: 0 0 10px; }
.mp-feat__title { margin: 0; font-size: 28px; font-weight: 800; text-align: center; }
.mp-feat__sub { margin: 8px 0 32px; color: #6b7280; text-align: center; }

.mp-feat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.mp-feat__card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 16px rgba(17,24,39,.04);

  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mp-feat__card--full {
  grid-column: 1 / -1;           /* กินเต็มแถวล่าง */
  background: #fff7ed;           /* อมส้มอ่อน */
  border-color: #fde68a;
}

.mp-feat__icon {
  font-size: 32px;
  margin-right: 12px;
  flex-shrink: 0;
}

.mp-feat__body {
  display: flex;
  flex-direction: column;
}

.mp-feat__card-title { margin: 2px 0 6px; font-size: 16px; font-weight: 800; color: #111827; }
.mp-feat__card-text { margin: 0; color: #6b7280; font-size: 14px; }

/* Responsive */
@media (max-width: 1024px) {
  .mp-feat__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mp-feat__grid { grid-template-columns: 1fr; }
}

.mp-feat__card--full {
  grid-column: 1 / -1;
  background: #fff7ed;
  border-color: #fde68a;

  flex-direction: column;   /* วาง icon + text ซ้อนแนวตั้ง */
  align-items: center;      /* กึ่งกลางแนวนอน */
  text-align: center;
}
.mp-feat__card--full .mp-feat__icon {
  margin: 0 0 8px;          /* เว้นด้านล่างแทนด้านขวา */
}

/* =========================================================
   Banks & Payment Methods (light)
   ========================================================= */
.mp-accept { padding: 56px 0; background: #ffffff; }
.mp-accept__container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.mp-accept__header { text-align: center; margin-bottom: 28px; }
.mp-accept__title { margin: 0; font-size: 28px; font-weight: 800; color: #111827; }
.mp-accept__sub { margin: 8px 0 0; color: #6b7280; }

.mp-accept__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.mp-accept__col {}

.mp-accept__h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #111827; }

.mp-accept__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mp-accept__item { display: flex; gap: 10px; align-items: center; padding: 10px 5px; border: 0px solid #f1f5f9; border-radius: 12px; background: #fff; }
.mp-accept__badge {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; background: #fff1c7; color: #b45309; font-size: 16px; flex: 0 0 28px;
}

.mp-accept__checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mp-accept__checklist li {
  position: relative; padding-left: 28px; color: #374151; background: #fff; border: 0px solid #f1f5f9; border-radius: 12px; padding: 10px 12px 10px 36px;
}
.mp-accept__checklist li::before {
  content: "✔"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; display: grid; place-items: center; font-size: 12px;
  color: #b45309; background: #fff1c7; border-radius: 6px;
}

@media (max-width: 900px) { .mp-accept__grid { grid-template-columns: 1fr; } }

/* =========================================================
   Why MaxPay (dark)
   ========================================================= */
.mp-why { padding: 56px 0; background: #0b1220; color: #e5e7eb; }
.mp-why__container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.mp-why__header { text-align: center; margin-bottom: 28px; }
.mp-why__title { margin: 0; font-size: 28px; font-weight: 800; color: #ffffff; }
.mp-why__sub { margin: 8px 0 0; color: #9ca3af; }

.mp-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mp-why__card { text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; }
.mp-why__icon {
  width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 10px;
  display: grid; place-items: center; background: rgba(255,255,255,0.08); font-size: 22px;
}
.mp-why__card-title { margin: 0 0 6px; color: #fff; font-size: 16px; font-weight: 800; }
.mp-why__text { margin: 0; color: #cbd5e1; font-size: 14px; }

@media (max-width: 1024px) { .mp-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mp-why__grid { grid-template-columns: 1fr; } }
.mp-accept__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0px solid #f1f5f9;
  border-radius: 12px;
  background: #fff;
}

.mp-accept__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px; /* เอาไว้ถ้าโลโก้เป็นสี่เหลี่ยม ให้ดูโค้งนิดนึง */
}

/* brands section (scoped) */
.brands .brand-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  align-items:center;
  text-align:center;
}
.brands .brand-card{display:flex;flex-direction:column;align-items:center;gap:8px}
.brands .brand-logo{
  width:140px; height:42px;
  object-fit:contain; display:block;
  filter:none;  /* เอฟเฟกต์เผื่อบางรูปพื้นโปร่ง */
}
.brands .brand-cap{color:#374151}
@media (max-width:1024px){ .brands .brand-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .brands .brand-row{grid-template-columns:1fr} }

/* ===== Solutions section (scoped) ===== */
.mp-sol { padding: 64px 0; background: #fff; }
.mp-sol__header { text-align: center; margin-bottom: 28px; }
.mp-sol__title { margin: 0 0 6px; font-size: 28px; font-weight: 800; color: #0b1220; }
.mp-sol__sub { margin: 0; color: #6b7280; }

.mp-sol__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mp-sol__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}

.mp-sol__card-title { margin: 0; font-size: 20px; font-weight: 800; color: #111827; }
.mp-sol__card-sub { margin: -2px 0 6px; color: #6b7280; }

/* ul.mp-sol__list */
.mp-sol__list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 10px;
  color: #374151;
}

.mp-sol__list li{
  --icon-size:18px;
  --icon-gap:8px;
  display:flex;
  align-items:center;          /* ไอคอน+ข้อความสูงเสมอกัน */
  padding-left:var(--pad-left);/* ยังรองรับ pl-* */
}
.mp-sol__list li::before{
  content:"✔";
  display:inline-grid; place-items:center;
  width:var(--icon-size); height:var(--icon-size);
  margin-right:var(--icon-gap);
  border-radius:6px; font-size:12px;
  color:#b45309; background:#fff1c7;
}
.mp-sol__btn { width: 100%; margin-top: auto; } /* ปุ่มชิดล่างและเต็มความกว้าง */

/* Responsive */
@media (max-width: 1024px) { .mp-sol__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mp-sol__grid { grid-template-columns: 1fr; } }

:root{
  --mp-cta-bg:#F29F05;     /* สีส้ม */
  --mp-cta-fg:#0B1324;     /* พื้นหลัง footer */
  --mp-cta-text:#fff;
  --mp-cta-radius:22px;
  --mp-cta-container:1120px;
}

.mp-cta{
  position:relative;
  background:var(--mp-cta-bg);
  color:var(--mp-cta-text);
  padding:78px 20px;
  overflow:hidden;
}

.mp-cta__container{
  max-width:var(--mp-cta-container);
  margin:0 auto;
  text-align:center;
}

.mp-cta__title{
  font-size:clamp(22px, 3.2vw, 40px);
  font-weight:800;
  margin:0 0 14px;
}

.mp-cta__desc{
  font-size:clamp(14px, 1.4vw, 18px);
  opacity:.95;
  margin:0 auto 24px;
  max-width:880px;
}

.mp-cta__btn{
  display:inline-block;
  background:#0F1E3A;
  color:#fff;
  border-radius:12px;
  padding:12px 20px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.mp-cta__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 0 rgba(0,0,0,.18), 0 14px 38px rgba(0,0,0,.20);
}

.mp-cta__wave{
  position:absolute;
  left:0; right:0;
  width:100%;
  height:84px;
  fill:var(--mp-cta-bg);
}

.mp-cta__wave--top{ top:-70px; }
.mp-cta__wave--bottom{ bottom:-70px; }

/* Rounded look on large screens (optional) */
@media (min-width:768px){
  /* .mp-cta{ border-radius:var(--mp-cta-radius); } */
}

:root {
  --footer-bg: #0B1324;      /* พื้นหลัง */
  --footer-text: #f5f5f5;    /* ตัวอักษร */
  --footer-accent: #F29F05;  /* สีทอง */
  --footer-link: #fff;
  --footer-btn-bg: #2563eb;  /* ปุ่มฟ้า */
}

.mp-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 48px 20px 24px;
  font-size: 15px;
}

.mp-footer__container {
  max-width: 1120px;
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 32px;
}

.mp-footer__brand {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
.mp-footer__brand span { color: var(--footer-accent); }

.mp-footer__desc {
  line-height: 1.6;
  opacity: .9;
}

.mp-footer__title {
  font-weight: 700;
  color: var(--footer-accent);
  margin-bottom: 14px;
}

.mp-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mp-footer__list li { margin-bottom: 8px; }
.mp-footer__list a {
  color: var(--footer-link);
  text-decoration: none;
}
.mp-footer__list a:hover { text-decoration: underline; }

.mp-footer__btn {
  display: inline-block;
  background: var(--footer-btn-bg);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.mp-footer__btn:hover { background: #1e4fd4; }

.mp-footer__bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  opacity: .85;
}

.mp-footer__credit {
  font-size: 13px;
  opacity: .7;
}

/* === Mobile Nav (hamburger) === */
.hamburger{display:none; border:0; background:transparent; padding:8px; cursor:pointer}
.hamburger-box{display:inline-block; width:24px; height:18px; position:relative}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after{
  position:absolute; left:0; right:0; height:2px; background:#2b3036; content:""; transition:.2s;
}
.hamburger-inner{top:8px}
.hamburger-inner::before{top:-8px}
.hamburger-inner::after{top:8px}
.hamburger[aria-expanded="true"] .hamburger-inner{background:transparent}
.hamburger[aria-expanded="true"] .hamburger-inner::before{transform:translateY(8px) rotate(45deg)}
.hamburger[aria-expanded="true"] .hamburger-inner::after{transform:translateY(-8px) rotate(-45deg)}

/* Drawer */
.mobile-nav{
  position:fixed; top:64px; /* header height from existing css */
  left:0; right:0; background:#fff; border-top:1px solid #eceff3;
  box-shadow:var(--shadow); display:none; z-index:49;
}
.mobile-nav.open{display:block; animation:navDrop .16s ease-out}
@keyframes navDrop{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)}}

.mobile-nav__links, .mobile-nav__cta{
  display:flex; flex-direction:column; gap:10px; padding:14px 20px;
}
.mobile-nav__links a{ color:#14181d; text-decoration:none; font-weight:700; padding:10px 6px; border-radius:10px }
.mobile-nav__links a:hover{ background:#f8fafc }
.mobile-nav__cta .btn{ width:100% }

/* Responsive rules */
@media (max-width: 900px){
  .topnav{display:none}
  .nav-cta{display:none}
  .hamburger{display:inline-block}
}