/* ===== AIS 3BB FIBRE 3 — Color Palette (Green Primary) ===== */
:root {
  --ais-red:       #96C93D;  /* Lime Green — สีหลัก */
  --ais-red-dark:  #64A70B;  /* Leaf Green — hover/dark */
  --ais-red-light: #B2D96A;  /* Light Lime */
  --accent:        #ED7124;  /* 3BB Orange — CTA accent */
  --accent-light:  #F58220;  /* Bright Orange */
  --dark:          #363636;  /* Dark Charcoal */
  --dark-2:        #2A2A2A;
  --white:         #FFFFFF;
  --light-bg:      #F6FAF0;  /* Light green-white */
  --gray-text:     #6B7280;
  --border:        #D4EAA0;  /* Light green border */
  --success:       #64A70B;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Prompt', sans-serif;
  background: var(--light-bg);
  color: var(--dark);
  line-height: 1.6;
}

/* ===== HEADER ===== */
.site-header {
  background: var(--dark);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo-area {
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  user-select: none;
}
.logo-area:hover { opacity: 0.85; transform: translateY(-1px); }
.logo-area:active { transform: translateY(0); }

.logo-text {
  font-size: 26px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 1px;
}
.logo-text span { color: var(--ais-red); }
.logo-text.small { font-size: 20px; margin-bottom: 8px; }

/* โลโก้รูปภาพใน header */
.logo-img { height: 52px; width: auto; display: block; }
@media (max-width: 560px) { .logo-img { height: 42px; } }

.logo-sub {
  font-size: 11px;
  color: #999;
  font-weight: 400;
  margin-top: 2px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-nav a {
  color: #CCC;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.header-nav a:hover { color: var(--white); }

.nav-cta {
  background: var(--ais-red) !important;
  color: var(--white) !important;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--ais-red-dark) !important; }

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--dark-2) 0%, #0D1A06 100%);
  color: var(--white);
  padding: 6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  min-height: 560px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(150,201,61,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content { max-width: 580px; }

.hero-badge {
  display: inline-block;
  background: rgba(150,201,61,0.2);
  border: 1px solid rgba(150,201,61,0.4);
  color: #C8E87A;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.highlight { color: var(--ais-red); }

.hero-desc {
  font-size: 17px;
  color: #B0B8C8;
  margin-bottom: 1.75rem;
  max-width: 460px;
}

.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2rem;
}

.badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.btn-hero {
  display: inline-block;
  background: var(--ais-red);
  color: var(--white);
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 800;
  transition: all 0.2s;
  box-shadow: 0 6px 20px rgba(150,201,61,0.35);
}
.btn-hero:hover {
  background: var(--ais-red-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(150,201,61,0.45);
}

/* Speed circle visual */
/* ===== HERO FREE CARD ===== */
.hero-free-card {
  position: relative;
  width: 280px;
  background: linear-gradient(165deg, #12321d 0%, #0c2415 100%);
  border-radius: 26px;
  padding: 2rem 1.6rem 1.75rem;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(6,25,14,.45),
    0 0 0 1px rgba(150,201,61,0.12);
  animation: hfcFloat 3.5s ease-in-out infinite;
}

@keyframes hfcFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* glow ด้านหลัง */
.hfc-glow {
  position: absolute;
  top: -60px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(150,201,61,0.28) 0%, transparent 70%);
  pointer-events: none;
}

/* ไอคอน wifi ในวงกลมขอบเขียว */
.hfc-icon-ring {
  width: 76px; height: 76px; margin: 0 auto 0.75rem;
  border: 2px solid rgba(150,201,61,0.55);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}

.hfc-ais {
  font-family: 'Prompt', sans-serif; font-weight: 800; font-size: 15px;
  color: #ffffff; letter-spacing: 3px; margin-bottom: 6px; position: relative; z-index: 1;
}

.hfc-main {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.3px;
  position: relative; z-index: 1;
}
.hfc-white { color: #ffffff; }
.hfc-green { color: #96C93D; }

.hfc-badge {
  display: inline-block; margin-top: 10px;
  background: linear-gradient(90deg, #b6e05a, #7cc22e);
  color: #163017; font-family: 'Prompt', sans-serif; font-weight: 800; font-size: 13.5px;
  padding: 7px 22px; border-radius: 100px; position: relative; z-index: 1;
}

.hfc-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin: 1.35rem 0 1.1rem;
}

.hfc-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.hfc-tag {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px 14px;
  letter-spacing: 0.2px;
}
.hfc-check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: #96C93D; color: #0c2415;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}

.hfc-cta {
  display: block; width: 100%;
  background: linear-gradient(90deg, #b6e05a, #7cc22e);
  color: #163017; text-decoration: none;
  font-family: 'Prompt', sans-serif; font-weight: 800; font-size: 15px;
  padding: 13px; border-radius: 100px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hfc-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124,194,46,.4); }
.hfc-arrow { display: inline-block; margin-left: 4px;
}

/* ===== SECTION ===== */
.section {
  padding: 5rem 1.5rem;
}

.section-dark {
  background: var(--dark-2);
}

.section-red {
  background: linear-gradient(135deg, var(--ais-red-dark), var(--ais-red));
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.container-narrow {
  max-width: 760px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--dark);
}

.section-header p {
  font-size: 16px;
  color: var(--gray-text);
}

.section-header.light h2 { color: var(--white); }
.section-header.light p  { color: rgba(255,255,255,0.75); }

/* ===== PACKAGE ROWS ===== */
.package-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 860px;
  margin: 0 auto;
}

/* แต่ละแถว */
.pkg-row {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.pkg-row:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

/* Price badge ซ้าย */
.pkg-price-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 105px;
  max-width: 105px;
  padding: 1rem 0.6rem;
  color: #fff;
  text-align: center;
  gap: 2px;
  flex-shrink: 0;
}
.pkg-price-big {
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}
.pkg-price-unit-lbl {
  font-size: 10.5px;
  opacity: 0.85;
  white-space: nowrap;
}
.pkg-badge-free {
  background: #eab308;
  color: #000;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 6px;
}

/* Info กลาง */
.pkg-info {
  flex: 1;
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid var(--border);
}
.pkg-speed-big {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--dark);
  line-height: 1.1;
}
.pkg-speed-big span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-text);
}
.pkg-speed-sub {
  font-size: 11.5px;
  color: var(--gray-text);
}

/* Speed Toggle */
.pkg-toggle-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.pkg-toggle-pill {
  background: #ec4899;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pkg-toggle-text {
  font-size: 11.5px;
  color: #ec4899;
  font-style: italic;
  font-weight: 700;
  white-space: nowrap;
}

/* Extras/ของแถม */
.pkg-extras-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}
.pkg-extra-chip {
  background: var(--light-bg);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ขวา — router + CTA */
.pkg-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0.85rem 1.1rem;
  min-width: 170px;
  text-align: center;
}
.pkg-router-txt {
  font-size: 12px;
  color: var(--gray-text);
  font-weight: 600;
}
.pkg-contract-tag {
  font-size: 10.5px;
  color: var(--gray-text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
}
.btn-pkg-row {
  background: var(--ais-red);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
  white-space: nowrap;
}
.btn-pkg-row:hover { background: var(--ais-red-dark); }

/* ===== FEATURES ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.2s;
}

.feature-card:hover {
  background: rgba(150,201,61,0.08);
  border-color: rgba(150,201,61,0.3);
  transform: translateY(-3px);
}

.feature-icon {
  font-size: 36px;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.feature-card p {
  font-size: 14px;
  color: #9CA3AF;
  line-height: 1.7;
}

/* ===== FAQ ===== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}
.faq-question:hover { background: var(--light-bg); }
.faq-question.open { color: var(--ais-red); }

.faq-arrow {
  flex-shrink: 0;
  transition: transform 0.3s;
  font-size: 18px;
  color: var(--gray-text);
}
.faq-question.open .faq-arrow { transform: rotate(45deg); color: var(--ais-red); }

.faq-answer {
  display: none;
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--gray-text);
  line-height: 1.75;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.faq-answer.open { display: block; }

/* ===== CONTACT FORM ===== */
.contact-form {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}

.form-row { display: flex; gap: 16px; }
.form-row.two-cols > * { flex: 1; }

.input-group {
  margin-bottom: 1.25rem;
}

.input-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 6px;
}

