/* === STARLINK STORE - CUSTOM UI IMPROVEMENTS === */

/* FIX: Scroll padding for sticky header */
html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

/* FIX: Remove scroll-smooth from wrapper - move to html */
.scroll-smooth {
  scroll-behavior: auto !important;
}

/* HERO SECTION - Taller, more impactful */
#top {
  min-height: 90vh;
  min-height: 90svh;
}
#top > .absolute.inset-0.bg-cover {
  filter: brightness(0.9);
}
#top .relative.mx-auto.w-full.max-w-7xl {
  padding-top: 10rem !important;
  padding-bottom: 10rem !important;
}

/* HERO TYPOGRAPHY */
#top h1 {
  font-size: clamp(2.5rem, 5vw, 5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}
#top p.inline-block {
  background: rgba(14, 165, 233, 0.12) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  color: #bae6fd !important;
  letter-spacing: 0.12em !important;
}

/* STATS SECTION - More prominent */
section.relative.z-10 .rounded-2xl {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
section.relative.z-10 .rounded-2xl:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(0,0,0,0.12) !important;
}

/* SECTION LABELS - Consistent blue accent */
.text-sky-600 {
  color: #0284c7 !important;
}

/* PROCESS STEPS - Nicer step numbers */
.mx-auto.flex.h-16.w-16.items-center.justify-center.rounded-2xl.bg-black {
  background: linear-gradient(135deg, #0f172a, #1e40af) !important;
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.3) !important;
}

/* PRODUCT CARDS - Elevation on hover */
#san-pham article {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#san-pham article:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important;
}

/* VIDEO SECTION - Better dark background */
section.border-y.border-slate-200.bg-slate-950 {
  background: linear-gradient(160deg, #0c1a3a 0%, #020617 60%) !important;
}

/* TESTIMONIAL CARDS - Clean elevation */
.relative.flex.flex-col.justify-between.rounded-3xl.border.border-slate-200 {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.relative.flex.flex-col.justify-between.rounded-3xl.border.border-slate-200:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1) !important;
}

/* CTA SECTION - Gradient dark */
.relative.overflow-hidden.rounded-3xl.bg-black.px-8 {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
}

