@charset "utf-8";
/* AFTER WEB DESIGN — SPECIAL BONUS (v2) */

.awd-bonus {
  --bonus-bg: #121316;
  --bonus-card: #1b1c21;
  --bonus-border: #2e3038;
  --bonus-text: #ffffff;
  --bonus-muted: #b4b8c2;
  --bonus-blue: #3997ff;
  --bonus-blue-light: #7cc4ff;

  position: relative;
  box-sizing: border-box;
  width: auto;
  padding: 64px 20px 68px;
  overflow: hidden;
  overflow: clip;
  contain: paint;
 
  color: var(--bonus-text);
  font-family: "Noto Sans Thai", sans-serif;
  font-size: 1rem;
}
.awd-bonus, .awd-bonus *, .awd-bonus *::before, .awd-bonus *::after { box-sizing: border-box; }

.awd-bonus__container { width: 100%; max-width: 1120px; margin: 0 auto; }

/* Header */
.awd-bonus__header { text-align: center; margin-bottom: 38px; }
.awd-bonus__eyebrow {
  display: inline-block; margin: 0 0 12px; padding: 4px 16px;
  border: 1px solid rgba(124,196,255,.35); border-radius: 30px; background: rgba(57,151,255,.08);
  color: var(--bonus-blue-light); font-family: "promptregular", sans-serif; font-size: 1rem; letter-spacing: 2px; line-height: 1.7;
}
.awd-bonus__title {
  margin: 0; color: var(--bonus-text); font-family: "serithairegular", sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 400; line-height: 1.5;
}
.awd-bonus__title span {
  display: inline-block;
  background: linear-gradient(100deg, var(--bonus-blue) 20%, #ffc766 50%, var(--bonus-blue) 80%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: awd-bonus-shine 4s linear infinite;
}
@keyframes awd-bonus-shine { to { background-position: -200% 0; } }

/* Grid */
.awd-bonus__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* Card */
.awd-bonus__item {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; align-items: flex-start; gap: 16px; min-width: 0;
  padding: 24px 22px; overflow: hidden;
  background: linear-gradient(180deg, #202229, var(--bonus-card));
  border: 1px solid var(--bonus-border); border-radius: 18px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.awd-bonus__item::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(57,151,255,.18), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.awd-bonus__item::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--bonus-blue), #ffc766);
  transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.awd-bonus__item:hover { border-color: rgba(57,151,255,.55); transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(57,151,255,.45); }
.awd-bonus__item:hover::before { opacity: 1; }
.awd-bonus__item:hover::after { transform: scaleX(1); }
.awd-bonus__item > * { position: relative; z-index: 1; }

/* Icon */
.awd-bonus__icon {
  position: relative; display: flex; flex: 0 0 52px; width: 52px; height: 52px; align-items: center; justify-content: center;
  color: var(--bonus-blue-light); background: rgba(57,151,255,.12); border: 1px solid rgba(57,151,255,.25); border-radius: 14px;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s, box-shadow .3s;
}
.awd-bonus__icon::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--bonus-blue); opacity: 0;
}
.awd-bonus__item:hover .awd-bonus__icon { transform: scale(1.1) rotate(-6deg); background: var(--bonus-blue); color: #fff; box-shadow: 0 10px 26px -8px rgba(57,151,255,.8); }
.awd-bonus__item:hover .awd-bonus__icon::after { animation: awd-bonus-ping 1.1s ease-out infinite; }
@keyframes awd-bonus-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.awd-bonus__icon svg {
  display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Text */
.awd-bonus__content { min-width: 0; }
.awd-bonus__label {
  display: inline-block; margin-bottom: 6px; padding: 1px 12px; border-radius: 30px;
  background: rgba(255,199,102,.12); border: 1px solid rgba(255,199,102,.35);
  color: #ffc766; font-size: 1rem; font-weight: 600; line-height: 1.6;
}
.awd-bonus__name { margin: 0 0 4px; color: var(--bonus-text); font-size: 1.125rem; font-weight: 600; line-height: 1.55; }
.awd-bonus__desc { margin: 0; color: var(--bonus-muted); font-size: 1rem; line-height: 1.7; }

/* Scroll reveal */
.awd-bonus-js .awd-bonus__reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; transition-delay: var(--d, 0s); }
.awd-bonus-js .awd-bonus__reveal.awd-in { opacity: 1; transform: none; }
.awd-bonus-js .awd-bonus__item.awd-in:hover { transform: translateY(-4px); transition-delay: 0s; }

/* Responsive */
@media (max-width: 900px) {
  .awd-bonus { padding: 52px 18px 56px; }
  .awd-bonus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .awd-bonus { padding: 42px 16px 46px; }
  .awd-bonus__header { margin-bottom: 26px; }
  .awd-bonus__grid { grid-template-columns: 1fr; gap: 14px; }
  .awd-bonus__item { padding: 20px 18px; gap: 14px; }
  .awd-bonus__icon { flex-basis: 46px; width: 46px; height: 46px; }
  .awd-bonus__icon svg { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .awd-bonus *, .awd-bonus *::before, .awd-bonus *::after { animation: none !important; transition: none !important; }
  .awd-bonus-js .awd-bonus__reveal { opacity: 1; transform: none; }
}

/* Thai text wrapping: allow long strings to break instead of overflowing */
.awd-bonus, .awd-bonus * {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: auto;
}
.awd-bonus .awd-bonus__content, .awd-bonus .awd-features li > span:last-child { min-width: 0; }

/* Force long description text to wrap inside the card (overrides site-wide rules) */
.awd-bonus .awd-bonus__content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.awd-bonus .awd-bonus__desc,
.awd-bonus .awd-bonus__name {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  text-wrap: wrap;
}

/* Never wider than the page; clip anything that sticks out */
.awd-bonus {
  box-sizing: border-box !important;
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  overflow-x: clip;
}
.awd-bonus img, .awd-bonus svg { max-width: 100%; }