.input-group input,
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  border: 2px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dark);
  outline: none;
  transition: border-color 0.2s;
}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
  border-color: var(--dark);
}

.btn-submit {
  background: var(--dark);
  color: var(--white);
  border: none;
  width: 100%;
  padding: 18px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}
.btn-submit:hover { background: var(--dark-2); transform: translateY(-2px); }

/* ===== FOOTER ===== */
.site-footer {
  background: var(--dark);
  color: var(--white);
  padding: 3rem 1.5rem 1.5rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1.5rem;
}

.footer-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.7;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: #888;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }

.footer-bottom p {
  font-size: 12px;
  color: #555;
  text-align: center;
}

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #1F2937;
  color: var(--white);
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  transition: bottom 0.4s cubic-bezier(0.4,0,0.2,1);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.toast.show { bottom: 30px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 4rem 1.5rem;
    gap: 3rem;
  }
  .hero-desc { margin: 0 auto 1.75rem; }
  .hero-badges-row { justify-content: center; }
  .header-nav { display: none; }
  .form-row.two-cols { flex-direction: column; }
  .footer-inner { flex-direction: column; }
  .hero-free-card { width: 100%; max-width: 300px; padding: 1.75rem 1.4rem; }
  .hfc-main { font-size: 1.65rem; }

  /* Package rows — mobile */
  .pkg-row { flex-wrap: wrap; }
  .pkg-price-badge { min-width: 90px; max-width: 90px; }
  .pkg-price-big { font-size: 1.75rem; }
  .pkg-right { min-width: unset; width: 100%; flex-direction: row; justify-content: space-between; border-top: 1px solid var(--border); padding: 0.6rem 1rem; }
  .pkg-toggle-text { display: none; }
}

/* =============================================
   ORANGE ACCENT — เฉพาะ CTA สำคัญ
   ============================================= */