/* HEADER - Slightly better shadow */
header.sticky {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* BODY BACKGROUND - Slightly cooler white */
.min-h-screen.scroll-smooth {
  background-color: #f8fafc !important;
}

/* GENERAL - Better font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FOOTER - Darker, more elegant */
footer {
  background: #0f172a !important;
}
footer .text-slate-900,
footer .font-black,
footer h3 {
  color: #f1f5f9 !important;
}

/* Fix: Product card image container height */
.h-72 {
  height: 18rem; /* 288px */
}


/* Hero banner Ken Burns animation */
@keyframes kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.15) translate(-2%, -1%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

.hero-animate {
  animation: kenburns 25s ease-in-out infinite;
  will-change: transform;
}

/* ========== Missing Tailwind Utility Classes for Premium Show Page ========== */
.h-3 { height: 0.75rem; }
.w-3 { width: 0.75rem; }
.h-3\.5 { height: 0.875rem; }
.w-3\.5 { width: 0.875rem; }
.h-6 { height: 1.5rem; }
.w-6 { width: 1.5rem; }
.w-12 { width: 3rem; }
.h-24 { height: 6rem; }
.w-24 { width: 6rem; }
.w-28 { width: 7rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }
.h-64 { height: 16rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-12 { gap: 3rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.text-\[10px\] { font-size: 10px; }
.ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-white\/5 { --tw-ring-color: rgb(255 255 255 / 0.05); }
.ring-white\/10 { --tw-ring-color: rgb(255 255 255 / 0.1); }
.ring-white\/20 { --tw-ring-color: rgb(255 255 255 / 0.2); }
.bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
.bg-white\/30 { background-color: rgb(255 255 255 / 0.3); }
.bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
.bg-black\/40 { background-color: rgb(0 0 0 / 0.4); }
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.from-sky-500 { --tw-gradient-from: #0ea5e9; --tw-gradient-to: rgb(14 165 233 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-indigo-500 { --tw-gradient-to: #6366f1; }
.from-sky-600 { --tw-gradient-from: #0284c7; --tw-gradient-to: rgb(2 132 199 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-indigo-600 { --tw-gradient-to: #4f46e5; }
.from-sky-500\/10 { --tw-gradient-from: rgb(14 165 233 / 0.1); --tw-gradient-to: rgb(14 165 233 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-indigo-500\/10 { --tw-gradient-to: rgb(99 102 241 / 0.1); }
.bg-sky-500\/20 { background-color: rgb(14 165 233 / 0.2); }
.bg-sky-50 { background-color: #f0f9ff; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-violet-50 { background-color: #f5f3ff; }
.bg-amber-50 { background-color: #fffbeb; }
.text-sky-300 { color: #7dd3fc; }
.text-sky-400 { color: #38bdf8; }
.text-sky-500 { color: #0ea5e9; }
.text-sky-100 { color: #e0f2fe; }
.text-emerald-400 { color: #34d399; }
.text-emerald-500 { color: #10b981; }
.text-violet-500 { color: #8b5cf6; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.shadow-sky-500\/25 { --tw-shadow-color: rgb(14 165 233 / 0.25); --tw-shadow: var(--tw-shadow-colored); }
.shadow-sky-500\/30 { --tw-shadow-color: rgb(14 165 233 / 0.3); --tw-shadow: var(--tw-shadow-colored); }
.shadow-white\/20 { --tw-shadow-color: rgb(255 255 255 / 0.2); --tw-shadow: var(--tw-shadow-colored); }
.shadow-slate-200\/50 { --tw-shadow-color: rgb(226 232 240 / 0.5); --tw-shadow: var(--tw-shadow-colored); }
.shadow-sky-500\/5 { --tw-shadow-color: rgb(14 165 233 / 0.05); --tw-shadow: var(--tw-shadow-colored); }
.shadow-emerald-500\/5 { --tw-shadow-color: rgb(16 185 129 / 0.05); --tw-shadow: var(--tw-shadow-colored); }
.shadow-violet-500\/5 { --tw-shadow-color: rgb(139 92 246 / 0.05); --tw-shadow: var(--tw-shadow-colored); }
.shadow-amber-500\/5 { --tw-shadow-color: rgb(245 158 11 / 0.05); --tw-shadow: var(--tw-shadow-colored); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider { letter-spacing: 0.05em; }
.brightness-110 { filter: brightness(1.1); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.flex-shrink-0 { flex-shrink: 0; }
.scale-95 { transform: scale(0.95); }
.translate-y-2 { transform: translateY(0.5rem); }

/* Hover variants */
.hover\:ring-sky-400\/60:hover { --tw-ring-color: rgb(56 189 248 / 0.6); }
.hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.2); }
.hover\:bg-white\/30:hover { background-color: rgb(255 255 255 / 0.3); }
.hover\:bg-sky-500:hover { background-color: #0ea5e9; }
.hover\:bg-emerald-500:hover { background-color: #10b981; }
.hover\:bg-violet-500:hover { background-color: #8b5cf6; }
.hover\:bg-amber-500:hover { background-color: #f59e0b; }
.hover\:bg-slate-700:hover { background-color: #334155; }
.hover\:brightness-110:hover { filter: brightness(1.1); }
.hover\:shadow-sky-500\/30:hover { --tw-shadow-color: rgb(14 165 233 / 0.3); --tw-shadow: var(--tw-shadow-colored); }
.hover\:shadow-white\/20:hover { --tw-shadow-color: rgb(255 255 255 / 0.2); --tw-shadow: var(--tw-shadow-colored); }
.hover\:translate-x-0\.5:hover { transform: translateX(0.125rem); }
.hover\:translate-y-0:hover { transform: translateY(0); }
.hover\:shadow-slate-200\/50:hover { --tw-shadow-color: rgb(226 232 240 / 0.5); --tw-shadow: var(--tw-shadow-colored); }
.active\:scale-95:active { transform: scale(0.95); }
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }

.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }
.group:hover .group-hover\:bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.group:hover .group-hover\:bg-sky-500 { background-color: #0ea5e9; }
.group:hover .group-hover\:bg-emerald-500 { background-color: #10b981; }
.group:hover .group-hover\:bg-violet-500 { background-color: #8b5cf6; }
.group:hover .group-hover\:bg-amber-500 { background-color: #f59e0b; }
.group:hover .group-hover\:text-white { color: #ffffff; }
.group:hover .group-hover\:scale-110 { transform: scale(1.10); }

/* Responsive - lg variants */
@media (min-width: 1024px) {
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Responsive - sm variants */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:inline-flex { display: inline-flex; }
}

/* MD responsive */
@media (min-width: 768px) {
  .md\:h-56 { height: 14rem; }
  .md\:h-24 { height: 6rem; }
  .md\:w-28 { width: 7rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:p-8 { padding: 2rem; }
}

@media (min-width: 1024px) {
  [data-lg-grid="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.opacity-0 { opacity: 0 !important; }
.group:hover .group-hover\:opacity-100 { opacity: 1 !important; }

/* ========== News Article Premium Typography ========== */
.news-article-content p {
  margin-bottom: 1.5rem;
}
.news-article-content p:first-of-type::first-letter {
  float: left;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  margin-right: 0.5rem;
  margin-top: 0.1rem;
  color: #0f172a;
}
.news-article-content blockquote {
  border-left: 4px solid #0ea5e9;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: #f0f9ff;
  border-radius: 0 0.75rem 0.75rem 0;
  font-style: italic;
  color: #475569;
}
.news-article-content a {
  color: #0ea5e9;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-article-content a:hover {
  color: #0369a1;
}
.news-article-content h2, .news-article-content h3 {
  font-weight: 900;
  color: #0f172a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.news-article-content h2 { font-size: 1.5rem; }
.news-article-content h3 { font-size: 1.25rem; }
.news-article-content img {
  border-radius: 1rem;
  margin: 2rem 0;
}
.news-article-content ul, .news-article-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.news-article-content li {
  margin-bottom: 0.5rem;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Group hover translate for related articles arrow */
.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}