/* blue-theme.css — โทนสีน้ำเงินสไตล์บริษัท (ตรงกับโปรแกรม Nexus): หัวหน้าเว็บเป็นน้ำเงินไล่สีนิ่งๆ ตัวหนังสือขาว ไม่มีแสงส้ม/แสงเคลื่อนไหว
   โหลดต่อท้าย style.css + auth.css ทุกหน้า — ถ้าไม่ชอบ ลบแท็ก <link> ของไฟล์นี้ออกเว็บจะกลับเป็นแบบเดิมทันที */
:root {
  --blue-hero-1: #3B8BFA;
  --blue-hero-2: #1565E8;
  --blue-hero-3: #0F4FC0;
  --blue-footer: #0C2A66;
}

/* ── หัวหน้าแรก ── */
.hero {
  background: linear-gradient(160deg, var(--blue-hero-1) 0%, var(--blue-hero-2) 48%, var(--blue-hero-3) 100%);
  border-radius: 0 0 48px 48px;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
/* วงกลมจางๆ ตกแต่งมุม (นิ่ง ไม่ขยับ) แบบเดียวกับแผงน้ำเงินของหน้าเข้าสู่ระบบ */
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -160px; top: -170px; }
.hero::after  { width: 380px; height: 380px; left: -140px; bottom: -150px; background: rgba(255,255,255,.06); }
.hero-inner { position: relative; z-index: 1; }

.hero-eyebrow { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; box-shadow: none; }
.hero-eyebrow::before { background: #4ADE80; box-shadow: 0 0 0 4px rgba(74,222,128,.22); }

/* หัวข้อเดิมเป็นตัวอักษรไล่สีโปร่งใส → บนพื้นน้ำเงินต้องเป็นสีขาวล้วน */
.hero-title, .dl-hero h1 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #fff; color: #fff; text-shadow: none;
}
.hero-title .hero-em { -webkit-text-fill-color: #D6E6FF; color: #D6E6FF; }
.hero-desc, .dl-hero p { color: rgba(255,255,255,.9) !important; }

.hero .btn-cta { background: #fff; color: var(--blue-hero-3); box-shadow: 0 16px 34px -16px rgba(5,25,70,.55); }
.hero .btn-cta .arrow { background: var(--blue-hero-2); color: #fff; }
.hero-cta-row .btn-light { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); color: #fff; backdrop-filter: none; }
.hero-cta-row .btn-light:hover { background: rgba(255,255,255,.22); }

.hero-values li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: none; box-shadow: none; }
.hero-values li::before { border-color: #fff; }

/* ── หัวหน้าดาวน์โหลด ── */
.dl-hero {
  /* !important เพราะหน้าดาวน์โหลดกำหนดพื้นหลังเดิมไว้ใน <style> ของตัวเองซึ่งโหลดทีหลังไฟล์นี้ */
  background: linear-gradient(160deg, var(--blue-hero-1) 0%, var(--blue-hero-2) 48%, var(--blue-hero-3) 100%) !important;
  border-radius: 0 0 48px 48px; position: relative; overflow: hidden;
}
.dl-hero::before { content: ''; position: absolute; width: 480px; height: 480px; right: -150px; top: -160px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.dl-hero > * { position: relative; z-index: 1; }
.dl-hero .eyebrow { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; }
.dl-hero h1 .accent, .dl-hero h1 em { color: #D6E6FF; -webkit-text-fill-color: #D6E6FF; }

/* ── ปุ่มและแบนด์ต่างๆ ให้เป็นโทนเดียวกัน ── */
.cta-band { background: linear-gradient(160deg, var(--blue-hero-1) 0%, var(--blue-hero-2) 55%, var(--blue-hero-3) 100%); }

/* ── ท้ายหน้า: น้ำเงินเข้ม ── */
footer { background: var(--blue-footer); color: rgba(255,255,255,.72); border-top: none; }
.footer-top { border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-brand img { filter: brightness(0) invert(1); }
.footer-brand span { color: #fff; }
.footer-col h4 { color: #fff; }
.footer-col a { color: rgba(255,255,255,.72); }
.footer-col a:hover { color: #fff; }
.footer-desc, .footer-bottom { color: rgba(255,255,255,.62); }
.footer-bottom a { color: rgba(255,255,255,.8); }

@media (max-width: 600px) {
  .hero { border-radius: 0 0 32px 32px; padding-bottom: 72px; }
  .dl-hero { border-radius: 0 0 32px 32px; }
}

/* ── หัวหน้าร้านค้า ── (shop.css กำหนดพื้นหลังเดิมไว้ จึงใช้ !important) */
.shop-hero {
  background: linear-gradient(160deg, var(--blue-hero-1) 0%, var(--blue-hero-2) 48%, var(--blue-hero-3) 100%) !important;
  border-radius: 0 0 48px 48px; position: relative; overflow: hidden;
}
.shop-hero::before { content: ''; position: absolute; width: 460px; height: 460px; right: -150px; top: -160px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.shop-hero > * { position: relative; z-index: 1; }
.shop-hero h1 { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
.shop-hero p { color: rgba(255,255,255,.9) !important; }
.shop-hero .eyebrow { background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.34); color: #fff !important; }
@media (max-width: 600px) { .shop-hero { border-radius: 0 0 32px 32px; } }