@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800;900&display=swap');

/* ลบ CSS เดิมของ shop section ออกทั้งหมด แล้วเขียนใหม่สำหรับ layout 2 ฝั่ง (flex) + ปุ่ม Lazada/Shopee + วิดีโอ */

.content1 {
  width: 96vw;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0 0 64px 0;
  margin: 32px auto 0 auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 36px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  overflow: visible;
}

.site-footer {
  position: static;
  margin-top: 14px;
  z-index: 1;
}
.shop-main-flex {
  display: flex;
  width: 98%;
  max-width: 1200px;
  min-height: 620px;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  margin: 0 auto;
}
.shop-left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 16px;
}
.shop-title-new {
  font-family: 'Prompt', sans-serif;
  font-size: 2.7rem;
  font-weight: 900;
  color: #1a237e;
  text-shadow: 0 6px 32px rgba(26,35,126,0.08), 0 1px 0 #fff8;
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  animation: popIn 1.1s cubic-bezier(.68,-0.55,.27,1.55);
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.kps-highlight-new {
  color: #ffb300;
  text-shadow: 0 2px 12px #ffb300cc, 0 1px 0 #1e2a3a;
  font-size: 3.1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  animation: glowKPS 2.5s infinite alternate;
}
.button-group-new {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.shop-button-new {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px 18px 24px;
  font-family: 'Prompt', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  border: none;
  border-radius: 32px;
  background: linear-gradient(90deg, #ff9d00 0%, hsl(26, 97%, 55%) 100%);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  outline: none;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  letter-spacing: 0.02em;
  z-index: 2;
  /* remove outer drop shadow */
  filter: none;
  background-size: 200% 100%;
}
.shop-button-new img {
  width: 30px; height: 30px; object-fit: contain;
  filter: none;
  transition: transform 0.18s;
}
.shop-button-new:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: none;
  background-position: 100% 0;
}
.shop-button-new:active {
  transform: scale(0.97);
  box-shadow: none;
}
.lazada-btn-new {
  background: #0d47a1; /* solid deep blue */
  box-shadow: none;
  background-size: auto;
}
.lazada-btn-new:hover {
  background: #1565c0; /* slightly lighter/different shade on hover */
}
.shopee-btn-new {
  background: #ff5722; /* solid orange */
  box-shadow: none;
  background-size: auto;
}
.shopee-btn-new:hover {
  background: #ff6a3a; /* slightly lighter on hover */
}
.shop-button-new span {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 #fff8, 0 2px 8px #0002;
}
.shop-right {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 16px;
}
.shop-video-new {
  width: 100%;
  max-width: 420px;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  background: #000;
  transition: box-shadow 0.3s, transform 0.3s;
}
.shop-video-new:hover {
  box-shadow: 0 16px 48px #1a237e33, 0 2px 8px #ffb30099;
  transform: scale(1.03);
}
.shop-desc {
  font-size: 1.18rem;
  color: #374151;
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 #fff8;
  animation: fadeIn 1.2s;
}
.shop-desc-large {
  font-size: 1.45rem;
  font-weight: 600;
  color: #263159;
  margin-bottom: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px #fff8;
}
.shop-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  color: #1a237e;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  animation: fadeInUp 1.2s 0.2s both;
}
.shop-feature-list-large {
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Bulk purchase contact row */
.bulk-contact{ display:flex; flex-direction:column; gap:12px; margin: 6px 0 14px 0; }
.bulk-contact__title{ font-family:'Prompt',sans-serif; font-weight:800; color:#1f2937; letter-spacing:.02em; font-size:1.45rem; white-space: pre-line; margin-top: 8px; }
.bulk-contact__icons{ display:flex; align-items:center; gap:18px; }
.bulk-contact__btn{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; color:#fff; text-decoration:none; box-shadow:none; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.bulk-contact__btn i{ font-size:24px; filter:none; }
.bulk-contact__btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:none; }
.bulk-contact__btn--line{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.bulk-contact__btn--phone{ background:linear-gradient(135deg,#0b4fa8,#09408f); }
.bulk-contact__btn--mail{ background:linear-gradient(135deg,#f59e0b,#f97316); }

@media (max-width: 900px){
  .bulk-contact{ gap:8px; margin:4px 0 18px 0; }
  .bulk-contact__title{ font-size:1.18rem; }
  .bulk-contact__icons{ gap:12px; }
  .bulk-contact__btn{ width:46px; height:46px; }
  .bulk-contact__btn i{ font-size:20px; }
}
.shop-feature-list li {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-feature-list i {
  color: #ffb300;
  font-size: 1.2em;
  filter: drop-shadow(0 1px 4px #ffb30033);
}
.shop-badge-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin-top: 24px;
  animation: fadeInRight 1.2s 0.4s both;
}
.shop-badge-list-offset {
  margin-left: 36px;
  margin-top: 32px;
  align-items: flex-start !important;
}
.shop-badge {
  background: linear-gradient(90deg, #fffbe7 0%, #ffe082 100%);
  color: #1a237e;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 10px 24px;
  border-radius: 24px;
  box-shadow: 0 2px 12px #ffb30022;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.02em;
}
.shop-badge i {
  color: #ffb300;
  font-size: 1.2em;
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.7) translateY(40px); }
  80% { opacity: 1; transform: scale(1.08) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes glowKPS {
  0% { text-shadow: 0 2px 12px #ffb300cc, 0 1px 0 #1e2a3a; }
  100% { text-shadow: 0 0 32px #ffe082, 0 1px 0 #1e2a3a; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 900px) {
  .navbar {
    position: relative !important;
    z-index: 1000 !important;
  }

  .content1 {
    min-height: 520px;
    padding: 14px 12px 24px 12px;
    border-radius: 16px;
    width: calc(100% - 16px);
    margin: 14px auto 0 auto;
    box-shadow: none;
  }
  .shop-main-flex {
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 0 0 0;
  }
  .shop-left, .shop-right {
    padding: 0;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
  }
  .shop-title-new {
    font-size: 1.45rem;
    text-align: left;
    margin-bottom: 18px;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .kps-highlight-new {
    font-size: 1.7rem;
  }
  .shop-desc-large {
    font-size: 1.18rem;
    margin-bottom: 14px;
    text-align: left;
  }
  .shop-feature-list-large {
    font-size: 1.08rem;
    margin-bottom: 18px;
    text-align: left;
    padding-left: 0;
  }
  .shop-feature-list-large li {
    margin-bottom: 10px;
    align-items: flex-start;
    line-height: 1.45;
  }
  .shop-feature-list-large li i {
    margin-top: 3px;
  }
  .button-group-new {
    gap: 8px;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
  }
  .shop-button-new {
    font-size: 0.95rem;
    padding: 10px 14px 10px 10px;
    border-radius: 20px;
  }
  .shop-button-new img {
    width: 18px;
    height: 18px;
  }
  .shop-right {
    margin-top: 20px;
    padding-right: 0;
    margin-bottom: 6px;
  }
  .shop-video-new {
    max-width: 98vw;
    border-radius: 14px;
  }
  .shop-badge-list-offset {
    margin-left: 0;
    margin-top: 10px;
    align-items: center !important;
  }
  .shop-badge {
    font-size: 0.92rem;
    padding: 6px 10px;
    border-radius: 16px;
  }
  .shop-badge-list.shop-badge-list-offset {
    display: none !important;
  }

  .bulk-contact__title {
    line-height: 1.35;
    margin-top: 4px;
  }

  .bulk-contact__icons {
    gap: 10px;
    flex-wrap: wrap;
  }

  .site-footer {
    position: static !important;
    margin-top: 18px;
    z-index: 1;
  }
}