@import url('https://fonts.googleapis.com/css2?family=Phudu:wght@500;600;700;800;900&display=swap');

/* ==========================================================================
   TÔN NAM KIM - CORE DESIGN SYSTEM & STYLESHEET
   Font: SVN-Gilroy | Main Color: #155AD1 (Tôn Nam Kim Blue)
   Accent Color: #F89B39 (Tôn Nam Kim Orange)
   ========================================================================== */

/* ==========================================================================
   Gilroy / SVN-Gilroy Font Faces (Full Family: 100 - 950 & Italics)
   ========================================================================== */

/* Thin (100) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Thin Italic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Xlight (200) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Xlight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Xlight Italic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Xlight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Light Italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Medium Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy SemiBold Italic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Bold Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* XBold (800) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy XBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy XBold Italic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy XBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Black Italic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Heavy (950) */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Heavy.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Heavy Italic.otf') format('opentype');
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../assets/assets/Font-Gilroy-VH-Full/SVN-Gilroy Heavy.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Gilroy Font Utility Classes
   ========================================================================== */
.font-gilroy,
.font-svn-gilroy,
h1.font-gilroy,
h2.font-gilroy,
h3.font-gilroy,
h4.font-gilroy,
h5.font-gilroy,
h6.font-gilroy {
  font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.font-gilroy-thin {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 100 !important;
}

.font-gilroy-xlight {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 200 !important;
}

.font-gilroy-light {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 300 !important;
}

.font-gilroy-regular {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 400 !important;
}

.font-gilroy-medium {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 500 !important;
}

.font-gilroy-semibold {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 600 !important;
}

.font-gilroy-bold {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 700 !important;
}

.font-gilroy-xbold {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 800 !important;
}

.font-gilroy-black {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 900 !important;
}

.font-gilroy-heavy {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-weight: 950 !important;
}

:root {
  --color-primary: #155AD1;
  --color-primary-dark: #0B3C91;
  --color-primary-darker: #06235B;
  --color-primary-light: #2563EB;
  --color-primary-soft: #EEF4FF;
  --color-accent: #F89B39;
  --color-accent-dark: #E68A28;
  --color-accent-soft: #FFF7ED;
  --color-slate-900: #0F172A;
  --color-slate-800: #1E293B;
  --color-slate-600: #475569;
  --color-slate-100: #F1F5F9;
  --color-slate-50: #F8FAFC;
}

/* Global resets & typography */
html {
  font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1E293B;
  background-color: #FFFFFF;
  overflow-x: hidden;
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  line-height: 1.65;
}

/* ==========================================================================
   UNIFIED RESPONSIVE SECTION TITLE SYSTEM (Clamp-based)
   Đồng bộ 1 font size tiêu đề cho toàn bộ dự án, co giãn linh hoạt bằng clamp()
   ========================================================================== */
.section-title,
h2.section-title,
h3.section-title {
  font-family: 'Phudu', 'Gilroy', -apple-system, sans-serif !important;
  font-size: clamp(1.35rem, 1.12rem + 1.15vw, 1.875rem) !important; /* ~22px mobile -> 26px tablet -> 30px desktop */
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: #155AD1;
}

.section-title.text-white,
.section-title-white {
  color: #FFFFFF !important;
}

.section-title.text-navy,
.section-title-dark {
  color: #0B2860 !important;
}

/* ==========================================================================
   UNIFIED RESPONSIVE BODY & CONTENT TYPOGRAPHY (Clamp-based)
   Nâng cấp font nội dung to rõ ràng, dễ đọc, chuẩn responsive clamp()
   ========================================================================== */
p,
.content-text,
.body-text {
  font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  line-height: 1.65;
}

.section-desc,
.section-subtitle {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem) !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

.card-desc {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem) !important;
  line-height: 1.6 !important;
  color: #475569;
}

.meta-text,
.text-meta {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem) !important;
  line-height: 1.5 !important;
}

/* Card Headings */
.card-title,
h3.card-title {
  font-family: 'Phudu', 'Gilroy', -apple-system, sans-serif !important;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem) !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

