/* ============================================
   BEAUTIFY.CSS — ace99 Visual Enhancement Override
   Load AFTER all existing CSS files
   ============================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* --- CSS Variables (Design Tokens) --- */
:root {
  --brand-primary: #1a56db;
  --brand-primary-light: #e8eefb;
  --brand-primary-dark: #0f3a94;
  --brand-accent: #f46b00;
  --brand-accent-light: #fff4eb;
  --brand-accent-dark: #c45500;
  --brand-cta-register: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --brand-cta-login: linear-gradient(135deg, #f97316 0%, #ea580c 100%);

  --neutral-50: #fafbfc;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  --font-thai: 'Noto Sans Thai', 'Segoe UI', sans-serif;
  --font-latin: 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   1. GLOBAL RESET & TYPOGRAPHY
   ============================================ */
body {
  font-family: var(--font-thai) !important;
  line-height: 1.8 !important;
  color: var(--neutral-800) !important;
  background: var(--neutral-50) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 90px !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-latin) !important;
  line-height: 1.4 !important;
  color: var(--neutral-900) !important;
}

h1 { font-size: 1.875rem !important; font-weight: 700 !important; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem !important; font-weight: 600 !important; }
h4 { font-size: 1.05rem !important; font-weight: 600 !important; }

p, li, span, div {
  font-family: var(--font-thai) !important;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--brand-primary-dark);
}


/* ============================================
   2. CONTENT SECTION — Layout Fix
   ============================================ */
.content-section {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 24px 28px !important;
}

@media (max-width: 768px) {
  .content-section {
    padding: 16px 16px !important;
  }
}


/* ============================================
   3. UNIQUE SECTIONS — Kill Rainbow, Add Elegance
   ============================================ */
.unique-section {
  margin: 32px 0 !important;
  padding: 28px 28px !important;
  border: 1px solid var(--neutral-200) !important;
  border-left: 4px solid var(--brand-primary) !important;
  border-radius: var(--radius-md) !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.unique-section:hover {
  box-shadow: var(--shadow-sm) !important;
  border-left-color: var(--brand-accent) !important;
}

.unique-section h2,
.unique-section h3 {
  color: var(--neutral-900) !important;
  font-size: 1.4rem !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
  position: relative;
  padding-bottom: 12px;
}

.unique-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--brand-primary);
  border-radius: 2px;
}

.unique-section p {
  color: var(--neutral-600) !important;
  font-size: 0.95rem !important;
  line-height: 1.85 !important;
}

.unique-section ul,
.unique-section ol {
  padding-left: 20px !important;
  margin: 12px 0 !important;
}

.unique-section li {
  margin-bottom: 8px !important;
  color: var(--neutral-600) !important;
  line-height: 1.7 !important;
}

/* Override ALL section-N colors to unified brand */
.section-1, .section-2, .section-3, .section-4,
.section-5, .section-6, .section-7, .section-8,
.section-9, .section-10, .section-11, .section-12 {
  background-color: #ffffff !important;
  border-left-color: var(--brand-primary) !important;
}

/* Alternate accent on even sections */
.section-2, .section-4, .section-6,
.section-8, .section-10, .section-12 {
  border-left-color: var(--brand-accent) !important;
  background-color: var(--neutral-50) !important;
}


/* ============================================
   4. CONTENT CARDS — Better Grid
   ============================================ */
.content-cards {
  display: grid !important;
  gap: 20px !important;
  padding: 20px !important;
}

@media (min-width: 768px) {
  .content-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .content-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 400px) {
  .content-cards {
    grid-template-columns: 1fr !important;
  }
}

.card {
  background: #ffffff !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal) !important;
}

.card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.card img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.card h3 {
  font-size: 0.95rem !important;
  color: var(--neutral-800) !important;
  padding: 14px 16px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}


/* ============================================
   5. LINK CARDS — Unified Accent Color
   ============================================ */
.internal-links {
  gap: 16px !important;
  padding: 20px !important;
}

.link-card {
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--transition-normal) !important;
}

.link-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.link-content {
  padding: 24px 20px !important;
}

.link-card h3 {
  font-size: 1rem !important;
  color: var(--neutral-800) !important;
  font-weight: 600 !important;
}

