:root{
  --primary:#0A22A8; --primary-2:#1140c8; --accent:#00B2FF;
  --bg:#F5F8FF; --surface:#FFFFFF; --text:#0B1220; --muted:#5A6B8A;
  --radius:16px; --shadow:0 8px 24px rgba(10,34,168,.08); --ring:0 0 0 3px rgba(0,178,255,.20)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins","Prompt",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:24px}
.card{background:var(--surface);border:1px solid rgba(10,34,168,.08);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:999px;border:1px solid transparent;font-weight:600;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--primary));color:#fff;box-shadow:0 12px 30px rgba(0,178,255,.25)}
.btn-outline{background:transparent;border-color:rgba(10,34,168,.25);color:var(--primary)}
.chip{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .7rem;border-radius:999px;background:rgba(0,178,255,.10);color:var(--primary);border:1px solid rgba(0,178,255,.25)}
.bg-white{background:#fff;color:var(--text)}
.bg-blue{background:linear-gradient(180deg, var(--primary), #0b1c6a);color:#fff}

header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter: blur(10px);border-bottom:1px solid rgba(10,34,168,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo img{height:60px;display:block;object-fit:contain}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav-cta{display:flex;gap:10px}
.menu-btn{display:none}

.intro-band{background:#fff;border-bottom:1px solid rgba(10,34,168,.08)}
.intro-band .container{padding:14px 20px;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.95rem}
.intro-band .dot{width:6px;height:6px;border-radius:999px;background:rgba(10,34,168,.3)}

.hero{padding:72px 0 24px}
.hero-inner{display:grid;grid-template-columns:0.8fr 1.2fr;gap:36px;align-items:center}
h1{font-size:clamp(2rem, 2.5vw + 1rem, 3.2rem);line-height:1.12;margin:.2rem 0 1rem}
.lead{font-size:clamp(1rem,1vw + .6rem,1.15rem);color:var(--muted);max-width:60ch}
.hint{color:var(--muted)}
.hero-cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.hero-divider{height:1px;margin:24px 0 0; background:linear-gradient(90deg, rgba(10,34,168,0), rgba(10,34,168,.12), rgba(10,34,168,0))}
.phone{border-radius:28px;overflow:hidden;max-width:300px;margin:0 auto}

.section{padding:60px 0}
.section h2{
  font-size:clamp(1.6rem, 1.2vw + 1rem, 2.2rem);
  margin:0 0 8px;
  color: var(--primary);   /* น้ำเงินแบรนด์ */
}
.bg-section-blue h2{ color:#fff; }
.section p.lead{max-width:60ch}
.features{grid-template-columns:repeat(3,1fr)}
.feature{padding:22px}
/* กล่องวางไอคอนบนการ์ด */
.feature .icon{
  width: 56px; height: 56px;
  border-radius: 12px;
  background: #EEF4FF;               /* พื้นอ่อนแบบตัวอย่าง */
  display: inline-flex;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(10,34,168,.08);
  margin-bottom: 14px;
}

/* รูป PNG ข้างใน */
.feature .icon img{
  width: 150px; height: 150px;         /* ปรับขนาดไอคอนได้ที่นี่ */
  object-fit: contain; display:block;
}

/* ถ้าการ์ดเดิมเซ็ต .icon > svg ไว้ ให้ปิด margin/padding เดิมทับได้ */
.feature .icon svg{ display:none !important; }


.steps{grid-template-columns:repeat(3,1fr)}
.step{padding:24px}

.grid.three{grid-template-columns:repeat(3,1fr)}
.plan{padding:26px}
.plan.featured{border-color:rgba(61,125,255,.5)}

#download .container.cta{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.snippet{padding:14px;overflow:auto;background:#0f172a;color:#c7d2fe;border-radius:12px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
#contact input[type="email"], #contact textarea{border:1.5px solid rgba(10,34,168,.28);background:#fff;color:var(--text);padding:12px 14px;border-radius:12px;transition:border-color .2s, box-shadow .2s}
#contact input[type="email"]:focus, #contact textarea:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}

footer .foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer .links{display:flex;gap:12px}

img{max-width:100%;height:auto;display:block}
@media (max-width: 1024px){.hero-inner{grid-template-columns:1fr}}
@media (max-width: 860px){
  .features,.steps,.grid.three{grid-template-columns:1fr}
  nav ul{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width: 700px){
  #download .container.cta{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width: 480px){
  h1{font-size:2rem;line-height:1.15}
  .hero{padding:40px 0 16px}
  .section{padding:56px 0}
}

/* Big banner - full-bleed */
.big-banner{
  margin:0;
  padding:0;
  min-height:420px;
  background:linear-gradient(180deg,#0A76F6,#0A22A8); /* พื้นหลังน้ำเงิน */
  color:#fff;
}

.big-banner .overlay{
  max-width:1200px;
  margin:0 auto;
  padding:10px 10px;
  display:grid;
  grid-template-columns:1.1fr .9fr; /* ซ้ายข้อความ / ขวารูป */
  align-items:center;
  gap:28px;
}

/* สไตล์ข้อความซ้าย + รูปขวา */
.big-banner .headline h1{
  font-size:clamp(2rem,2.6vw + 1rem,3.2rem);
  line-height:1.1;
  margin:0 0 8px;
  font-weight:800;
  color:#fff;
}
.big-banner .headline .lead{ color:#e6edff; margin:0; }

.big-banner .art{ display:flex; justify-content:flex-end; }
.big-banner .art img{
  max-height:600px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.25));
}
@media (max-width:1024px){
  .big-banner .overlay{ grid-template-columns:1fr .9fr; }
}
@media (max-width:720px){
  .big-banner{ min-height:260px; }
  .big-banner .overlay{ grid-template-columns:1fr; gap:16px; }
  .big-banner .art{ justify-content:center; }
  .big-banner .art img{ max-height:220px; }
}


/* Benefit image section */
.benefit .frame{
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  min-height:auto;
  display:block;
  overflow:visible;
  padding:0;
}
.benefit img{width:100%;height:auto;display:block}
.benefit .container{padding-top:28px}
@media (max-width:720px){.benefit .frame{min-height:220px}}

/* Download / QR layout */
.download-side{display:flex;flex-direction:column;gap:16px}
.qr-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.qr-box{width:220px;max-width:40vw;background:#fff;border:1px solid rgba(10,34,168,.12);border-radius:12px;padding:8px}
.store-badges{display:flex;flex-direction:column;gap:12px}
.badge-btn{display:inline-flex;align-items:center;gap:10px;background:#111;color:#fff;border-radius:12px;padding:12px 14px;font-weight:600;text-decoration:none}
.badge-btn small{display:block;font-weight:400;opacity:.8;line-height:1}
.badge-btn .icon{width:18px;height:18px;border-radius:4px;background:#fff;opacity:.9}
@media (max-width:860px){.qr-wrap{flex-direction:row}.store-badges{flex-direction:row}}

/* Coverflow (3-up desktop, 1-up mobile) */
.coverflow-wrap{position:relative}
.coverflow{display:flex;gap:16px;align-items:stretch;justify-content:center}
.coverflow .slide{flex:0 0 clamp(260px,28vw,340px);background:#fff;border:1px solid rgba(10,34,168,.12);border-radius:16px;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease}
.coverflow .shot{aspect-ratio:9/16;background:linear-gradient(180deg,#eef3ff,#f8faff);border-bottom:1px solid rgba(10,34,168,.08);border-top-left-radius:16px;border-top-right-radius:16px;display:flex;align-items:center;justify-content:center;position:relative}
.coverflow .cap{padding:12px 14px}
.coverflow .slide.active{transform:scale(1.06);box-shadow:0 14px 40px rgba(10,34,168,.18)}
.coverflow-controls{display:flex;gap:10px;justify-content:center;margin-top:14px}
.coverflow-btn{border:1px solid rgba(10,34,168,.25);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
@media (max-width:760px){.coverflow{gap:12px}.coverflow .slide{flex:0 0 88vw}}

/* --- Adjusted spacing & alt control styles for How to register --- */
.coverflow-controls{margin-top:32px}
.coverflow-controls.style-a{gap:10px;justify-content:center}
.coverflow-controls.style-b{gap:12px;justify-content:center;flex-wrap:wrap}
.coverflow-controls.style-c{justify-content:space-between;align-items:center;padding:10px 14px;border:1px solid rgba(10,34,168,.18);border-radius:12px;background:#fff}
.coverflow-btn{min-width:44px;min-height:44px}
.cf-dots{display:inline-flex;gap:8px;align-items:center}
.cf-dot{width:8px;height:8px;border-radius:999px;background:#c7d2fe;border:1px solid rgba(10,34,168,.35)}
.cf-dot[aria-current="true"]{background:var(--primary);box-shadow:0 0 0 3px rgba(10,34,168,.12)}
@media (max-width:760px){.coverflow-controls{margin-top:24px}}
.coverflow-controls.style-b .cf-dots{flex-basis:100%;display:flex;justify-content:center;margin-bottom:8px;order:1}
.coverflow-controls.style-b #cf-prev,.coverflow-controls.style-b #cf-next{order:2}

/* Utility for checklists & tables */
.checklist{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
.checklist li{background:#fff;border:1px solid rgba(10,34,168,.12);border-radius:12px;padding:10px 12px;list-style:none;display:flex;gap:10px;align-items:flex-start}
/* ใหม่: บูลเล็ตเล็กลง */
.checklist li .mark{
  width:12px;
  height:12px;
  border-radius:4px;
  background:rgba(0,178,255,.12);
  border:1px solid rgba(0,178,255,.35);
  margin-top:8px;   /* ดันให้อยู่กึ่งกลางบรรทัดสวยขึ้น */
}

/* ── Checklist: Base ───────────────────────────────────────── */
.checklist{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 10px 0;
  list-style: none;
  padding-left: 0;
}
.checklist li{
  background: #fff;
  border: 1px solid rgba(10,34,168,.12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center; /* ให้ข้อความกึ่งกลางแนวเดียวกับไอคอน */
}

/* ── Layout A: สองคอลัมน์ + ไอคอนติ๊ก ───────────────────── */
.checklist.two-col{
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .checklist.two-col{ grid-template-columns: 1fr; }
}

/* ไอคอนวงกลม + ติ๊ก */
.checklist.tick li{
  position: relative;
  padding-left: 36px;         /* เผื่อที่สำหรับวงกลม */
}
.checklist.tick li::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;  /* ขนาดวงกลม */
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent, #00B2FF);
  box-shadow: 0 2px 8px rgba(0,0,0,.06) inset;
}
.checklist.tick li::after{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 5px; height: 8px;    /* ขนาดขีดติ๊ก */
  border-right: 2px solid var(--primary, #0A22A8);
  border-bottom: 2px solid var(--primary, #0A22A8);
}
/* ลดช่องว่างเฉพาะรายการที่ใส่ .tight */
.checklist.tight{ gap:8px; margin:6px 0; }
.checklist.two-col.tight{ gap:10px; }                 /* ช่องว่างระหว่างคอลัมน์ */
.checklist.tight li{
  padding:8px 10px;                                   /* เดิม 12px 14px */
  border-radius:10px;                                 /* มุมเล็กลงนิด */
  line-height:1.4; font-size:15px;                   /* กระชับบรรทัด */
}

/* ไอคอนติ๊กให้เล็กลง + ขยับชิดข้อความขึ้น */
.checklist.tight.tick li{ padding-left:28px; }        /* เดิม 36px */
.checklist.tight.tick li::before{
  left:8px; width:14px; height:14px;                  /* เดิม 16x16 */
  border-width:2px;
}
.checklist.tight.tick li::after{
  left:14px; width:4px; height:7px;                   /* เดิม 5x8 */
  border-right-width:2px; border-bottom-width:2px;
}

/* 3 คอลัมน์แน่นๆ และตอบสนองจอเล็ก */
.checklist.three-col{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;              /* ระยะห่างระหว่างการ์ด */
  margin:8px 0;
}
.checklist.three-col li{
  padding:10px 12px;     /* เตี้ยลงนิดลดที่ว่าง */
  border-radius:10px;
}
.checklist.three-col.tick li{ padding-left:30px; } /* เผื่อพื้นที่ไอคอนวงกลมเล็กลง */
.checklist.three-col.tick li::before{ left:10px; width:14px; height:14px; }
.checklist.three-col.tick li::after { left:16px; width:4px;  height:7px;  }

/* จอกลาง: เหลือ 2 คอลัมน์ */
@media (max-width: 1024px){
  .checklist.three-col{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* จอเล็ก: เหลือ 1 คอลัมน์ */
@media (max-width: 640px){
  .checklist.three-col{ grid-template-columns: 1fr; }
}


.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{background:#fff;border:1px solid rgba(10,34,168,.12);border-radius:12px;padding:14px}
.kpi .v{font-weight:800;font-size:1.25rem}
.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px}
.table th,.table td{border:1px solid rgba(10,34,168,.12);padding:10px 12px}
.table th{background:#f1f5ff;text-align:left}
@media(max-width:860px){.kpi-grid{grid-template-columns:1fr}}

/* Tabs for docs */
.tabs{margin-top:10px}
.tablist{display:flex;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid rgba(10,34,168,.12);border-radius:12px;padding:6px}
.tablist button{appearance:none;border:1px solid transparent;background:transparent;border-radius:10px;padding:8px 12px;font-weight:600;color:var(--muted);cursor:pointer}
.tablist button[aria-selected="true"]{color:var(--primary);background:rgba(0,178,255,.10);border-color:rgba(0,178,255,.25);box-shadow:var(--shadow)}
.tabpanel{margin-top:12px}
.tabpanel[hidden]{display:none}

/* Table tighten */
.table.compact th,.table.compact td{padding:8px 10px}

/* Callout note */
.callout{margin-top:10px;background:#fff;border:1px solid rgba(10,34,168,.15);border-radius:12px;padding:12px}
.callout.info{background:linear-gradient(180deg,#f4f8ff,#ffffff);border-color:rgba(0,178,255,.35)}
.callout h4{margin:0 0 6px 0;font-size:1rem}
.callout ol{margin:6px 0 0 18px;padding:0}
.callout ol li{margin:6px 0}

/* QA (criteria) — card-like FAQ styling */
#criteria .grid.one{gap:12px}
#criteria details{background:#fff;border:1px solid rgba(10,34,168,.12);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s}
#criteria details[open]{border-color:rgba(0,178,255,.35);box-shadow:0 16px 30px rgba(10,34,168,.10)}
#criteria details + details{margin-top:8px}
#criteria details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:700}
#criteria details summary::-webkit-details-marker{display:none}
#criteria details summary::before{content:"";width:0;height:0;border-left:12px solid var(--muted);border-top:8px solid transparent;border-bottom:8px solid transparent;transition:transform .28s cubic-bezier(.2,1.2,.2,1), border-left-color .2s ease;will-change:transform}
#criteria details summary::after{content:"";width:0;height:0;margin-left:auto;border-top:0;border-bottom:0}
#criteria details[open] summary::before{transform:rotate(90deg);border-left-color:#0a22aa;animation:tri-spring .36s cubic-bezier(.2,1.2,.2,1)}
#criteria details p{margin:10px 0 6px}
#criteria details ol{margin:8px 0 0 18px}
#criteria details ul{margin:8px 0 0 18px}
#criteria details li{margin:6px 0}
@keyframes tri-spring{0%{transform:rotate(0)}60%{transform:rotate(100deg)}80%{transform:rotate(80deg)}100%{transform:rotate(90deg)}}

/* Download buttons */
.dl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.dl-btn{appearance:none;border:1.5px solid rgba(10,34,168,.30);background:#fff;border-radius:12px;padding:14px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .2s, border-color .2s}
.dl-btn:hover{transform:translateY(-1px);border-color:rgba(0,178,255,.5);box-shadow:0 14px 30px rgba(10,34,168,.12)}
@media(max-width:1024px){.dl-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.dl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.dl-grid{grid-template-columns:1fr}}

/* Contact section polish */
.contact-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.contact-left{padding:6px 6px 6px 6px}
.contact-points{margin:6px 0 0 0;padding:0 0 0 18px}
.contact-points li{margin:6px 0}
.contact-right{padding:6px}
.contact-form{max-width:520px;margin-left:auto}
.contact-form input, .contact-form textarea{border:1.5px solid rgba(10,34,168,.28);background:#fff;padding:12px 14px;border-radius:12px;transition:border-color .2s, box-shadow .2s}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}
.contact-form .actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.contact-form .tiny{grid-column:1/-1;margin:6px 0 0}
@media(max-width:860px){.contact-wrap{grid-template-columns:1fr}.contact-form{max-width:100%;margin-left:0}}

/* Quick contacts bar */
.quick-contacts{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-weight:600;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,#f4f8ff,#ffffff);border:1px solid rgba(0,178,255,.25)}
.quick-contacts .sep{opacity:.5}

.media-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.media-two.stacked{ grid-template-columns:1fr; }  /* ใช้ตัวนี้เมื่ออยากซ้อนลงมา */

/* --- Keep SVG phone, overlay real sliding screen on top (method B) --- */
.card.phone{ position: relative; } /* สำคัญมาก */

/* จอจริง: ใช้พิกัด % ให้สเกลตาม SVG (360×740 -> x=26,y=86,w=308,h=612) */
.card.phone .screen{
  position:absolute;
  left: 7.222% !important;   /* 26 / 360 * 100 */
  top: 11.622% !important;   /* 86 / 740 * 100 */
  width: 85.556% !important; /* 308 / 360 * 100 */
  height: 82.703% !important;/* 612 / 740 * 100 */
  border-radius: 22px !important;   /* ให้โค้งเท่ากับ <rect rx="22"> ใน SVG */
  overflow: hidden;
  background: linear-gradient(160deg,#1f80ff,#1327b9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* สไลด์ 3 รูป วนอัตโนมัติ */
.card.phone .slides{ position:absolute; inset:0; }
.card.phone .slides img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; display:block; opacity:0;
  animation: screenFade 12s infinite ease-in-out;
}
.card.phone .slides img:nth-child(1){ animation-delay:0s; }
.card.phone .slides img:nth-child(2){ animation-delay:4s; }
.card.phone .slides img:nth-child(3){ animation-delay:8s; }

@keyframes screenFade{
  0%{opacity:0}
  5%{opacity:1}
  30%{opacity:1}
  35%{opacity:0}
  100%{opacity:0}
}

/* จุดบอกสถานะ (ไม่ต้องควบคุม) */
.card.phone .dots{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px; padding:4px 8px;
  background:rgba(0,0,0,.18); border-radius:999px; backdrop-filter:blur(2px);
}
.card.phone .dots span{
  width:6px; height:6px; border-radius:999px; background:#fff; opacity:.35;
  animation: dotCycle 12s infinite;
}
.card.phone .dots span:nth-child(1){ animation-delay:0s; }
.card.phone .dots span:nth-child(2){ animation-delay:4s; }
.card.phone .dots span:nth-child(3){ animation-delay:8s; }

@keyframes dotCycle{
  0%{opacity:.35; transform:scale(1)}
  5%{opacity:1; transform:scale(1.25)}
  30%{opacity:1; transform:scale(1.25)}
  35%{opacity:.35; transform:scale(1)}
  100%{opacity:.35; transform:scale(1)}
}

/* โหมด “พอดีทั้งจอ” (ไม่โดนครอป) — ใช้กับ .card.phone.fit-contain */
.card.phone.fit-contain .slides img{
  object-fit: contain !important;  /* เห็นครบทั้งรูป */
  object-position: center !important;
  background:#fff;                 /* พื้นหลังส่วนที่เกิน */
}

/* Store buttons: icon + text */
.badges{ display:flex; flex-direction:column; gap:12px; }
.store{
  display:flex; align-items:center; gap:12px;
  background:#111; color:#fff; border-radius:12px;
  padding:12px 16px; font-weight:700; text-decoration:none;
  min-width:210px; box-shadow:var(--shadow);
}
.store small{ display:block; font-weight:500; opacity:.8; line-height:1; }
.store .store-icon{ width:22px; height:22px; object-fit:contain; display:inline-block; }
@media (max-width:960px){ .store{ min-width:unset; } }

/* Full-bleed band like BigBanner */
.band { width: 100%; padding: 48px 0; }
.bg-canvas { background: #F6F8FF; }

@media (max-width: 960px) {
  .band { padding: 36px 0; }
}

/* Headline styles */
.headline{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.headline-icon{ width:28px; height:28px; color:var(--primary); display:inline-block; }

/* h2 + เส้นไฮไลต์ */
.h2-accent{ position:relative; display:inline-block; line-height:1.1; }
.h2-accent::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:56px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
}

/* คำบรรยายใต้หัวข้อ */
.sublead{ margin:6px 0 0; color:#5A6B8A; font-size:.95rem; }

.dl-modal[hidden]{display:none}
.dl-modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(15,25,60,.72);z-index:1000;padding:24px}
.dl-modal .modal-card{position:relative;width:min(520px,92vw);background:#fff;border:1px solid #e6ecff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);padding:16px 16px 20px}
.dl-modal .modal-close{position:absolute;right:12px;top:10px;background:#fff;border:1px solid #dbe6ff;border-radius:8px;padding:6px 10px;color:#0A22A8;font-weight:800;cursor:pointer}
.dl-modal .form-grid{display:grid;gap:12px;margin-top:8px}
.dl-modal input[type=email]{padding:12px 14px;border:1px solid #dbe6ff;border-radius:10px;font:inherit}
.dl-modal .btn.btn-primary{padding:12px 16px;border:0;border-radius:10px;background:#0A22A8;color:#fff;font-weight:800;cursor:pointer}
body.noscroll{overflow:hidden}

#contact .contact-right{display:none !important}
#contact .contact-left{width:100%}
#contact .contact-wrap{display:block}

/* ย่อหน้าขยายเฉพาะจุด */
.p-lg{
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); /* โตขึ้นแบบ responsive */
  line-height: 1.8;                                 /* อ่านง่ายขึ้น */
}

/* ถ้าอยากเน้นไทยให้ใช้ Prompt ชัด ๆ (เลือกใช้ได้) */
.p-lg-th{
  font-family: "Prompt", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

/* กันหัวเมนู (ถ้ามี navbar fixed) บังหัวเรื่องตอนเลื่อนถึง */
#features { scroll-margin-top: 90px; }   /* ปรับ 60–120px ตามความสูง navbar */
@media (max-width: 768px){
  #features { scroll-margin-top: 70px; } /* มือถืออาจเตี้ยกว่านิด */
}
.back-to-top{
  position:fixed; right:20px; bottom:24px;
  width:44px; height:44px; border:0; border-radius:999px;
  color:#fff; background:linear-gradient(180deg,var(--accent,#00B2FF),var(--primary,#0A22A8));
  box-shadow:0 12px 28px rgba(10,34,168,.25);
  display:grid; place-items:center; cursor:pointer; z-index:1200;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s, transform .25s, filter .15s;
}
.back-to-top:hover{ filter:brightness(1.05); }
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* เลื่อนนุ่ม ๆ ทั้งหน้า */
html{ scroll-behavior:smooth; }

/* Block */
.ecosys{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid rgba(10,34,168,.12);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(10,34,168,.08);
}

/* Icons row */
.eco-icons{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 22px;
  justify-items: center;
  align-items: end;
}
.eco-icons figure{ margin: 0; text-align: center; }
.eco-icons img{
  width: 72px; height: 72px; object-fit: contain; display: block;
}
.eco-icons figcaption{
  margin-top: 8px; font-size: .9rem; color: #0b5b66;
}

/* Logo */
.eco-logo{ display: grid; place-items: center; margin-top: 12px; }
.eco-logo img{
  height: 60px; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(10,34,168,.18));
}

/* Responsive tweaks */
@media (max-width: 900px){
  .eco-icons img{ width: 58px; height: 58px; }
}
@media (max-width: 640px){
  .eco-icons{
    grid-template-columns: repeat(3, 1fr);
    row-gap: 16px;
  }
}

/* ===== 2-up integration cards ===== */
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.i-card{
  position:relative;background:#fff;border-radius:14px;
  border:1px solid rgba(10,34,168,.10);box-shadow:0 10px 24px rgba(10,34,168,.08);
  padding:16px 18px 16px
}
.i-card .bar{position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:14px 0 0 14px}
.i-card.blue  .bar{background:linear-gradient(180deg,#3aa0ff,#0a22a8)}
.i-card.amber .bar{background:linear-gradient(180deg,#ffb21f,#ff8a00)}

.i-card .h-accent{color:#2b67ff;font-weight:800}
.i-card.amber .h-accent{color:#ff8a00}
.i-card .sub{color:#33435a;margin:.35rem 0 0;font-weight:600;line-height:1.35}
.i-card .sub small{font-weight:700;color:#6f7a8a}

.mini-icons{display:flex;align-items:center;gap:10px;margin-top:12px}

/* คำอธิบายเพิ่มเติมใต้ไอคอน */
.i-card .desc{
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px dashed rgba(10,34,168,.15);
  color:#425066;
  line-height:1.55;
  font-size:.95rem;
}

/* ไอคอนเล็ก (placeholder ด้วย CSS – เปลี่ยนเป็น <img> ได้) */
.i{
  width:28px;height:28px;display:inline-block;border-radius:6px;
  background:#e8f1ff;border:1px solid rgba(10,34,168,.12)
}
.i.phone{
  background:
    linear-gradient(0deg,#e8f1ff,#e8f1ff) padding-box,
    radial-gradient(circle at 50% 50%, transparent 16px, rgba(10,34,168,.15) 17px) border-box;
}
.i.qr{position:relative}
.i.qr:before,.i.qr:after{content:"";position:absolute;inset:5px;border:2px solid #7fb0ff;border-radius:4px}
.i.pos{background:linear-gradient(#fee8bf,#ffd27a)}
.i.arrow{background:none;border:0;width:auto;height:auto;color:#97a6c1;font-weight:900}

@media (max-width:800px){
  .pair{grid-template-columns:1fr}
}

/* FIX: mini icon row should hug content (no stretch) */
.i-card .mini-icons{
  display: inline-flex;        /* กว้างเท่าที่มี ไม่ยืดเต็มการ์ด */
  align-items: center;
  justify-content: flex-start; /* ชิดซ้าย ไม่กระจายช่องว่าง */
  gap: 10px;
  margin-top: 12px;
  width: auto;                 /* เผื่อมี width:100% จากที่อื่น */
}

/* ป้องกันการยืดของไอคอนแต่ละตัว */
.i-card .mini-icons .i{
  flex: 0 0 auto;              /* ไม่ให้ยืด/หด */
}

/* ให้ลูกศรมีขนาดและบรรทัดพอดี */
.i-card .mini-icons .i.arrow{
  line-height: 1;
  font-size: 18px;
}
/* Section */
.industries{position:relative;background:#fff;border-radius:16px;padding:16px}
.ind-title{margin:0 0 12px;font-weight:800;color:#0A22A8}

/* Marquee track */
.ind-mask{overflow:hidden}
.ind-rail{
  display:flex;
  gap:18px;
  width:max-content;
  animation:marquee var(--marquee-duration,40s) linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 9px))} /* ครึ่งแทร็ก + ครึ่ง gap */
}
.ind-mask:hover .ind-rail{animation-play-state:paused}

/* Card + image */
.ind-card{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(10,34,168,.10);background:#000}
.ind-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:54%;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0))}
.ind-card img{display:block;width:320px;height:200px;object-fit:cover;opacity:.96}
@media (max-width:720px){ .ind-card img{width:72vw;height:200px} }

/* Caption (ไอคอน + ข้อความ) โปร่งฟ้า บางลง */
.ind-cap{
  position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  display:inline-flex;align-items:center;gap:8px;z-index:1;color:#fff;
  padding:4px 8px;border-radius:999px;
  background:linear-gradient(135deg, rgba(0,178,255,.18), rgba(10,34,168,.18));
  backdrop-filter:blur(1.5px);
  border:1px solid rgba(10,34,168,.25);
  box-shadow:0 3px 10px rgba(10,34,168,.15);
}
/* ถ้าอยากโปร่งใสล้วนให้เพิ่ม class .cap--outline ที่ div.ind-cap */
.ind-cap.cap--outline{background:transparent;border:1px solid rgba(10,34,168,.35);box-shadow:none}

.cap-ic{
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:5px;
  background:#fff;color:#0A22A8;font-size:12px;line-height:1;
}
.cap-text{font-weight:700;letter-spacing:.1px;font-size:.9rem}

/* ถ้าใช้รูปไอคอนแทน emoji */
.cap-ic img{width:12px;height:12px;display:block}


/* === Icon capsule (final thin + transparent brand) === */
.ind-cap{
  position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  display:inline-flex;align-items:center;gap:8px;z-index:1;
  color:#fff;padding:4px 8px;border-radius:999px;
  background:linear-gradient(135deg, rgba(0,178,255,.18), rgba(10,34,168,.18));
  backdrop-filter:blur(1.5px);
  border:1px solid rgba(10,34,168,.25);
  box-shadow:0 3px 10px rgba(10,34,168,.15);
}
.ind-cap.cap--outline{background:transparent;border:1px solid rgba(10,34,168,.35);box-shadow:none}

.cap-ic{
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:5px;
  background:#fff;color:#0A22A8; /* ใช้กับ inline SVG (currentColor) */
  line-height:1;
}
/* รองรับไฟล์ไอคอนจริง (SVG/PNG) */
.cap-ic img{width:21px;height:21px;display:block}

.cap-text{font-weight:700;letter-spacing:.1px;font-size:.9rem}

.industries{
  max-width: 980px;    /* ให้ตรงกับ .wrap ปัจจุบัน */
  margin-inline: auto;
  padding-left: 20px;  /* ถ้า .wrap มี padding ข้าง */
  padding-right: 20px;
}
/* ---------- Qwik Benefits (3 cards) ---------- */
:root{
  --ink:#0B1220;
  --primary:#0A22A8;
  --accent:#00B2FF;
  --cobalt:#1646ff;
  --indigo:#2b3dd6;
  --card:#fff;
  --line:rgba(10,34,168,.12);
  --shadow:0 16px 40px rgba(10,34,168,.08);
}

.wrap{max-width:980px;margin-inline:auto;padding-inline:20px}

#qwik-benefits{margin:40px auto}
#qwik-benefits .b-top{text-align:left;margin-bottom:18px}
#qwik-benefits .b-top h2{
  margin:0 0 6px;color:#0A22A8;font-weight:800;letter-spacing:.2px
}
#qwik-benefits .b-top p{
  margin:0;color:#2d3b4d;font-weight:800;opacity:.85
}

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

.b-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Ribbon header */
.b-head{
  font-weight:800;color:#fff;padding:10px 14px;margin:12px 12px 0;
  border-radius:999px;display:inline-block;box-shadow:0 6px 16px rgba(10,34,168,.20)
}
.b-head.is-blue{background:linear-gradient(90deg,#0092ff,#00b2ff)}
.b-head.is-indigo{background:linear-gradient(90deg,#2b3dd6,#6b7cff)}
.b-head.is-cobalt{background:linear-gradient(90deg,#0a22a8,#2d5bff)}

/* Body */
.b-body{padding:12px 16px 16px}
.b-list{list-style:none;margin:8px 0 12px;padding:0}
.b-list li{
  position:relative;padding-left:26px;margin:8px 0;color:#2d3b4d;line-height:1.55
}
.b-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;
  background:#fff9e7;border:2px solid #00b2ff;
  box-shadow:inset 0 0 0 2px #fff;
}

/* Logos row */
.b-logos{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center
}
.b-logos img{
  height:20px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.06))
}

/* Responsive */
@media (max-width:980px){
  .b-grid{grid-template-columns:1fr}
  .b-card{border-radius:16px}
}
/* ===== FIX: บังคับโลโก้ใน .b-logos ให้เรียงแนวนอนและไม่ถูกยืด ===== */
#qwik-benefits .b-logos{
  display: flex;
  flex-wrap: wrap;          /* เกินบรรทัดให้ขึ้นบรรทัดใหม่ */
  align-items: center;
  gap: 4px 4px;
  margin-top: 8px;
}

#qwik-benefits .b-logos img{
  height: 26px !important;  /* ปรับได้ 18–28px ตามใจ */
  width: auto !important;   /* สำคัญ: ตัด width:100% ทิ้ง */
  max-width: none !important;
  flex: 0 0 auto;           /* ไม่ให้ยืดตาม flex */
  display: inline-block;    /* เรียงแนวนอน */
  vertical-align: middle;
  object-fit: contain;      /* กันภาพเบี้ยว */
  border-radius: 0;         /* กันโดนสไตล์มุมมนจากที่อื่น */
  box-shadow: none;         /* กันโดนเงาจากที่อื่น */
  background: transparent;
}

/* mini icons row */
.mini-icons{
  display:flex;
  align-items:center;
  gap:10px;                 /* ระยะห่างระหว่างไอคอน */
}

/* กล่องไอคอนพื้นฐาน */
.mini-icons .i{
  width:18px;               /* ปรับขนาดไอคอนตรงนี้ */
  height:18px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;  /* ให้ PNG ไม่บี้ */
}

/* ไอคอนแต่ละตัว */
.mini-icons .i.phone{
  background-image:url("../images/phone.png");
}
.mini-icons .i.qr{
  background-image:url("../images/qr.png");
}

.mini-icons .i.pos{
  background-image:url("../images/pos.png");
}

.mini-icons .i.phoneo{
  background-image:url("../images/phoneo.png");
}

/* ลูกศรปล่อยเป็นตัวอักษรหรือจะแทนด้วย PNG ก็ได้ */
.mini-icons .i.arrow{
  width:auto; height:auto; line-height:1;
  font-weight:700; color:#0A22A8; /* สีแบรนด์ */
  padding:0 2px;
}

/* กล่องไอคอนเดิมยังคงอยู่เป็นพื้นหลังขาวมุมมน */
.ind-cap .cap-ic{
  display:grid;place-items:center;
  width:18px;height:18px;border-radius:3px;background:#fff;
  color:inherit; /* ไม่ใช้สีแล้ว แต่เก็บไว้เผื่อฟอนต์ */
}

/* รูป PNG ข้างในให้พอดีกรอบ */
.cap-ic-img{
  width:21x;height:21px;
  object-fit:contain;display:block;
}

/* ===== Big Banner: safe animations ===== */
.big-banner{
  --banner-h: 460px;                 /* ปรับความสูงได้ */
  background: linear-gradient(160deg,#0A22A8 0%, #0a43dc 45%, #0abbff 115%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.big-banner .overlay{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) 20px;
  min-height: var(--banner-h);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(12px, 3vw, 28px);
  align-items: center;
}
.big-banner .headline h1{
  margin:0 0 6px;
  font-weight: 800;
  line-height:1.08;
  letter-spacing:.2px;
  font-size: clamp(28px, 3.6vw, 48px);
  opacity:0; transform: translateY(10px);
  animation: bannerFadeUp .7s ease .05s forwards;
}
.big-banner .headline .lead{
  margin:8px 0 0; opacity:.92;
  font-size: clamp(14px, 1.8vw, 18px);
}

/* phone artwork */
.big-banner .art{
  position:relative;
  display:grid; place-items:center;
}
.big-banner .art::before{
  /* soft glow behind phone */
  content:"";
  position:absolute; inset:auto; bottom:8%;
  width:68%; height:68%;
  filter: blur(28px);
  background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: translateZ(0); pointer-events:none;
}
.big-banner .art img{
  width: min(520px, 86%);
  height:auto; display:block;
  transform: translateY(0) translateZ(0);
  animation: phoneFloat 6s ease-in-out infinite;
  will-change: transform;
}

/* subtle moving gradient highlight across the banner */
.big-banner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1200px 120px at -10% -20%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%) ,
              radial-gradient(900px 90px  at 120%  120%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  animation: sweep 16s linear infinite;
  pointer-events:none;
}

/* Animations */
@keyframes bannerFadeUp{to{opacity:1; transform:none}}
@keyframes phoneFloat{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-8px) }
}
@keyframes sweep{
  0%  { transform: translateX(-10%) }
  100%{ transform: translateX(10%) }
}

/* Parallax (ควบคุมด้วย custom prop --parY จาก JS) */
.big-banner.parallax .art img{
  transform: translateY(var(--parY, 0px));
}
.big-banner.parallax .art img:is(:hover){
  /* hover นิดหน่อย */
  transition: transform .25s ease;
}

/* Responsive */
@media (max-width: 900px){
  .big-banner{ --banner-h: 420px; }
  .big-banner .overlay{ grid-template-columns: 1fr; text-align:center }
  .big-banner .art{ order: -1 }  /* โทรศัพท์ขึ้นไปอยู่บน */
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  .big-banner::after,
  .big-banner .art img{
    animation: none !important;
  }
}
/*
/* Header always-on (mobile & desktop เดียวกัน) */
#site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(10,34,168,.06);
}

/* layout ใหม่ */
.nav.v2{
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 12px 16px;
}
.nav.v2 .logo img{ height: 60px; display:block; }

.nav.v2 nav ul{
  display:flex; gap:24px; margin:0; padding:0; list-style:none;
  font-weight:700;
}
.nav.v2 nav a{
  color:#0B1220; text-decoration:none;
}
.nav.v2 nav a:hover{ color:#0A22A8; }

.nav-cta{ margin-center:auto; display:flex; gap:10px; }

/* Mobile: ลิงก์ย้ายลงบรรทัดใหม่ และลากซ้าย-ขวาได้ */
@media (max-width: 768px){
  .nav.v2{ gap:10px; padding:10px 14px; }
  .nav.v2 .logo{ order:1; }
  .nav-cta{ order:2; }
  .nav.v2 nav{ order:3; width:100%; }
  .nav.v2 nav ul{
    gap:16px; font-weight:600;
    overflow-x:auto; white-space:nowrap; padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .nav-cta .btn{ padding:10px 14px; font-size:.95rem; }
}