.card-title-sm,
h4.card-title-sm {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* Headings Typography: Phudu SemiBold */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading,
.font-phudu {
  font-family: 'Phudu', 'Gilroy', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}

/* Body & Content Elements: Gilroy */
span,
a,
li,
button,
input,
label,
.font-gilroy {
  font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Footer Navigation Lists & Items: Gilroy */
footer ul,
footer ul li,
footer ul li a,
footer ol,
footer ol li,
footer ol li a,
footer li,
footer li a {
  font-family: 'Gilroy', 'SVN-Gilroy', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 2px solid #F1F5F9;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Modern Card Hover Effects */
.card-hover-effect {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(21, 90, 209, 0.12), 0 10px 15px -8px rgba(0, 0, 0, 0.06);
}

/* Gradient Overlay for IR & News Cards */
.bg-gradient-overlay-blue {
  background: linear-gradient(180deg, rgba(11, 60, 145, 0.1) 0%, rgba(11, 60, 145, 0.85) 60%, rgba(6, 35, 91, 0.96) 100%);
}

.bg-gradient-hero-left {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
}

.bg-gradient-hero-right {
  background: linear-gradient(135deg, #0F172A 0%, #155AD1 100%);
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-panel-dark {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation Dropdown animations & Seamless Hover Bridge */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.12s;
  z-index: 100;
}

/* Active hover, focus-within and dropdown-hover states */
.group:hover .nav-dropdown,
.group:focus-within .nav-dropdown,
.nav-dropdown:hover,
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Seamless hover bridge strictly bounded to each trigger button */
.nav-item-dropdown::after,
#main-header .relative.group:has(.nav-dropdown)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  pointer-events: auto;
  z-index: 40;
}

/* Smooth chevron rotation on keyboard focus */
.group:focus-within>a .fa-chevron-down,
.group:focus-within>button .fa-chevron-down {
  transform: rotate(180deg);
}

/* Shimmer animation for stats badge */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

.animate-shimmer {
  position: relative;
  overflow: hidden;
}

.animate-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2.5s infinite;
}

/* Stock Ticker Pulsing Indicator */
@keyframes pulse-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 0;
  }

  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}

.pulse-indicator {
  position: relative;
}

.pulse-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: #22C55E;
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Floating Action Button Animations */
.floating-item {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-item:hover {
  transform: translateX(-4px) scale(1.05);
}

/* Tab indicator */
.tab-btn.active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(21, 90, 209, 0.35);
}

/* Map pulse marker */
@keyframes map-ping {

  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.map-ping-animate {
  animation: map-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Scroll to top button */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* Hero Banners Dual Slider Styles */
.hero-left-slide,
.hero-right-slide {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-left-slide.hidden,
.hero-right-slide.hidden {
  display: none !important;
}

.hero-left-dot,
.hero-right-dot {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo Masked Wave Background (Khít Header) */
.logo-header-flush {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
}

.logo-wing-container {
  position: absolute;
  top: 0;
  bottom: -1px;
  right: 0;
  left: -100vw;
  pointer-events: none;
  z-index: 0;
  display: flex;
  transition: all 0.3s ease;
}

.logo-header-flush:hover .logo-wing-container {
  filter: brightness(1.03);
}

.logo-header-flush img {
  position: relative;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-header-flush:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   Footer Typography & Dark Banner / Newsletter Guarantee (Pure White & Boldness)
   ========================================================================== */
footer {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  color: #FFFFFF;
}

/* Footer columns navigation titles (Pure White for Blue Logo Background) */
.footer-main h4,
.footer-nav-col h4,
.footer-light h4,
footer .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 h4 {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  color: #FFFFFF !important;
}

/* ==========================================================================
   DARK BANNER & ĐĂNG KÝ BẢN TIN (GUARANTEED PURE WHITE & HIGH CONTRAST)
   Khắc phục triệt để lỗi màu chữ ĐĂNG KÝ BẢN TIN bị tối/đen do CSS footer h4 đè
   ========================================================================== */
.footer-dark-banner,
footer .bg-\[\#061838\],
footer [class*="bg-[#061838]"] {
  color: #FFFFFF !important;
}

.footer-dark-banner h3,
.footer-dark-banner h4,
.newsletter-card h4,
.newsletter-title,
footer .bg-\[\#061838\] h3,
footer .bg-\[\#061838\] h4,
footer .bg-\[\#061838\] .text-white {
  color: #FFFFFF !important;
}

.newsletter-title {
  font-family: 'Phudu', 'Gilroy', sans-serif !important;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
}

.newsletter-desc {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem) !important;
  color: rgba(226, 232, 240, 0.95) !important;
  line-height: 1.5 !important;
}

.newsletter-input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  font-size: clamp(0.875rem, 0.84rem + 0.25vw, 1rem) !important;
}

.newsletter-input::placeholder {
  color: rgba(226, 232, 240, 0.8) !important;
}

.newsletter-input:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #F89B39 !important;
  box-shadow: 0 0 0 3px rgba(248, 155, 57, 0.3) !important;
}

/* Chrome autofill fix: không bị loang trắng hoặc chữ đen khi autofill */
.newsletter-input:-webkit-autofill,
.newsletter-input:-webkit-autofill:hover,
.newsletter-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0px 1000px #0a2558 inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.newsletter-security {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem) !important;
  color: rgba(203, 213, 225, 0.85) !important;
}

/* Bullet Dots cho thẻ li trong Footer */
footer ul {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

footer ul li {
  position: relative;
  padding-left: 16px;
}

footer ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.75);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

footer ul li:hover::before {
  background-color: #FBBF24;
  transform: scale(1.4);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

footer ul li a {
  font-family: 'Gilroy', 'SVN-Gilroy', sans-serif !important;
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem) !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease;
}

footer ul li a:hover {
  color: #FBBF24 !important;
}

footer p,
footer span {
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 0.975rem);
  line-height: 1.6;
}

footer .footer-bold {
  font-weight: 700 !important;
}

footer .footer-semibold {
  font-weight: 600 !important;
}

/* ==========================================================================
   PARTNER ECOSYSTEM INFINITE LOGO MARQUEE SLIDER (1 ROW)
   Tự động chạy vô tận 60fps mượt mà, dừng khi rê chuột (pause on hover)
   ========================================================================== */
.partner-marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.partner-marquee-track {
  display: flex;
  width: max-content;
  animation: partnerMarquee 28s linear infinite;
  will-change: transform;
}

.partner-marquee-container:hover .partner-marquee-track,
.partner-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes partnerMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}