/* ปุ่ม "สมัครเลย" ใน nav */
.nav-cta {
  background: #ED7124 !important;
  color: #fff !important;
}
.nav-cta:hover { background: #C55D10 !important; }

/* ปุ่ม Hero "ดูแพ็กเกจทั้งหมด" */
.btn-hero {
  background: #ED7124;
  box-shadow: 0 6px 20px rgba(237,113,36,0.4);
  color: #fff;
}
.btn-hero:hover {
  background: #F58220;
  box-shadow: 0 10px 28px rgba(237,113,36,0.5);
}

/* Badge "ยอดนิยม" บนการ์ดแพ็กเกจ */
.popular-badge { background: #ED7124; }

/* Hero badge text สีส้มอ่อน */
.hero-badge { color: #F5C490; }

/* =============================================
   SOCIAL FLOAT BUTTONS (LINE + Facebook)
   ============================================= */
.social-float-group {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 300;
}

.social-float-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 50px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  color: #fff;
  white-space: nowrap;
}

/* LINE */
.line-float-btn {
  background: #00B900;
  box-shadow: 0 4px 18px rgba(0,185,0,0.4);
}
.line-float-btn:hover {
  background: #009900;
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0,185,0,0.5);
}

/* Facebook */
.fb-float-btn {
  background: #1877F2;
  box-shadow: 0 4px 18px rgba(24,119,242,0.4);
}
.fb-float-btn:hover {
  background: #0d65d9;
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(24,119,242,0.5);
}

.overlay-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.overlay-backdrop.open { display: flex; }

.line-modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 1.75rem;
  width: 320px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: popIn 0.25s ease;
}
@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-x-btn {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 28px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}
.modal-x-btn:hover { color: #333; }

.line-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.line-modal-header h3 { font-size: 18px; font-weight: 800; color: #111; }

.line-modal-desc { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 1.25rem; }

.line-qr-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid #00B900;
  margin-bottom: 1rem;
}

.line-id-chip {
  display: inline-block;
  background: #f0fff0;
  border: 1px solid #00B900;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 14px;
  color: #333;
  margin-bottom: 1rem;
}

.btn-line-add {
  display: block;
  background: #00B900;
  color: #fff;
  text-decoration: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  transition: background 0.2s;
}
.btn-line-add:hover { background: #009900; }

/* สรุปข้อมูลสมัคร — โผล่เฉพาะหลังส่งฟอร์ม ให้ลูกค้าคัดลอกไปวางในแชท LINE */
.line-order-recap { display: none; margin-bottom: 1.1rem; text-align: left; }
.line-order-recap.show { display: block; }
.lor-label { font-size: 12px; font-weight: 700; color: #2b7a0b; margin-bottom: 8px; line-height: 1.5; }
.line-recap-box {
  background: #f6faf7; border: 1px solid #dfeae1; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: #18201a; line-height: 1.8;
  white-space: pre-line; margin-bottom: 10px;
}
.btn-copy-recap {
  width: 100%; background: #fff; color: #00B900; border: 1.5px solid #00B900;
  padding: 10px; border-radius: 10px; font-family: inherit; font-weight: 800; font-size: 14px;
  cursor: pointer; transition: background .2s, color .2s;
}
.btn-copy-recap:hover { background: #00B900; color: #fff; }
.btn-copy-recap.copied { background: #00B900; color: #fff; }

/* ---- ลิงก์ "ดูประวัติการสมัคร" ในหัวข้อฟอร์มสมัคร ---- */
.link-order-history {
  display: inline-block; margin-top: 12px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: #ffffff; text-decoration: underline; opacity: .9;
}
.link-order-history:hover { opacity: 1; }

/* ---- โมดัลประวัติการสมัคร ---- */
.history-modal-box {
  background: #fff; border-radius: 20px; padding: 2rem 1.5rem;
  width: 360px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: popIn 0.25s ease;
}
.history-modal-title { font-size: 17px; font-weight: 800; color: #111; margin-bottom: 4px; }
.history-modal-desc { font-size: 12.5px; color: #888; margin-bottom: 1.1rem; }
.history-loading, .history-empty {
  text-align: center; color: #999; font-size: 13.5px; padding: 24px 8px;
}
.history-item {
  border: 1px solid #e6efe8; border-radius: 12px; padding: 12px 14px;
  margin-bottom: 10px; text-align: left; background: #f8fbf9;
}
.hi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.hi-pkg { font-weight: 800; font-size: 14px; color: #18201a; }
.hi-status {
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 100px;
  white-space: nowrap;
}
.hi-status.new        { background: #fff3cd; color: #8a6500; }
.hi-status.contacted  { background: #dbeafe; color: #1e4d8f; }
.hi-status.done       { background: #dcfce7; color: #166534; }
.hi-status.cancelled  { background: #fee2e2; color: #991b1b; }
.hi-addr { font-size: 12.5px; color: #555; line-height: 1.5; margin-bottom: 4px; }
.hi-date { font-size: 11px; color: #999; }

/* =============================================
   CHAT WIDGET
   ============================================= */
/* Label กล่องเล็กบน social float */
/* ซ่อนป้ายข้อความเมื่อลูกค้ากดไอคอนแล้ว */
.social-float-label.label-hidden,
.chat-float-label.label-hidden { display: none; }

.social-float-label {
  background: rgba(255,255,255,0.92);
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px 10px;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.13);
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  position: relative;
}
/* triangle tail pointing down */
.social-float-label::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255,255,255,0.92);
}

/* ลูกศรชี้ลง */
.float-arrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
}
.float-arrow {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--ais-red-dark);
  border-bottom: 2.5px solid var(--ais-red-dark);
  transform: rotate(45deg);
  border-radius: 1px;
}
.float-arrow:first-child {
  animation: arrowBounce 1.1s ease-in-out infinite;
}
.float-arrow:last-child {
  animation: arrowBounce 1.1s ease-in-out 0.18s infinite;
  opacity: 0.5;
}
@keyframes arrowBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
  50%       { transform: rotate(45deg) translateY(4px); opacity: 0.6; }
}

/* Wrapper + label สำหรับ chat bubble */
.chat-bubble-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 300;
}
.chat-float-label {
  background: rgba(255,255,255,0.92);
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px 10px;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.13);
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  position: relative;
}
.chat-float-label::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 22px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255,255,255,0.92);
}
/* จัดลูกศรของกล่องแชทให้ชิดขวา ตรงกับไอคอนฟองแชทสีเขียว */
.chat-float-label .float-arrow-wrap {
  align-items: flex-end;
  padding-right: 12px;
}

.chat-bubble {
  width: 62px;
  height: 62px;
  background: var(--ais-red);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(150,201,61,0.45);
  z-index: 300;
  transition: all 0.2s;
}
.chat-bubble:hover { transform: scale(1.1); }
.chat-bubble-icon { font-size: 28px; }

/* ปุ่มโทรใต้ปุ่มแชท — แคปซูลเขียวโชว์เบอร์ */
.call-bubble {
  display: inline-flex; align-items: center; gap: 0;
  background: linear-gradient(90deg, #37b24d, #22a53a);
  color: #fff; text-decoration: none; cursor: pointer;
  padding: 7px; border-radius: 100px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(34,165,58,0.42);
  transition: gap .28s ease, padding .28s ease, transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 300;
}
.call-bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34,165,58,0.52); }
.call-ic {
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.call-txt {
  font-family: 'Prompt', sans-serif; font-weight: 800; font-size: 18px;
  white-space: nowrap; letter-spacing: 0.3px;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .28s ease, opacity .22s ease;
}
/* กดแล้วเลื่อนออกเป็นแคปซูลโชว์เบอร์ */
.call-bubble.expanded { gap: 10px; padding: 7px 22px 7px 7px; }
.call-bubble.expanded .call-txt { max-width: 240px; opacity: 1; }

.chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #E8002D;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.chat-badge.hidden { display: none; }

.chat-widget {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 360px;
  max-height: 540px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  z-index: 299;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: bottom right;
}
.chat-widget.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.chat-widget-header {
  background: linear-gradient(135deg, var(--ais-red-dark), var(--ais-red));
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.chat-agent-info { display: flex; align-items: center; gap: 10px; }
.chat-agent-avatar {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.chat-agent-name  { font-size: 14px; font-weight: 800; color: #fff; }
.chat-agent-status { font-size: 11px; color: rgba(255,255,255,0.85); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.dot-green { width: 7px; height: 7px; background: #7FFF00; border-radius: 50%; display: inline-block; }
.chat-close-btn { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 28px; cursor: pointer; line-height: 1; padding: 0; }
.chat-close-btn:hover { color: #fff; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  background: #F3F4F6;
}

/* ฟอร์มกรอกข้อมูล */
.chat-info-form { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-welcome-msg {
  background: #fff;
  border-left: 4px solid var(--ais-red);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}
.chat-field {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.chat-field:focus { border-color: var(--ais-red); }
.btn-chat-start {
  background: var(--ais-red);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-chat-start:hover { background: var(--ais-red-dark); }

/* พื้นที่ข้อความ */
.chat-messages {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}
.chat-msg { display: flex; flex-direction: column; max-width: 82%; }
.chat-msg.customer { align-self: flex-end; align-items: flex-end; }
.chat-msg.admin    { align-self: flex-start; align-items: flex-start; }

.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.chat-msg.customer .chat-msg-bubble {
  background: var(--ais-red);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.admin .chat-msg-bubble {
  background: #fff;
  color: #222;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.chat-msg-time { font-size: 10px; color: #aaa; margin-top: 3px; }

/* Typing indicator */
.chat-typing-dots {
  display: flex; gap: 4px; align-items: center;
  background: #fff;
  padding: 12px 16px;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  width: fit-content;
}
.chat-typing-dots span {
  width: 7px; height: 7px;
  background: #ccc; border-radius: 50%;
  animation: bounce 1.2s infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-7px); opacity: 1; }
}

/* Input footer */
.chat-footer {
  display: none;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid #eee;
  gap: 8px;
  flex-shrink: 0;
}
.chat-footer.visible { display: flex; }

.chat-msg-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 24px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.chat-msg-input:focus { border-color: var(--ais-red); }

.btn-chat-send {
  background: var(--ais-red);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-chat-send:hover { background: var(--ais-red-dark); }

@media (max-width: 480px) {
  .chat-widget { width: calc(100vw - 32px); right: 16px; }
  .social-float-btn span { display: none; }
  .social-float-btn { padding: 14px; border-radius: 50%; width: 52px; height: 52px; justify-content: center; }
  .social-float-label, .chat-float-label { display: none; }
}

/* ============================================================
   PACKAGES — ดีไซน์ใหม่ (จาก fiber.html) · scoped ใต้ #packages
   ============================================================ */
#packages {
  --green: #2ECC40;
  --green-dark: #1a9e2c;
  --green-deep: #0e7a1e;
  --f-black: #111111;
  --f-gray: #666;
  --f-yellow: #ffd93b;
  --f-red: #e74c3c;
  --font-th: 'Sarabun', sans-serif;
  --font-head: 'Prompt', sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, #f1f8f3 55%, #e8f3ec 100%);
}
#packages .fpkgs { max-width: 1000px; margin: 0 auto; }

#packages .fpkg-row {
  display: grid;
  grid-template-columns: 170px 1fr 300px;
  align-items: stretch;
  background: linear-gradient(90deg, #ffffff 0%, #f2faf3 100%);
  border-radius: 22px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(28,60,38,.10);
  border: 1px solid #e6efe8;
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
  color: var(--f-black);
  font-family: var(--font-th);
}
#packages .fpkg-row:hover { transform: translateY(-4px) scale(1.005); box-shadow: 0 18px 50px rgba(46,204,64,.25); }

#packages .pkg-price { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:22px 12px; color:#fff; position:relative; border-radius:22px 0 0 22px; }
#packages .pkg-price .num { font-family: var(--font-head); font-size:52px; font-weight:800; line-height:1; text-shadow:0 3px 10px rgba(0,0,0,.25); }
#packages .pkg-price .unit { font-size:14px; font-weight:600; opacity:.95; }
#packages .pkg-price .free-tag { margin-top:8px; background:var(--f-yellow); color:#6b4d00; font-family:var(--font-head); font-weight:800; font-size:17px; padding:4px 18px; border-radius:10px; transform:rotate(-2deg); box-shadow:0 4px 10px rgba(0,0,0,.25); }

#packages .tier-1 .pkg-price { background: linear-gradient(160deg, #37b24d, #1a7a2b); }
#packages .tier-2 .pkg-price { background: linear-gradient(160deg, #2ECC40, #128a24); }
#packages .tier-3 .pkg-price { background: linear-gradient(160deg, #22b455, #0d6e33); }
#packages .tier-4 .pkg-price { background: linear-gradient(160deg, #1fae63, #0a5e3c); }
#packages .tier-5 .pkg-price { background: linear-gradient(160deg, #18a05c, #094f31); }
#packages .tier-6 .pkg-price { background: linear-gradient(160deg, #14934f, #06381f); }
#packages .tier-7 .pkg-price { background: linear-gradient(160deg, #111, #333); }
#packages .tier-7 .pkg-price .num { color: var(--green); }

#packages .pkg-mid { padding:20px 26px; display:flex; flex-direction:column; justify-content:center; gap:8px; border-right:1px dashed #cfe8d3; }
#packages .speed-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
#packages .speed { font-family:var(--font-head); font-size:clamp(30px,4vw,42px); font-weight:800; color:var(--f-black); line-height:1; }
#packages .speed .slash { color:#b5b5b5; font-weight:600; }
#packages .speed-unit { font-size:15px; font-weight:700; color:var(--f-gray); }
#packages .speed-sub { font-size:13px; color:var(--f-gray); }
#packages .toggle-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
#packages .toggle-badge { background:linear-gradient(90deg,#e6397b,#c2185b); color:#fff; font-family:var(--font-head); font-weight:700; font-size:13px; padding:5px 14px; border-radius:8px; transform:skewX(-8deg); box-shadow:0 3px 8px rgba(230,57,123,.35); }
#packages .toggle-text { font-size:14px; color:var(--f-gray); }
#packages .toggle-text strong { color:#c2185b; font-family:var(--font-head); font-size:16px; }

#packages .perks { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px; padding-top:12px; border-top:1px solid #e2f2e5; }
#packages .perk { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; }
#packages .perk svg { width:52px; height:40px; }
#packages .perk .p-name { font-size:11.5px; font-weight:700; color:var(--f-black); text-align:center; line-height:1.25; }
#packages .perk .p-sub { font-size:10.5px; color:var(--f-gray); text-align:center; }
#packages .perk-free { background:var(--f-red); color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:100px; }

#packages .pkg-equip { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 58px; background:linear-gradient(120deg,#f7fcf8,#eef8f0); min-width:0; overflow:hidden; }
#packages .equip-text { flex-shrink:0; max-width:52%; }
#packages .equip-text .e-title { font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--f-black); line-height:1.35; }
#packages .equip-text .e-sub { font-size:13px; color:var(--f-gray); }
#packages .equip-text .e-extra { font-size:12.5px; color:var(--green-deep); font-weight:700; margin-top:3px; }
#packages .equip-visual { display:flex; align-items:flex-end; justify-content:flex-end; gap:6px; min-width:0; flex-shrink:1; }
#packages .equip-visual svg { filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); min-width:0; flex-shrink:1; max-width:100%; height:auto; }

#packages .pkg-cta { position:absolute; right:18px; bottom:14px; }
#packages .btn-cta { display:inline-flex; align-items:center; gap:7px; background:var(--f-black); color:#fff; border:none; font-family:var(--font-th); font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:100px; cursor:pointer; transition:all .2s; }
#packages .btn-cta:hover { background:var(--green-dark); transform:scale(1.04); }

#packages .ribbon { position:absolute; top:0; right:26px; background:linear-gradient(135deg,#ff9f1a,#f76b1c); color:#fff; font-family:var(--font-head); font-size:12px; font-weight:700; padding:6px 14px 8px; border-radius:0 0 10px 10px; box-shadow:0 4px 12px rgba(247,107,28,.4); z-index:2; }

#packages .fiber-note { text-align:center; color:#8a978c; font-size:13px; margin-top:28px; line-height:1.8; }

@media (max-width: 920px) {
  #packages .fpkg-row { grid-template-columns: 140px 1fr; }
  #packages .pkg-equip { grid-column: 1 / -1; border-top:1px dashed #cfe8d3; justify-content:space-between; padding:14px 20px 52px; }
  #packages .pkg-mid { border-right:none; }
  #packages .pkg-price .num { font-size:42px; }
  #packages .pkg-price { border-radius:22px 0 0 0; }
}
@media (max-width: 520px) {
  #packages .fpkg-row { grid-template-columns:112px 1fr; border-radius:18px; }
  #packages .pkg-price .num { font-size:34px; }
  #packages .pkg-price .free-tag { font-size:14px; padding:3px 12px; }
  #packages .pkg-mid { padding:16px 14px; }
  #packages .perks { gap:10px; }
  #packages .equip-visual svg { transform:scale(.85); transform-origin:bottom right; }
  #packages .pkg-cta { right:12px; bottom:10px; }
}

/* ============================================================
   PROMO IMAGE SECTIONS (แบนเนอร์/โปสเตอร์รูปภาพ)
   ============================================================ */
/* แบนเนอร์เต็มความกว้างจอ (ชนขอบ) */
.promo-banner-full { display: block; line-height: 0; }
.promo-banner-full a { display: block; }
.promo-banner-full img { width: 100%; height: auto; display: block; }

.promo-section { padding: 40px 16px; background: #ffffff; }
.promo-inner { max-width: 1100px; margin: 0 auto; }

.promo-banner {
  display: block; width: 100%; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-banner:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.promo-banner img { width: 100%; height: auto; display: block; }

.promo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: start; max-width: 1000px; margin: 0 auto;
}
.promo-grid a {
  display: block; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4 / 5; background: #ffffff;
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-grid a:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.18); }
.promo-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 640px) {
  .promo-section { padding: 28px 14px; }
  .promo-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   ตารางเปรียบเทียบแพ็กเกจ
   ============================================================ */
.compare-wrap { max-width: 1140px; margin: 52px auto 0; }
.compare-title { text-align:center; font-family:'Prompt',sans-serif; font-weight:800; font-size:24px; color:#1c2a1e; margin-bottom:4px; }
.compare-sub { text-align:center; color:#7a8a7e; font-size:14px; margin-bottom:22px; }
.compare-scroll { overflow-x:auto; border-radius:16px; box-shadow:0 8px 26px rgba(28,60,38,.10); background:#fff; border:1px solid #e6efe8; -webkit-overflow-scrolling:touch; }

.cmp-table { width:100%; border-collapse:collapse; min-width:840px; font-family:'Sarabun',sans-serif; font-size:14px; color:#3a4a3d; }
.cmp-table th, .cmp-table td { padding:14px; text-align:center; border-bottom:1px solid #eef2ee; vertical-align:middle; }
.cmp-table tbody tr:last-child td { border-bottom:none; }
.cmp-head { background:#f6faf7; vertical-align:bottom; }
.cmp-corner { text-align:left; background:#f6faf7; font-family:'Prompt',sans-serif; font-weight:800; color:#333; white-space:nowrap; }
.cmp-price { font-family:'Prompt',sans-serif; font-weight:800; font-size:24px; color:#111; line-height:1; }
.cmp-price-unit { font-size:12px; color:#888; margin-top:2px; }
.cmp-label { text-align:left; font-weight:700; color:#3a4a3d; background:#fbfdfb; white-space:nowrap; }
.cmp-cell { color:#556; }
.cmp-pop { background:#eef9ec; }
.cmp-head.cmp-pop { background:#e2f5df; }
.cmp-pop-tag { display:inline-block; background:#f76b1c; color:#fff; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; margin-bottom:6px; }
.cmp-head.cmp-pop .cmp-price { color:#1a9e2c; }
.cmp-btn { background:#2ECC40; color:#fff; border:none; padding:8px 18px; border-radius:100px; font-family:'Sarabun',sans-serif; font-weight:700; font-size:13px; cursor:pointer; transition:background .2s; white-space:nowrap; }
.cmp-btn:hover { background:#1a9e2c; }
@media (max-width: 640px) { .compare-title { font-size:20px; } }

/* ============================================================
   SOFT PASTEL THEME — โทนใหม่ตามดีไซน์ (override ท้ายไฟล์)
   ============================================================ */
:root {
  --ais-red:       #2ECC40;   /* เขียวสด */
  --ais-red-dark:  #22a53a;
  --ais-red-light: #57d96a;
  --accent:        #2ECC40;
  --accent-light:  #57d96a;
  --dark:          #18201a;    /* เกือบดำ อมเขียว */
  --dark-2:        #0f140f;
  --light-bg:      #eef6f0;    /* พาสเทลนวล */
  --border:        #d7ecd9;
}

/* ---- Hero: พื้นสว่างพาสเทล ---- */
.hero {
  background: linear-gradient(160deg, #f5faf6 0%, #e9f5ec 55%, #eef2e7 100%);
  color: #18201a;
}
.hero::before { background: radial-gradient(circle, rgba(46,204,64,0.16) 0%, transparent 70%); }
.hero::after {
  content: ''; position: absolute; bottom: -130px; left: -90px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,120,0.38) 0%, transparent 70%);
  pointer-events: none;
}
.hero-badge { background: #18201a; color: #ffffff; border: none; border-radius: 100px; font-weight: 700; }
.hero-desc { color: #5c675e; }
.badge {
  background: #ffffff; border: 1px solid #dcefe0; color: #2b3a2f;
  border-radius: 100px; box-shadow: 0 2px 10px rgba(28,60,38,.06);
}
.btn-hero { border-radius: 100px; box-shadow: 0 8px 22px rgba(46,204,64,.30); }

/* การ์ด "ติดตั้งฟรี" เป็นเขียวเข้ม (ตัดกับ Hero พื้นสว่าง) — สไตล์เต็มอยู่ในนิยาม .hero-free-card หลัก */

/* ---- ปุ่มฟอร์มสมัคร: แคปซูล ---- */
.btn-submit { border-radius: 100px; }

/* ---- Header: พื้นสว่างพาสเทล ---- */
.site-header {
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(28,60,38,.08);
  border-bottom: 1px solid #eaf2ec;
}
.logo-text { color: #18201a; }
.logo-sub  { color: #8a978c; }
.header-nav a { color: #3a4a3d; }
.header-nav a:hover { color: #22a53a; }

/* ปุ่ม "ประวัติออเดอร์" ข้างปุ่ม "สมัครเลย" */
.nav-history {
  background: none; cursor: pointer; font-family: inherit;
  padding: 8px 18px; border-radius: 30px;
  font-weight: 700; font-size: 14px;
  color: #22a53a; border: 1.5px solid #96C93D;
  transition: background 0.2s, color 0.2s;
}
.nav-history:hover { background: #eef9ec; }

/* "FIBRE" เขียวไล่เฉดแบบโลโก้ปีก AIS (ไลม์ → เขียวเข้ม) */
.logo-text span {
  background: linear-gradient(100deg, #aed85a 0%, #7fc63f 50%, #5aa62c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- ส่วนสมัครเน็ตบ้าน (contact): พื้นพาสเทลสว่าง ---- */
#contact { background: linear-gradient(160deg, #cbe9a0 0%, #93cf52 55%, #6fb838 100%); }
#contact .section-header.light h2 { color: #18201a; }
#contact .section-header.light p  { color: #5c675e; }
#contact .contact-form {
  background: #ffffff;
  border: 1px solid #e6efe8;
  box-shadow: 0 12px 40px rgba(28,60,38,.10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#contact .input-group label { color: #2b3a2f; }
#contact .input-group input,
#contact .input-group textarea,
#contact .input-group select {
  background: #f6faf7;
  border: 1px solid #dfeae1;
  color: #18201a;
}
#contact .input-group input:focus,
#contact .input-group textarea:focus,
#contact .input-group select:focus { border-color: #2ECC40; }

/* Hero "AIS FIBRE" เขียวไล่เฉดแบบโลโก้ AIS */
.highlight {
  background: linear-gradient(100deg, #aed85a 0%, #7fc63f 50%, #5aa62c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ═══════════════════════════════════════════════════════════
   NEW: SEO trust / honeypot / countdown / stats / reviews /
   scroll-reveal / mobile sticky CTA
   ═══════════════════════════════════════════════════════════ */

/* ---- honeypot (ซ่อนจากคนจริง แต่บอทมองเห็น) ---- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- ข้อความความน่าเชื่อถือใต้ปุ่มส่งฟอร์ม ---- */
.form-trust {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  color: #5c675e;
  line-height: 1.7;
}

/* ---- Countdown โปรโมชัน (ใน hero) ---- */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(150,201,61,0.35);
  border-radius: 14px;
}
.cd-label { font-size: 13px; font-weight: 600; color: #d6e8b6; margin-right: 2px; }
.cd-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 8px;
  background: linear-gradient(160deg, #64A70B, #96C93D);
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(100,167,11,0.35);
}
.cd-box b { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-box i { font-size: 10px; font-style: normal; color: rgba(255,255,255,0.85); margin-top: 3px; }

/* ---- STATS STRIP ---- */
.stats-strip {
  background: #fff;
  border-top: 1px solid #eaf2ec;
  border-bottom: 1px solid #eaf2ec;
  padding: 2.25rem 1.5rem;
}
.stats-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.stat-item { padding: 8px; }
.stat-num {
  font-family: 'Prompt', sans-serif;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(100deg, #64A70B, #96C93D);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 6px; font-size: 13.5px; color: #6B7280; font-weight: 500; }

/* ---- REVIEWS ---- */
.reviews-section { background: var(--light-bg); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.review-card {
  background: #fff;
  border: 1px solid #e6efe8;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 8px 26px rgba(28,60,38,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(28,60,38,0.12); }
.review-stars { color: #f5a623; font-size: 18px; letter-spacing: 2px; margin-bottom: 10px; }
.review-text { font-size: 14.5px; color: #3a463c; line-height: 1.75; margin-bottom: 1.25rem; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #64A70B, #96C93D);
  color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.review-name { font-weight: 700; font-size: 14px; color: #1c2a1e; }
.review-loc { font-size: 12px; color: #8a978c; margin-top: 2px; }

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- MOBILE STICKY CTA BAR ---- */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 400;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid #e2ecdf;
    box-shadow: 0 -4px 18px rgba(28,60,38,0.10);
  }
  .mcta {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px;
    text-decoration: none;
    font-size: 12px; font-weight: 700;
    border: none; cursor: pointer;
    border-radius: 12px;
    padding: 8px 4px;
  }
  .mcta-ic { font-size: 18px; line-height: 1; }
  .mcta-call { flex: 0 0 68px; background: #eef7e6; color: #4c7a12; }
  .mcta-line { flex: 0 0 68px; background: #e5f7e8; color: #06923a; }
  .mcta-apply {
    flex: 1;
    background: linear-gradient(100deg, #64A70B, #96C93D);
    color: #fff; font-size: 15px; font-weight: 800;
    flex-direction: row; gap: 4px;
    box-shadow: 0 4px 14px rgba(100,167,11,0.4);
  }
  /* ดันปุ่มลอยเดิมขึ้นเหนือแถบ CTA */
  .social-float-group,
  .chat-bubble-wrap { bottom: 78px; }
  .chat-widget { bottom: 150px; }
  body { padding-bottom: 66px; }
}

/* ---- responsive: stats & reviews ---- */
@media (max-width: 760px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; }
  .stat-num { font-size: 28px; }
}

/* ============================================================
   REVIEW FORM (เขียนรีวิว) + star picker
   ============================================================ */
.review-form-wrap { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.btn-review-toggle {
  background: #18201a; color: #fff; border: none;
  padding: 12px 28px; border-radius: 100px;
  font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-review-toggle:hover { background: #0f140f; transform: translateY(-1px); }

.review-form {
  display: none; margin-top: 16px; text-align: left;
  background: #fff; border: 1px solid #e6efe8; border-radius: 16px;
  padding: 20px; box-shadow: 0 10px 30px rgba(28,60,38,.10);
}
.review-form.open { display: block; }
.rf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rf-input {
  width: 100%; padding: 11px 14px; margin-bottom: 12px;
  border: 1px solid #dfeae1; border-radius: 10px; background: #f8fbf9;
  font-family: inherit; font-size: 14px; color: #18201a; outline: none;
  transition: border-color .2s;
}
.rf-input:focus { border-color: #2ECC40; background: #fff; }
textarea.rf-input { resize: vertical; min-height: 74px; }
.rf-stars {
  font-size: 30px; letter-spacing: 4px; color: #d6ddd8;
  cursor: pointer; user-select: none; margin: 2px 0 14px;
}
.rf-stars span { transition: color .12s, transform .12s; display: inline-block; }
.rf-stars span:hover { transform: scale(1.12); }
.rf-stars span.on { color: #f5b301; }
.rf-bottom { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-review-submit {
  background: #2ECC40; color: #fff; border: none;
  padding: 11px 28px; border-radius: 100px;
  font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background .2s;
}
.btn-review-submit:hover { background: #1a9e2c; }
.btn-review-submit:disabled { background: #c7cfc9; cursor: not-allowed; }
.rf-msg { font-size: 13px; color: #e8002d; font-weight: 600; }
.reviews-loading {
  grid-column: 1 / -1; text-align: center;
  color: #8a978c; padding: 32px 16px; font-size: 15px;
}
@media (max-width: 560px) { .rf-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PROMO CAROUSEL (โปสเตอร์เลื่อนอัตโนมัติทีละภาพ)
   ============================================================ */
.promo-carousel { position: relative; max-width: 1120px; margin: 0 auto; overflow: hidden; }
.pc-track { display: flex; gap: 16px; will-change: transform; }
.pc-slide {
  flex: 0 0 auto; display: block; position: relative;
  aspect-ratio: 2 / 3; background: #0d1a0f;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 26px rgba(28,60,38,.12);
}
/* พื้นหลังเบลอ (เอารูปเดิมมาขยายเบลอเติมช่องว่าง → ไม่มีขอบขาว) */
.pc-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--pcbg); background-size: cover; background-position: center;
  filter: blur(22px) brightness(.92); transform: scale(1.18);
}
/* รูปจริงเต็มใบทับด้านบน (เห็นครบ ไม่ตัดคำ) */
.pc-slide img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; }

.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: #222;
  font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 3;
  transition: background .2s, transform .2s;
}
.pc-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.pc-prev { left: 10px; }
.pc-next { right: 10px; }

.pc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.pc-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
  background: #cdd8cf; cursor: pointer; transition: background .2s, transform .2s;
}
.pc-dots button.on { background: #2ECC40; transform: scale(1.25); }

@media (max-width: 640px) {
  .pc-arrow { width: 38px; height: 38px; font-size: 24px; }
}