/* Đảm bảo banner section full width  */
.static-news > section:first-child {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Đảm bảo khoảng cách đều giữa các news cards */
.static-news .grid[class*="gap-5"] {
  gap: 1.25rem !important; /* gap-5 = 1.25rem = 20px */
  row-gap: 1.25rem !important;
  column-gap: 1.25rem !important;
}

.static-news .grid[class*="gap-5"] > * {
  margin: 0 !important;
}

/* Đảm bảo khoảng cách giữa image và content trong news cards */
.static-news .grid a[class*="p-3"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.static-news .grid a[class*="p-3"] > div:first-child {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  flex-shrink: 0;
}

.static-news .grid a[class*="p-3"] > div:last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex: 1;
}

/* Đảm bảo các icon không bị zoom */
.static-news svg[class*="lucide"] {
  flex-shrink: 0 !important;
  transform: none !important;
  scale: 1 !important;
}

/* Icon w-5 h-5 (20px) - Calendar, Eye trong metadata */
.static-news svg[class*="lucide"].w-5 {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Icon w-4 h-4 (16px) - Buttons */
.static-news svg[class*="lucide"].w-4 {
  width: 1rem !important;
  height: 1rem !important;
}

/* Icon w-3 h-3 (12px) - Sidebar */
.static-news svg[class*="lucide"].w-3 {
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* Icon w-7 h-7 (28px) - User trong avatar */
.static-news svg[class*="lucide"].w-7 {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

/* Avatar icon - không có color, để inherit từ parent */
.static-news .lg\:col-span-8 .w-14.h-14 svg.w-7,
.static-news .lg\:col-span-8 .w-14.h-14 svg.lucide-user {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Override card-float hover transform */
.static-news .card-float:hover svg[class*="lucide"] {
  transform: none !important;
}

/* Đảm bảo màu chữ trong news items */
.static-news .grid a[class*="p-3"],
.static-news .grid a[class*="p-3"]:hover,
.static-news .grid a[class*="p-3"]:focus,
.static-news .grid a[class*="p-3"]:active {
  text-decoration: none !important; 
}

.static-news .grid a[class*="p-3"] h4 {
  color: #111827 !important; 
  font-size: 1rem !important; 
  font-weight: 500 !important; 
  line-height: 1.5 !important; 
  text-decoration: none !important; 
  transition: color 0.2s ease !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; 
}

/* Khi hover vào card, tiêu đề đổi sang màu xanh */
.static-news .grid a[class*="p-3"]:hover h4,
.static-news .grid a[class*="p-3"].group:hover h4 {
  color: var(--color-primary, #1c61e7) !important;
  text-decoration: none !important; 
}

.static-news .grid a[class*="p-3"] .text-gray-500,
.static-news .grid a[class*="p-3"] span.text-gray-500 {
  color: #6b7280 !important; 
  font-size: 0.75rem !important;
  font-weight: 400 !important; 
  line-height: 1.5 !important; 
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.static-news .grid a[class*="p-3"] svg.text-gray-500 {
  color: #6b7280 !important; 
}

/* Breadcrumb */
.static-news .breadcrumb-section {
  height: 57px !important;
  min-height: 57px !important;
  max-height: 57px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  display: block !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.static-news .breadcrumb-section .breadcrumb-container {
  height: 56px !important; 
  min-height: 56px !important;
  max-height: 56px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  max-width: 1360px !important;
}

/* Override py-4 trong breadcrumb */
.static-news .breadcrumb-section .breadcrumb-container.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-block: 16px !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 {
  line-height: 1.5rem !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  align-items: center !important;
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  font-size: 0.875rem !important; 
  color: #4b5563 !important; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 > * {
  line-height: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 1.5rem !important;
  flex-shrink: 0 !important;
  font-size: 0.875rem !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 a {
  color: #4b5563 !important; 
  text-decoration: none !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 a:hover {
  color: var(--color-primary, #1c61e7) !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 .text-primary {
  color: var(--color-primary, #1c61e7) !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 .text-gray-900 {
  color: #111827 !important;
}

.static-news .breadcrumb-section .breadcrumb-container .flex.items-center.space-x-2 svg {
  width: 1rem !important; 
  height: 1rem !important;
  flex-shrink: 0 !important;
  color: currentColor !important;
}

.static-news .breadcrumb-section + .container-1360 {
  margin-top: 0 !important;
  padding-top: 1.5rem !important; 
  padding-bottom: 1.5rem !important;
}


/* Sidebar - Image container dimensions (inline style chỉ ở container div, cần CSS cho img) */
.static-news .lg\:col-span-4 .w-30.h-24 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Sidebar - Line clamp cho title */
.static-news .lg\:col-span-4 .line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Main Content - Article section */
.static-news .card-float {
  background: white !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Main Content - Typography  */
.static-news .lg\:col-span-8 h1 {
  width: 792px !important; 
  height: 120px !important; 
  box-sizing: border-box !important;
}

/* Main Content - Image dimensions (792x384) */
.static-news .lg\:col-span-8 .relative img.h-96 {
  width: 100% !important;
  height: 24rem !important;
  max-height: 24rem !important;
  min-height: 24rem !important;
  object-fit: cover !important;
  aspect-ratio: 792/384 !important;
}

/* Main Content - Nút "Quay lại"  */
.static-news .lg\:col-span-8 .absolute.top-6.right-6.btn-outline {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 0.875rem !important; 
  font-weight: 400 !important;
  padding: 12px !important; 
  width: 107.91px !important; 
  height: 36px !important; 
  background: transparent !important;
  color: #1C61E7 !important; 
  border: 1px solid #1C61E7 !important; 
  border-radius: 0.5rem !important; 
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important; 
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; 
  box-sizing: border-box !important;
}

.static-news .lg\:col-span-8 .absolute.top-6.right-6.btn-outline:hover {
  background: rgba(28, 97, 231, 0.1) !important;
  border-color: #1C61E7 !important;
}

.static-news .lg\:col-span-8 .absolute.top-6.right-6.btn-outline:focus {
  outline: 2px solid rgba(28, 97, 231, 0.4) !important;
}

.static-news .lg\:col-span-8 .absolute.top-6.right-6.btn-outline svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #1C61E7 !important;
  flex-shrink: 0 !important;
  margin-right: 0.5rem !important;
}

/* Main Content - Buttons hover states */
.static-news .lg\:col-span-8 button.btn-outline.hover\:bg-red-50:hover {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}

.static-news .lg\:col-span-8 button.btn-outline.hover\:bg-blue-50:hover {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
}

/* Category Badges */
.static-news .badge-category,
.static-news .badge-black {
  border-radius: 0.375rem !important; 
  font-size: 0.75rem !important; 
  line-height: 1rem !important;
}

/* Newsletter Signup Section */
#newsletter-email {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#newsletter-email::placeholder {
  color: #9CA3AF;
  opacity: 1;
}

#newsletter-email:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}