/* Muno.vn dark green theme — matches the IPTV app look (black → green glow, green accent) */
:root {
  --mn-bg: #050a07;
  --mn-bg-2: #06150c;
  --mn-surface: rgba(255, 255, 255, 0.04);
  --mn-surface-hover: rgba(255, 255, 255, 0.07);
  --mn-border: rgba(34, 197, 94, 0.22);
  --mn-text: #f3f4f6;
  --mn-text-2: #d1d5db;
  --mn-muted: #9ca3af;
  --mn-accent: #22c55e;
  --mn-accent-hover: #4ade80;
  --mn-accent-dark: #16a34a;
  --mn-accent-soft: rgba(34, 197, 94, 0.14);
}
html { background: var(--mn-bg); color-scheme: dark; }
body {
  color: var(--mn-text);
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(34, 197, 94, 0.35), transparent 65%),
    radial-gradient(700px 400px at 85% 55%, rgba(22, 163, 74, 0.18), transparent 70%),
    linear-gradient(180deg, var(--mn-bg-2) 0%, var(--mn-bg) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Surfaces */
.bg-white { background-color: var(--mn-surface) !important; }
nav.bg-white, .bg-white.fixed {
  background: rgba(5, 10, 7, 0.82) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mn-border);
}
footer.bg-white { background: rgba(3, 7, 5, 0.6) !important; border-top: 1px solid var(--mn-border); }
.shadow-md, .shadow-sm { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--mn-border) !important; }
.rounded-xl.bg-white, .rounded-2xl.bg-white, .contact-card, .policy-item {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.10), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid var(--mn-border);
}
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--mn-surface-hover) !important; }
.border-gray-200, .border-t { border-color: rgba(255, 255, 255, 0.10) !important; }
.section-divider { border-color: rgba(255, 255, 255, 0.10) !important; background-color: rgba(255,255,255,0.10) !important; }

/* Hero */
.bg-gradient-to-br.from-blue-600.to-indigo-600 {
  background: radial-gradient(600px 300px at 50% 0%, rgba(74, 222, 128, 0.35), transparent 70%),
              linear-gradient(135deg, #0b3d22 0%, #052112 55%, #04110a 100%) !important;
  border-bottom: 1px solid var(--mn-border);
}

/* Text */
.text-gray-900, .text-gray-800 { color: var(--mn-text) !important; }
.text-gray-700, .text-gray-600 { color: var(--mn-text-2) !important; }
.text-gray-500, .text-gray-400 { color: var(--mn-muted) !important; }
h1, h2, h3 { color: var(--mn-text); }
.text-blue-600, .text-accent { color: var(--mn-accent) !important; }
.hover\:text-blue-600:hover { color: var(--mn-accent-hover) !important; }
.hover\:text-gray-500:hover { color: var(--mn-text) !important; }
.nav-link:hover { color: var(--mn-accent-hover) !important; }
a.hover\:underline:hover { color: var(--mn-accent-hover); }

/* Buttons and badges */
.bg-blue-600, .bg-primary {
  background-color: var(--mn-accent) !important;
  color: #05140b !important;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}
.hover\:bg-blue-700:hover { background-color: var(--mn-accent-hover) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--mn-accent-soft) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--mn-accent) !important; }

/* Mobile menu */
.md\:hidden.bg-white, .mobile-menu { background: rgba(5, 10, 7, 0.96) !important; border-bottom: 1px solid var(--mn-border); }

/* Scrollbar + selection */
::selection { background: rgba(34, 197, 94, 0.35); }

/* Prominent policy notice */
.border-blue-600 { border-color: var(--mn-accent) !important; }
.notice-card {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.05)) !important;
  box-shadow: 0 0 0 1px var(--mn-accent), 0 0 32px rgba(34, 197, 94, 0.25) !important;
}
.notice-card h2 { color: var(--mn-accent-hover); }
.notice-card li { margin-bottom: .5rem; }

/* Mobile: tighter policy cards and plain bullet lists so text keeps a readable width */
.policy-item ul, .notice-card ul {
  list-style: disc !important;
}
@media (max-width: 640px) {
  section.container { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 6rem !important; }
  .policy-item, .notice-card, .contact-card { padding: 1.25rem !important; }
  .policy-item ul, .notice-card ul {
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 1.25rem !important;
    margin-left: 0 !important;
  }
  .policy-item h2, .notice-card h2 { font-size: 1.15rem; line-height: 1.4; }
  .text-4xl { font-size: 2rem !important; line-height: 1.15 !important; }
  footer .md\:flex > p { margin-top: 1rem; }
}

/* Mobile menu: make the Contact CTA align with the other items */
@media (max-width: 767px) {
  nav a.bg-primary { display: block; margin: 0.5rem 0.75rem 0.25rem; text-align: center; }
}