.link-card:hover h3 {
  color: var(--brand-primary) !important;
}

@media (max-width: 767px) {
  .link-card {
    width: 100% !important;
  }
}


/* ============================================
   6. FLOATING BUTTONS — Refined CTA
   ============================================ */
.floating-buttons {
  bottom: 16px !important;
  gap: 10px !important;
  z-index: 2002 !important;
}

.floating-button {
  width: 156px !important;
  height: 48px !important;
  border-radius: var(--radius-full) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-thai) !important;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-lg) !important;
  transition: all var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: #fff !important;
}

.button-register {
  background: var(--brand-cta-register) !important;
}

.button-login {
  background: var(--brand-cta-login) !important;
}

.floating-button:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: var(--shadow-xl) !important;
}

.button-register:hover {
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35) !important;
}

.button-login:hover {
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.35) !important;
}

@media (max-width: 480px) {
  .floating-button {
    width: 136px !important;
    height: 42px !important;
    font-size: 14px !important;
  }
}


/* ============================================
   7. NEWS CARDS — Cleaner Nexus Style
   ============================================ */
:root {
  --nexus-primary-gradient: linear-gradient(135deg, var(--brand-primary) 0%, #3b82f6 100%) !important;
  --nexus-shadow-soft: var(--shadow-sm) !important;
  --nexus-shadow-medium: var(--shadow-md) !important;
  --nexus-shadow-heavy: var(--shadow-lg) !important;
  --nexus-border-radius: var(--radius-lg) !important;
}

.nexus-content-wrapper {
  max-width: 1100px !important;
  padding: 24px 20px !important;
}

.nexus-grid-container {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}

.nexus-news-card {
  background: #ffffff !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--transition-normal) !important;
}

.nexus-news-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
}

.nexus-news-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.nexus-card-media {
  height: 200px !important;
  background: var(--neutral-100) !important;
}

.nexus-card-headline {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--neutral-800) !important;
  line-height: 1.6 !important;
}

.nexus-card-meta {
  color: var(--neutral-400) !important;
  font-size: 0.8rem !important;
}

.nexus-card-action {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-light) !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 7px 16px !important;
  transition: all var(--transition-fast) !important;
}

.nexus-card-action:hover {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}


/* ============================================
   8. QUANTUM SECTION HEADERS
   ============================================ */
.quantum-section-title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.quantum-section-title::after {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
  height: 3px !important;
  border-radius: 2px !important;
}


/* ============================================
   9. VIDEO SECTION — Improved Flux Cards
   ============================================ */
.flux-video-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 16px !important;
}

.flux-video-item {
  background: linear-gradient(135deg, var(--brand-primary), #3b82f6) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  transition: all var(--transition-normal) !important;
}

.flux-video-item:nth-child(even) {
  background: linear-gradient(135deg, var(--brand-accent), #f59e0b) !important;
}

.flux-video-item:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--shadow-xl) !important;
}

.flux-video-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.flux-video-link {
  padding: 8px 18px !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  backdrop-filter: blur(12px) !important;
  background: rgba(255,255,255,0.2) !important;
}

.flux-video-link:hover {
  background: rgba(255,255,255,0.35) !important;
}


/* ============================================
   10. FAQ SECTION — Refined Accordion
   ============================================ */
.faq-section {
  margin: 40px 0 !important;
  padding: 0 20px !important;
}

.faq-section-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  border-bottom: 3px solid var(--brand-primary) !important;
}

.faq-item {
  background: #ffffff !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-normal) !important;
}

.faq-item:hover {
  border-color: var(--brand-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

.faq-question {
  background: #ffffff !important;
  padding: 16px 20px !important;
}

.faq-question:hover {
  background: var(--neutral-50) !important;
}

.faq-question-text {
  color: var(--neutral-800) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.faq-icon {
  background: var(--brand-primary) !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
}

.faq-item.active .faq-icon {
  background: var(--brand-accent) !important;
}

.faq-answer-inner {
  font-size: 0.9rem !important;
  color: var(--neutral-600) !important;
  line-height: 1.8 !important;
  border-top: 1px solid var(--neutral-100) !important;
}


/* ============================================
   11. POPUP — Less Intrusive
   ============================================ */
@media (max-width: 768px) {
  #mobile-fullscreen-gif {
    background: rgba(0, 0, 0, 0.55) !important;
    animation: fadeInOverlay 0.3s ease-out;
  }
}

.close-btn {
  background: #ffffff !important;
  color: var(--neutral-800) !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-fast);
}

.close-btn:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg) !important;
}


