/* =====================================================================
   modern.css — Triple P | Futuristic AI-era theme overlay
   ใช้ทับ style.css เดิม (โหลดเป็นไฟล์สุดท้าย) เพื่อปรับลุค Dynamics 365 BC
   ให้ทันสมัย ธีมล้ำ + บรรยากาศยุค AI โดยไม่ต้องรื้อโครงสร้าง HTML
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  --bg:        #05060d;
  --bg-2:      #0a0d1c;
  --surface:   rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border:    rgba(255, 255, 255, 0.10);
  --text:      #e8ebf5;
  --muted:     #9aa3bd;
  --cyan:      #22d3ee;
  --violet:    #8b5cf6;
  --blue:      #3b82f6;
  --grad:      linear-gradient(110deg, #22d3ee 0%, #3b82f6 45%, #8b5cf6 100%);
}

/* ---------- พื้นฐาน ---------- */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Sarabun', 'Space Grotesk', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* แสง ambient เคลื่อนไหวเบาๆ ทั้งหน้าจอ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60vw 60vw at 12% 8%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(55vw 55vw at 88% 22%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(50vw 50vw at 50% 100%, rgba(59, 130, 246, 0.10), transparent 60%);
  pointer-events: none;
}
/* ตารางเส้น (grid) สไตล์ HUD */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}

h1, h2, h3, h4, h5 { font-family: 'Space Grotesk', 'Sarabun', sans-serif !important; }

a { transition: color .25s ease; }

/* ---------- Header / Nav แบบกระจกฝ้า ---------- */
#header {
  background: rgba(8, 10, 22, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}
#header.header-scrolled { background: rgba(6, 8, 18, 0.9) !important; }
#header #logo h1 a,
#header #logo h1 a:hover {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700 !important;
}
.nav-menu a, .nav-menu > li > a {
  color: var(--muted) !important;
  font-weight: 500;
  letter-spacing: .2px;
  position: relative;
}
.nav-menu a:hover, .nav-menu .menu-active > a, .nav-menu li:hover > a {
  color: #fff !important;
}
.nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-menu > li:hover > a::after,
.nav-menu .menu-active > a::after { transform: scaleX(1); }
/* dropdown ลูก */
.nav-menu ul { background: #0c1024 !important; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

/* ---------- Hero / Intro ---------- */
#intro .carousel-item::before {
  /* overlay เข้มขึ้น + แต้มสีกลางจอให้ตัวอักษรอ่านง่าย */
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(5,6,13,0.72) 0%, rgba(5,6,13,0.45) 100%),
    linear-gradient(180deg, rgba(5,6,13,0.80) 0%, rgba(5,6,13,0.70) 40%, rgba(5,6,13,0.95) 100%) !important;
}
/* แก้กล่องดำ/เทาที่โผล่ข้างรูป: บังคับรูปคลุมเต็มพื้นที่ทุกขนาดจอ */
#intro { background: #05060d !important; }
#intro .carousel-background,
#intro .carousel-item { width: 100% !important; }
#intro .carousel-background img {
  width: 100% !important;
  height: 80vh !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.85) brightness(0.42) contrast(1.05);
}
#intro h2 {
  font-weight: 700 !important;
  letter-spacing: -1px;
  color: #ffffff !important;
  /* ใช้สีขาวล้วน + เงา เพื่อความคมชัด (เลิกใช้ gradient โปร่งใสที่จางบนพื้นสว่าง) */
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9) !important;
}
#intro p {
  color: #eef1fb !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.9) !important;
}
/* ป้าย AI ให้ทึบขึ้นเล็กน้อยเพื่ออ่านง่าย */
.ai-badge {
  background: rgba(8,10,22,0.55) !important;
  color: #eaf1ff !important;
}

/* แถบป้าย AI ลอยเหนือ hero */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 16px;
  font: 600 13px/1 'Space Grotesk', sans-serif;
  letter-spacing: .5px;
  color: #d6e2ff;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(8px);
}
.ai-badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(34,211,238,.7);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,211,238,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

