/* 1. Import Font & Cấu trúc cơ bản */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap&subset=vietnamese");

:root {
  --bg-color: #020617;
  --text-color: #f1f5f9;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-hover-bg: rgba(255, 255, 255, 0.08);
  --glass-hover-border: rgba(255, 255, 255, 0.1);
  --text-gradient-start: #ffffff;
  --text-gradient-end: #94a3b8;
  --nav-bg: rgba(2, 6, 23, 0.8);
  --nav-border: rgba(255, 255, 255, 0.05);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-semi-muted: rgba(255, 255, 255, 0.7);
  --border-muted: rgba(255, 255, 255, 0.1);
  --blob-opacity: 0.2;
  --blob-mix-blend: screen;
}

html.light {
  --bg-color: #f8fafc;
  --text-color: #0f172a;
  --glass-bg: rgba(15, 23, 42, 0.03);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-hover-bg: rgba(15, 23, 42, 0.06);
  --glass-hover-border: rgba(15, 23, 42, 0.15);
  --text-gradient-start: #0f172a;
  --text-gradient-end: #475569;
  --nav-bg: rgba(248, 250, 252, 0.85);
  --nav-border: rgba(15, 23, 42, 0.08);
  --text-muted: rgba(15, 23, 42, 0.5);
  --text-semi-muted: rgba(15, 23, 42, 0.7);
  --border-muted: rgba(15, 23, 42, 0.1);
  --blob-opacity: 0.15;
  --blob-mix-blend: multiply;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-color) !important; /* Thay nền bằng màu đen sâu hơn (slate-950) */
  color: var(--text-color) !important;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Animations cho blob nền */
.animate-blob {
  animation: blob 10s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.animation-delay-2000 {
  animation-delay: 2s;
}
.animation-delay-4000 {
  animation-delay: 4s;
}
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* Utils cho text */
.text-gradient {
  background: linear-gradient(to right, var(--text-gradient-start), var(--text-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-top: 0.15em; /* Fix lỗi chữ Quốc ngữ bị cắt dấu khi dùng background-clip */
  padding-bottom: 0.05em;
  display: inline-block;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #d4af37 0%, #fcd34d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-top: 0.1em;
  display: inline-block;
}

/* Ép tên Nguyễn Đức Thắng đáp ứng trên điện thoại */
h1.text-gradient {
  font-size: clamp(1.5rem, 6vw, 2.25rem) !important; 
  letter-spacing: -0.025em !important;
  line-height: 1.3 !important;
}

/* 2. Hiệu ứng Glassmorphism & Card */
.glass-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible !important;
  position: relative;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-card:hover {
  background: var(--glass-hover-bg) !important;
  transform: translateY(-5px) scale(1.05);
  border-color: var(--glass-hover-border) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Nếu anh đang để hiệu ứng phóng to riêng cho icon (thẻ i hoặc svg) */
.glass-card:hover i,
.glass-card:hover svg,
.glass-card:hover span {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* 3. Nút CV rực rỡ (Navy Blue Gradient) */
.cv-button {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(29, 78, 216, 0.8) 100%) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.5) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cv-button::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.cv-button:hover::after {
  left: 150%;
}

.cv-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 4. Hiệu ứng Animation */
.animate-fade-in {
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 5. Nút Blog (AI & Kỹ thuật) */
.blog-button {
  /* Giữ phong cách Glassmorphism */
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.blog-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.blog-button:hover {
  background: var(--glass-hover-bg) !important;
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 15px 35px -10px rgba(59, 130, 246, 0.2) !important;
}
/* Fix triệt để ảnh trong bài viết */
.post-content img {
  display: block;
  margin: 2rem auto; /* Căn giữa và tạo khoảng cách trên dưới */

  width: 100%;
  max-width: 500px !important; /* Chiều ngang vừa phải */

  /* Ép tỷ lệ khung hình 4:3 hoặc 16:9 để ảnh không bao giờ quá cao */
  aspect-ratio: 4 / 3 !important;

  /* Ép chiều cao tối đa (phòng hờ) */
  max-height: 400px !important;

  /* Quan trọng: Cắt ảnh vừa khung, không làm méo mặt */
  object-fit: cover !important;
  object-position: center; /* Luôn lấy phần giữa ảnh */

  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.bg-blob-1 {
  background-color: rgba(37, 99, 235, var(--blob-opacity)) !important;
  mix-blend-mode: var(--blob-mix-blend) !important;
}
.bg-blob-2 {
  background-color: rgba(79, 70, 229, var(--blob-opacity)) !important;
  mix-blend-mode: var(--blob-mix-blend) !important;
}
.bg-blob-3 {
  background-color: rgba(147, 51, 234, var(--blob-opacity)) !important;
  mix-blend-mode: var(--blob-mix-blend) !important;
}

/* Light mode Tailwind class overrides */
html.light .text-slate-200 { color: #334155 !important; }
html.light .text-white\/80 { color: rgba(15, 23, 42, 0.8) !important; }
html.light .text-white { color: #0f172a !important; }
html.light .text-white\/40 { color: rgba(15, 23, 42, 0.5) !important; }
html.light .text-white\/50 { color: rgba(15, 23, 42, 0.6) !important; }
html.light .text-slate-600 { color: #475569 !important; }
html.light .bg-\[\#020617\]\/80 { background-color: rgba(248, 250, 252, 0.85) !important; }
html.light .border-white\/5 { border-color: rgba(15, 23, 42, 0.08) !important; }
html.light .border-white\/10 { border-color: rgba(15, 23, 42, 0.12) !important; }
html.light .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; }
html.light .bg-slate-950\/40 { background-color: rgba(241, 245, 249, 0.5) !important; }
html.light .text-blue-100 { color: #1e3a8a !important; }
html.light .bg-blue-600\/20 { background-color: rgba(37, 99, 235, 0.15) !important; }
html.light .text-indigo-100 { color: #312e81 !important; }
html.light .bg-indigo-600\/20 { background-color: rgba(79, 70, 229, 0.15) !important; }
html.light #chat-panel {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}
html.light #chat-input { color: #0f172a !important; }
html.light .prose-invert { color: #334155 !important; }
html.light .prose-invert h1, 
html.light .prose-invert h2, 
html.light .prose-invert h3, 
html.light .prose-invert h4, 
html.light .prose-invert strong { color: #0f172a !important; }

/* 6. Nút World Cup 2026 */
.wc-button {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(2, 132, 199, 0.85) 100%) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.5) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.wc-button::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.wc-button:hover::after {
  left: 150%;
}

.wc-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px -15px rgba(124, 58, 237, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 7. Nhảy Dây Styles */
.sport-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sport-card:hover {
  background: var(--glass-hover-bg) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  box-shadow: 0 15px 30px -10px rgba(249, 115, 22, 0.2) !important;
}