/* ============================================
   12. PRODUCT CARD AREA — Cleaner
   ============================================ */
.productCard_container__KXMQK {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.productCard_title__f1ohZ a {
  color: var(--neutral-800) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

.productCard_title__f1ohZ a:hover {
  color: var(--brand-primary) !important;
}

.productCard_price__9T3J8 {
  color: var(--brand-accent) !important;
  font-weight: 700 !important;
}

.productCard_promotion_label__7iHm_ {
  background: var(--brand-accent) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}


/* ============================================
   13. INTERNAL LINKS SECTION
   ============================================ */
.content-section-1,
.content-section-2,
.content-section-3 {
  margin: 12px 0 !important;
  padding: 16px 20px !important;
  background: var(--neutral-50) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--neutral-200) !important;
}

.internal-link-1 a, .internal-link-2 a, .internal-link-3 a,
.internal-link-4 a, .internal-link-5 a, .internal-link-6 a {
  color: var(--brand-primary) !important;
  font-weight: 500 !important;
  transition: color var(--transition-fast);
}

.internal-link-1 a:hover, .internal-link-2 a:hover, .internal-link-3 a:hover,
.internal-link-4 a:hover, .internal-link-5 a:hover, .internal-link-6 a:hover {
  color: var(--brand-accent) !important;
}


/* ============================================
   14. SHIPPING SECTION
   ============================================ */
.shipping_section_shipping__2oXsq {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 24px !important;
  margin-top: 24px;
}

.shipping_title__6JBej {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--neutral-900) !important;
  margin-bottom: 16px !important;
}


/* ============================================
   15. MUI CUSTOM CARDS (News/Video old style)
   ============================================ */
.MuiPaper-root {
  background: #ffffff !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--transition-normal) !important;
}

.MuiPaper-root:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--neutral-300) !important;
}

.MuiTypography-root {
  color: var(--neutral-800) !important;
  font-family: var(--font-thai) !important;
}

.MuiTypography-h6 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.MuiTypography-body1 {
  color: var(--neutral-500) !important;
  font-size: 0.85rem !important;
}


/* ============================================
   16. SCROLL-TO-TOP BUTTON (inject via JS)
   ============================================ */
#scroll-to-top {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 2001;
  transition: all var(--transition-fast);
}

#scroll-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: var(--brand-primary-dark);
}

#scroll-to-top.visible {
  display: flex;
}


/* ============================================
   17. SMOOTH SCROLLING & SELECTION
   ============================================ */
html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
}


/* ============================================
   18. ANIMATIONS
   ============================================ */
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.unique-section,
.nexus-news-card,
.flux-video-item,
.faq-item {
  animation: fadeInUp 0.4s ease-out both;
}

.unique-section:nth-child(2) { animation-delay: 0.05s; }
.unique-section:nth-child(3) { animation-delay: 0.1s; }
.unique-section:nth-child(4) { animation-delay: 0.15s; }


/* ============================================
   19. DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --neutral-50: #0f1117;
    --neutral-100: #1a1d27;
    --neutral-200: #252835;
    --neutral-300: #363b4d;
    --neutral-400: #5c6378;
    --neutral-500: #8890a4;
    --neutral-600: #b0b7c9;
    --neutral-700: #d2d7e3;
    --neutral-800: #e8ecf4;
    --neutral-900: #f4f6fa;
    --brand-primary-light: #1e2a4a;
  }

  body {
    background: var(--neutral-50) !important;
    color: var(--neutral-800) !important;
  }

  .unique-section,
  .card,
  .link-card,
  .nexus-news-card,
  .faq-item,
  .faq-question,
  .MuiPaper-root {
    background: var(--neutral-100) !important;
    border-color: var(--neutral-200) !important;
  }
}