/* ---------- Section ทั่วไป ---------- */
section { background: transparent !important; }

/* #about มี overlay ขาวทับจาก style.css ทำให้ตัวอักษรขาวอ่านไม่ออก
   เปลี่ยนเป็น overlay เข้มเข้ากับธีม */
#about { background: #05060d !important; }
#about::before {
  background: linear-gradient(180deg, rgba(5,6,13,0.86) 0%, rgba(10,13,28,0.92) 100%) !important;
}
#about .section-header h3, #about .section-header p,
#about h3, #about p { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.section-bg, #news.section-bg { background: rgba(255,255,255,0.015) !important; }

/* #facts (TRIAL VERSION) มี ::before overlay ขาว 0.88 ทับ (เหมือน #about)
   -> เปลี่ยนเป็น overlay เข้ม ตัวอักษรถึงจะอ่านออก */
#facts { background: #05060d !important; }
#facts::before {
  background: linear-gradient(180deg, rgba(5,6,13,0.88) 0%, rgba(10,13,28,0.94) 100%) !important;
}
#facts .section-header h3 { color: #fff !important; }
#facts p, #facts .col-lg-12 p, #facts a strong { color: #cfd7ee !important; }
#facts a strong, #facts strong a { color: var(--cyan) !important; }
.section-header h3, .section-title {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -.5px;
}
.section-header h3::after { background: var(--grad) !important; }
.section-header p, #about p, #facts p, section p, .description, .detail, .list, .news-info, .topic {
  color: var(--muted) !important;
}
#about h2.title a, .news-wrap h4 a, .about-col .title a { color: #eaf0ff !important; }

/* ---------- การ์ด (Promotion / About / News) ---------- */
.card, .about-col, .news-wrap, .box .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  position: relative;
}
.card::before, .about-col::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.card:hover, .about-col:hover, .news-wrap:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(34, 211, 238, 0.12), 0 0 0 1px rgba(139,92,246,.25);
  border-color: transparent !important;
}
.card:hover::before, .about-col:hover::before { opacity: 1; }
.card .icon, .about-col .icon, .icon {
  background: var(--grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(59,130,246,.35);
}
.card .title, .card h1.title, .card h4.title { color: #fff !important; }
.card .description { color: #c9d3f0 !important; }

/* ---------- ปุ่ม ---------- */
.btn-secondary, .cta-btn, .btn-get-started, .cta-btn-block, .enter-site a {
  background: var(--grad) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  letter-spacing: .3px;
  box-shadow: 0 8px 26px rgba(59,130,246,.35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-secondary:hover, .cta-btn:hover, .btn-get-started:hover, .cta-btn-block:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 34px rgba(139,92,246,.45);
  color: #fff !important;
}
.link, #myBtn { color: var(--cyan) !important; background: none; border: none; cursor: pointer; }

/* ---------- Call to action ---------- */
#call-to-action {
  background: linear-gradient(120deg, rgba(34,211,238,.10), rgba(139,92,246,.14)) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#call-to-action h3 { color: #fff !important; }

/* ---------- รูปภาพ / วิดีโอ ---------- */
.video-row video, .facts-img img, .news-wrap figure img, iframe {
  border-radius: 14px;
  border: 1px solid var(--border);
}
.about-col .img img { border-radius: 14px 14px 0 0; filter: saturate(.95) brightness(.92); }

/* ---------- Footer ---------- */
#footer {
  background: #04050b !important;
  border-top: 1px solid var(--border);
  color: var(--muted) !important;
}
#footer .copyright strong { color: #fff; }

/* ---------- back to top ---------- */
.back-to-top { background: var(--grad) !important; color:#fff !important; box-shadow: 0 8px 22px rgba(59,130,246,.4); }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  body::after { background-size: 32px 32px; }
  #intro h2 { font-size: 28px !important; }
}