/* ==========================================================================

   Thành Nguyên Pro - Modern Industrial UI Theme

   Tông màu: Đỏ công nghiệp (#C8102E) & Vàng an toàn (#FFB800)

   ========================================================================== */



/* --------------------------------------------------------------------------

   1. MAIN HEADER & NAVIGATION (1 THANH DUY NHẤT - CĂN GIỮA CONTAINER 1240PX)

   -------------------------------------------------------------------------- */

.site-header {

  background: linear-gradient(135deg, #7c0a1a 0%, #a80c20 50%, #8b0818 100%);

  border-bottom: 3px solid var(--color-secondary);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);

  position: sticky;

  top: 0;

  z-index: 1000;

  width: 100%;

}



.header-container {

  width: 100%;

  max-width: var(--container-max-width, 1240px);

  margin: 0 auto;

  padding: 0 20px;

  box-sizing: border-box;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: center; /* Căn giữa toàn bộ các thành phần trong site-header */

  gap: 18px;

  padding: 10px 0;

  width: 100%;

}



/* Logo Biểu Tượng Tròn + Site Title + Site Description */

.site-branding {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  flex-shrink: 0;

}



.site-logo-icon {

  width: 48px;

  height: 48px;

  object-fit: contain;

  border-radius: 50%;

  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));

  flex-shrink: 0;

  display: block;

}



.site-branding-text {

  display: flex;

  flex-direction: column;

  align-items: center; /* Căn giữa Title và Description */

  justify-content: center;

  text-align: center;

  gap: 4px; /* Tăng khoảng cách đẩy description xuống */

}



.site-title {

  font-size: 1.4rem; /* Cao và to rõ rệt, cân đối với chiều cao menu */

  font-weight: 900;

  color: #ffb800; /* Vàng an toàn nổi bật */

  text-transform: uppercase;

  letter-spacing: 0.8px;

  line-height: 1.2;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

  display: block;

}



.site-description {

  font-size: 0.55rem;

  color: #ffffff; /* Màu trắng theo yêu cầu */

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.2px;

  line-height: 1.2;

  white-space: nowrap;

  text-align: center;

  display: block;

  width: 100%;

  margin-top: 2px; /* Đẩy thấp xuống một chút theo yêu cầu */

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}



/* Navigation Menu Căn giữa */

.primary-navigation {

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

}



.nav-menu {

  display: flex;

  list-style: none;

  align-items: center;

  gap: 4px; /* Dãn khoảng cách giữa các button menu */

  margin: 0;

  padding: 0;

  justify-content: center;

  flex-wrap: nowrap;

}



.nav-menu > li {

  position: relative;

  flex-shrink: 0;

}



.nav-menu > li > a {

  display: inline-flex;

  align-items: center;

  padding: 8px 11px; /* Đệm gọn gàng vừa vặn */

  font-size: 0.88rem;

  font-weight: 700;

  color: #ffffff;

  text-transform: uppercase;

  white-space: nowrap !important;

  letter-spacing: 0.2px;

  border-radius: var(--radius-sm);

  transition: var(--transition);

}



.nav-menu > li > a:hover {

  color: #ffeb3b;

  background-color: rgba(0, 0, 0, 0.25);

}



/* Active Button State (In đậm rõ rệt, màu vàng nổi bật, có viền chân màu vàng) */

.nav-menu > li.current-menu-item > a,

.nav-menu > li.current_page_item > a,

.nav-menu > li.current-category-ancestor > a,

.nav-menu > li.current-menu-ancestor > a {

  color: #ffeb3b !important;

  font-weight: 800 !important;

  background-color: rgba(0, 0, 0, 0.38) !important;

  box-shadow: inset 0 -3px 0 #ffeb3b !important;

}



/* Submenu dropdown */

.nav-menu .sub-menu {

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 240px;

  background: #ffffff;

  border-top: 3px solid var(--color-secondary);

  box-shadow: var(--shadow-xl);

  border-radius: 0 0 var(--radius-md) var(--radius-md);

  list-style: none;

  padding: 8px 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: var(--transition);

  z-index: 99;

  text-align: left;

}



.nav-menu li:hover > .sub-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.nav-menu .sub-menu li {

  width: 100%;

}



.nav-menu .sub-menu li a {

  display: block;

  padding: 10px 18px;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--color-dark);

  transition: var(--transition);

  border-bottom: 1px solid #f3f4f6;

  text-transform: none;

  white-space: nowrap;

}



.nav-menu .sub-menu li:last-child a {

  border-bottom: none;

}



.nav-menu .sub-menu li a:hover {

  background-color: #fef2f2;

  color: var(--color-primary);

  padding-left: 22px;

}



/* Header Hotline & Mobile Toggle */

.header-actions {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

}



.header-hotline-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(0, 0, 0, 0.3);

  padding: 7px 14px; /* Dãn đệm hotline vừa vặn */

  border-radius: var(--radius-md);

  border: 1px solid rgba(255, 184, 0, 0.45);

  text-decoration: none;

  transition: var(--transition);

  white-space: nowrap;

}



.header-hotline-badge:hover {

  background: rgba(0, 0, 0, 0.5);

  border-color: #ffb800;

  transform: translateY(-1px);

}



.hotline-icon {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: #ffb800;

  color: #111827;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.hotline-content {

  display: flex;

  flex-direction: column;

  white-space: nowrap;

}



.hotline-title {

  font-size: 0.64rem;

  color: #ffeb3b;

  font-weight: 700;

  text-transform: uppercase;

  line-height: 1.1;

}



.hotline-number {

  font-size: 0.98rem;

  color: #ffffff;

  font-weight: 900;

  letter-spacing: 0.4px;

  line-height: 1.1;

}



.mobile-menu-toggle {

  display: none;

  background: none;

  border: none;

  font-size: 1.8rem;

  cursor: pointer;

  color: #ffffff;

  padding: 4px;

}



/* --------------------------------------------------------------------------

   2. HERO BANNER & VIDEO CAROUSEL SECTION

   -------------------------------------------------------------------------- */

.video-carousel-section {

  background: linear-gradient(180deg, #7c0a1a 0%, #990a20 40%, #85091c 100%);

  color: #ffffff;

  padding: 24px 0 24px;

  border-bottom: 3px solid var(--color-secondary);

  position: relative;

  width: 100%;

}



.video-slider-container {

  width: 100%;

  max-width: var(--container-max-width, 1240px);

  margin: 0 auto;

  padding: 0 16px;

  box-sizing: border-box;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

}



/* Hero Intro Banner (H1 + Mô tả + KCN) */

.hero-intro-banner {

  text-align: center;

  width: 100%;

  margin-bottom: 16px;

  padding: 0 10px;

}



.hero-banner-h1 {

  font-size: 1.7rem;

  font-weight: 900;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  line-height: 1.3;

  margin: 0 0 10px;

  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

}



.hero-banner-h1 .highlight-gold {

  color: #ffb800;

  text-shadow: 0 0 18px rgba(255, 184, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.6);

}



.hero-banner-desc {

  font-size: 0.94rem;

  line-height: 1.6;

  color: #f1f5f9;

  max-width: 980px;

  margin: 0 auto 14px;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

}



.hero-kcn-badge-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



.hero-kcn-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(0, 0, 0, 0.38);

  border: 1px solid rgba(255, 255, 255, 0.22);

  color: #ffffff;

  font-size: 0.78rem;

  font-weight: 700;

  padding: 5px 12px;

  border-radius: 9999px;

  white-space: nowrap;

  backdrop-filter: blur(4px);

  transition: var(--transition);

}



.hero-kcn-badge:hover {

  background: rgba(0, 0, 0, 0.55);

  border-color: #ffb800;

  color: #ffb800;

  transform: translateY(-1px);

}



.kcn-icon {

  flex-shrink: 0;

}



/* Video Outer Track Container */

.video-carousel-outer {

  width: 100%;

  position: relative;

  display: flex;

  align-items: center;

  padding: 0 42px;

  box-sizing: border-box;

}



/* Hero CTA Buttons: Gọi & Chat Zalo dưới ô video */

.hero-cta-button-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  margin-top: 20px;

  width: 100%;

  flex-wrap: wrap;

}



.btn-hero-call {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  background: #f59e0b;

  color: #111827;

  font-size: 1.02rem;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.4px;

  padding: 12px 24px;

  border-radius: 10px;

  text-decoration: none;

  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);

  transition: var(--transition);

  border: 2px solid #f59e0b;

}



.btn-hero-call:hover {

  background: #d97706;

  border-color: #d97706;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.6);

}



.btn-hero-zalo {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  background: rgba(0, 0, 0, 0.28);

  color: #ffffff;

  font-size: 1.02rem;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.4px;

  padding: 12px 24px;

  border-radius: 10px;

  text-decoration: none;

  border: 2px solid rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(4px);

  transition: var(--transition);

}



.btn-hero-zalo:hover {

  background: rgba(255, 255, 255, 0.15);

  border-color: #ffb800;

  color: #ffb800;

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

}



.video-nav-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.6);

  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.4);

  width: 34px;

  height: 34px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.05rem;

  cursor: pointer;

  transition: var(--transition);

  z-index: 10;

  backdrop-filter: blur(4px);

}



.video-nav-arrow:hover {

  background: var(--color-secondary);

  color: var(--color-dark);

  border-color: var(--color-secondary);

  transform: translateY(-50%) scale(1.1);

}



.video-nav-arrow.arrow-left {

  left: 4px;

}



.video-nav-arrow.arrow-right {

  right: 4px;

}



.video-carousel-wrapper {

  container-type: inline-size;

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding: 4px 0 8px;

  width: 100%;

  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;

}



.video-carousel-wrapper::-webkit-scrollbar {

  display: none;

}



.video-carousel-track {

  display: flex;

  gap: 12px; /* Thu gọn khoảng cách giữa các ô video carousel */

  width: max-content;

  box-sizing: border-box;

}



/* DESKTOP (Hiển thị CHUẨN XÁC 4 Ô - CĂN THEO CONTAINER 1240PX) */

.video-slide-item {

  flex: 0 0 calc((100cqw - 42px) / 4);

  width: calc((100cqw - 42px) / 4);

  flex-shrink: 0;

  box-sizing: border-box;

  min-width: 0;

  scroll-snap-align: start;

  scroll-snap-stop: always;

}



.video-slide-card {

  background: #ffffff;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  border: 2px solid transparent;

  transition: var(--transition);

  width: 100%;

  box-sizing: border-box;

}



.video-slide-card:hover {

  border-color: var(--color-secondary);

  transform: translateY(-3px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

}



.video-slide-title {

  padding: 8px 10px 7px;

  font-size: 0.88rem;

  font-weight: 800;

  color: var(--color-dark);

  text-align: center;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin: 0;

  background: #f8fafc;

  border-bottom: 2px solid var(--color-primary);

}



.video-slide-iframe {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  background: #000000;

}



.video-slide-iframe iframe {

  width: 100% !important;

  height: 100% !important;

  border: none;

  display: block;

}



/* --------------------------------------------------------------------------

   3. ARTICLE & CONTENT LAYOUT

   -------------------------------------------------------------------------- */

.page-wrapper {

  padding: 30px 0 60px;

}



.main-content-layout {

  display: grid;

  grid-template-columns: 1fr 340px;

  gap: 36px;

  align-items: start; /* Cho phép sidebar sticky không bị stretch theo article */

  width: 100%;

  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

}



.main-content-layout.full-width {

  grid-template-columns: 1fr;

}



.content-area {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  overflow-x: clip; /* Khóa cứng chiều ngang, không để bất kỳ ảnh/bảng/caption nào tràn sang sidebar */

  box-sizing: border-box;

}



article,

.entry-content {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  overflow-wrap: break-word;

  word-wrap: break-word;

  box-sizing: border-box;

}



/* BẢO VỆ EMOJI WORDPRESS: KHÔNG BAO GIỜ BỊ PHÓNG TO HOẶC DISPLAY: BLOCK */

img.wp-smiley,

img.emoji {

  display: inline !important;

  border: none !important;

  box-shadow: none !important;

  height: 1.1em !important;

  width: 1.1em !important;

  max-height: 1.1em !important;

  max-width: 1.1em !important;

  margin: 0 0.15em !important;

  vertical-align: -0.15em !important;

  background: none !important;

  padding: 0 !important;

}



/* ĐẢM BẢO CONTENT-AREA VÀ ARTICLE KHÔNG BỊ TRÀN CHIỀU NGANG */

.content-area {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

}



article.entry-content,

.entry-content,

.post-body {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  overflow-wrap: break-word;

  word-wrap: break-word;

  box-sizing: border-box;

}



/* FIX KHỐI CAPTION, FIGURE CỦA WORDPRESS KHI CÓ THUỘC TÍNH WIDTH CỐ ĐỊNH */

.entry-content .wp-caption,

.entry-content figure,

.entry-content .wp-block-image,

.entry-content div[id^="attachment_"],

.entry-content div[class*="wp-caption"] {

  max-width: 100% !important;

  width: auto !important;

  margin-left: auto !important;

  margin-right: auto !important;

  box-sizing: border-box !important;

  clear: both !important;

  text-align: center !important;

}



/* HÌNH ẢNH TRONG NỘI DUNG BÀI VIẾT: GỌN GÀNG, TỰ CO GIÃN THEO KHUNG */

.post-body img:not(.emoji):not(.wp-smiley),

.entry-content > img:not(.emoji):not(.wp-smiley),

.entry-content p > img:not(.emoji):not(.wp-smiley),

.entry-content figure img:not(.emoji):not(.wp-smiley),

.entry-content .wp-caption img:not(.emoji):not(.wp-smiley),

.entry-content a > img:not(.emoji):not(.wp-smiley) {

  max-width: 100% !important;

  height: auto !important;

  display: block;

  margin: 1.2rem auto;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  box-sizing: border-box;

}



.entry-content .wp-caption-text,

.entry-content figcaption {

  font-size: 0.88rem !important;

  font-style: italic !important;

  color: #64748b !important;

  margin-top: 8px !important;

  text-align: center !important;

  max-width: 100% !important;

  line-height: 1.4 !important;

  white-space: normal !important;

  word-break: break-word !important;

}



/* FIX CÁC Ô VIDEO VÀ BẢNG TRONG ARTICLE */

.table-responsive-wrapper {

  width: 100%;

  max-width: 100%;

  overflow-x: auto;

  margin: 0.8rem 0;

  box-sizing: border-box;

}



/* Thu hẹp tối đa khoảng cách đối với các bảng video liền kề */

.table-responsive-wrapper:has(table:has(iframe)),

.table-responsive-wrapper:has(table:has(h4)),

.table-responsive-wrapper:has(table[border="1"]) {

  margin: 4px 0 !important;

}



.table-responsive-wrapper + .table-responsive-wrapper {

  margin-top: 2px !important;

}



.entry-content table {

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box;

  margin: 0.8rem 0;

  border-collapse: separate !important;

}



/* Định dạng chuẩn cho bảng video: 2 ô gần nhau, gọn gàng */

.entry-content table[border="1"],

.entry-content table:has(iframe),

.entry-content table:has(h4) {

  display: table !important;

  width: 100% !important;

  max-width: 100% !important;

  table-layout: fixed !important;

  border: none !important;

  border-spacing: 8px !important; /* Thu hẹp khoảng cách giữa 2 ô video từ 14px xuống 8px */

  margin: 4px 0 !important;

  background: transparent !important;

  box-sizing: border-box !important;

}



.entry-content table[border="1"] td,

.entry-content table:has(iframe) td,

.entry-content table:has(h4) td {

  width: 50% !important;

  max-width: 50% !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: var(--radius-md) !important;

  padding: 8px !important;

  box-shadow: var(--shadow-sm) !important;

  vertical-align: top !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

  transition: var(--transition);

}



.entry-content table[border="1"] td:hover,

.entry-content table:has(iframe) td:hover,

.entry-content table:has(h4) td:hover {

  border-color: var(--color-secondary) !important;

  box-shadow: var(--shadow-md) !important;

}



.entry-content table td h4,

.entry-content table td h4 strong {

  color: var(--color-primary) !important;

  font-size: 0.95rem !important;

  font-weight: 700 !important;

  text-align: center !important;

  margin: 0 0 6px 0 !important;

  display: block !important;

  line-height: 1.3 !important;

}



.entry-content iframe,

.entry-content table td iframe {

  width: 100% !important;

  max-width: 100% !important;

  aspect-ratio: 16 / 9 !important;

  height: auto !important;

  min-height: 200px;

  border-radius: 6px !important;

  border: none !important;

  display: block !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

}



.content-video-iframe-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 4px;

  background: #000000;

}



.content-video-iframe-wrap iframe,

.video-slide-iframe iframe {

  position: absolute !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  height: 100% !important;

  transform: none !important;

  border: none !important;

  display: block !important;

}





/* ==========================================================================

   BẢNG GIÁ 2 CỘT & TIÊU ĐỀ MERGED (CHUẨN HÌNH MẪU ẢNH 2)

   ========================================================================== */

.data-table th.table-header-merged,

.data-table td.table-header-merged,

.data-table th[colspan="2"],

.data-table td[colspan="2"],

.entry-content table th.table-header-merged,

.entry-content table td.table-header-merged {

  background: #8B0000 !important;

  color: #ffffff !important;

  font-size: 1.05rem !important;

  font-weight: 700 !important;

  text-align: center !important;

  vertical-align: middle !important;

  padding: 14px 10px !important;

  text-transform: none !important; /* Giữ nguyên dạng chữ như ảnh 2 */

  border: none !important;

  width: 100% !important;

}



.data-table tr:first-child td.table-header-merged, .data-table tr:first-child td.table-header-merged strong, .data-table th.table-header-merged strong,

.data-table td.table-header-merged strong,

.data-table th[colspan="2"] strong,

.data-table td[colspan="2"] strong,

.entry-content table th.table-header-merged strong,

.entry-content table td.table-header-merged strong {

  color: #ffffff !important;

  font-weight: 700 !important;

}





/* ==========================================================================

   TOÀN BỘ CHỮ Ở CÁC HÀNG DỮ LIỆU CỦA BẢNG TRONG MỌI BÀI VIẾT LUÔN MÀU ĐEN SẮC NÉT

   ========================================================================== */

.entry-content table tr:not(:first-child) td,

.entry-content table tr:not(:first-child) th,

.entry-content table tr:not(:first-child) td *,

.entry-content table tr:not(:first-child) th *,

.data-table tr:not(:first-child) td,

.data-table tr:not(:first-child) th,

.data-table tr:not(:first-child) td *,

.data-table tr:not(:first-child) th *,

.data-table tr:not(:first-child) td[colspan],

.data-table tr:not(:first-child) td[colspan] *,

.entry-content table tr:not(:first-child) td[colspan],

.entry-content table tr:not(:first-child) td[colspan] * {

  color: #111827 !important; /* Màu đen rõ nét, tuyệt đối không bị màu trắng */

}



/* Đảm bảo nền hàng dữ liệu là màu trắng/sáng rõ ràng */

.data-table tr:not(:first-child) td,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:not(:first-child) td {

  background: #ffffff !important;

  color: #111827 !important;

}



.data-table tr:nth-child(even):not(:first-child) td,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:nth-child(even):not(:first-child) td {

  background: #f8fafc !important;

  color: #111827 !important;

}



/* Bảng dữ liệu 2 cột chuẩn đẹp */

.data-table.table-cols-2 {

  width: 100% !important;

  border-collapse: collapse !important;

  border: 1px solid #e2e8f0 !important;

  background: #ffffff !important;

}



.data-table.table-cols-2 td {

  border: 1px solid #e2e8f0 !important;

  padding: 11px 12px !important;

  font-size: 0.95rem !important;

  color: #1e293b !important;

  text-align: center !important;

  vertical-align: middle !important;

  background: #ffffff !important;

}



.data-table.table-cols-2 td:nth-child(1) {

  width: 44% !important;

  font-weight: 500 !important;

}



.data-table.table-cols-2 td:nth-child(2) {

  width: 56% !important;

  font-weight: 500 !important;

}



.data-table.table-cols-2 tr:not(:first-child):hover td {

  background: #f8fafc !important;

}



@media (max-width: 768px) {

  .data-table th.table-header-merged,

  .data-table td.table-header-merged,

  .data-table th[colspan="2"],

  .data-table td[colspan="2"] {

    font-size: 0.92rem !important;

    padding: 11px 8px !important;

  }

  .data-table.table-cols-2 td {

    padding: 9px 6px !important;

    font-size: 0.85rem !important;

  }

}



/* ==========================================================================

   TỐI ƯU CÁC BẢNG DỮ LIỆU / BẢNG GIÁ TRÊN TOÀN BỘ BÀI VIẾT VÀ TRANG

   ========================================================================== */

.table-responsive-wrapper:not(:has(table:has(iframe))):not(:has(table:has(h4))) {

  margin: 1.5rem 0;

  border-radius: 8px;

  border: 1px solid #e2e8f0;

  box-shadow: var(--shadow-sm);

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  background: #ffffff;

}



.entry-content table.data-table,

.entry-content table:not(:has(iframe)):not(:has(h4)) {

  width: 100% !important;

  max-width: 100% !important;

  border-collapse: collapse !important;

  margin: 0 !important;

  border: none !important;

  background: #ffffff;

}



.data-table thead th,

.data-table thead td,

.data-table:not(:has(thead)) > tbody > tr:first-child td,

.data-table:not(:has(thead)) > tbody > tr:first-child th,

.entry-content table:not(:has(iframe)):not(:has(h4)) thead th,

.entry-content table:not(:has(iframe)):not(:has(h4)) thead td,

.entry-content table:not(:has(iframe)):not(:has(h4)):not(:has(thead)) > tbody > tr:first-child td,

.entry-content table:not(:has(iframe)):not(:has(h4)):not(:has(thead)) > tbody > tr:first-child th {

  background: #8B0000 !important;

  color: #ffffff !important;

  font-weight: 700 !important;

  font-size: 0.88rem !important;

  text-transform: uppercase !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  padding: 10px 8px !important;

  text-align: center !important;

}



.data-table tr:first-child td strong,

.data-table tr:first-child th strong,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:first-child td strong {

  color: #ffffff !important;

}



.data-table tr:first-child td.table-header-merged,

.data-table tr:first-child th.table-header-merged,

.data-table .table-header-merged,

.data-table tr:first-child td[colspan],

.data-table tr:first-child th[colspan] {

  text-transform: none !important;

  background: #8B0000 !important;

  color: #ffffff !important;

  text-align: center !important;

  font-size: 1.02rem !important;

  line-height: 1.45 !important;

  padding: 12px 10px !important;

}



/* NGUYÊN TẮC: Tuyệt đối KHÔNG gán background và padding cho thẻ inline bên trong ô bảng */

.entry-content table strong,

.entry-content table th strong,

.entry-content table td strong,

.entry-content table span,

.entry-content table th span,

.entry-content table td span,

.data-table strong,

.data-table span,

.data-table tr:first-child td strong,

.data-table tr:first-child th strong,

.data-table tr:first-child td[colspan] strong,

.data-table tr:first-child th[colspan] strong,

.data-table .table-header-merged strong {

  background: transparent !important;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  font-size: inherit !important;

  line-height: inherit !important;

  display: inline !important;

}





.data-table tr:not(:first-child) td,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:not(:first-child) td {

  padding: 10px 8px;

  font-size: 0.9rem;

  line-height: 1.45;

  border: 1px solid #e2e8f0;

  vertical-align: middle;

}



.data-table tr:nth-child(even):not(:first-child) td,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:nth-child(even):not(:first-child) td {

  background: #f8fafc;

}



.data-table tr:nth-child(odd):not(:first-child) td,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:nth-child(odd):not(:first-child) td {

  background: #ffffff;

}



.data-table tr:not(:first-child):hover td,

.entry-content table:not(:has(iframe)):not(:has(h4)) tr:not(:first-child):hover td {

  background: #eff6ff;

}



/* Typography & Headings */

.entry-content {

  font-size: 1.05rem;

  line-height: 1.8;

  color: #27272a;

}



.entry-content p {

  margin-bottom: 1.25rem;

}



.entry-content h1,

.section-heading-h1 {

  font-size: 1.85rem;

  font-weight: 900;

  color: var(--color-primary);

  line-height: 1.3;

  margin: 1.2rem 0 0.5rem; /* Thu nhỏ khoảng cách phía dưới tiêu đề H2 */

  text-transform: uppercase;

  position: relative;

  padding-bottom: 10px;

  border-bottom: 3px solid var(--color-primary);

}



.entry-content h1::after,

.section-heading-h1::after {

  content: "";

  position: absolute;

  bottom: -3px;

  left: 0;

  width: 80px;

  height: 3px;

  background-color: var(--color-secondary);

}



.entry-content h2 {

  font-size: 1.55rem;

  font-weight: 800;

  color: var(--color-dark);

  line-height: 1.4;

  margin: 2.2rem 0 1.2rem;

  padding-left: 14px;

  border-left: 5px solid var(--color-primary);

  position: relative;

}



.entry-content h2::before {

  content: "";

  position: absolute;

  left: -5px;

  top: 0;

  width: 5px;

  height: 35%;

  background-color: var(--color-secondary);

}



.entry-content h3 {

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--color-primary-dark);

  margin: 1.8rem 0 1rem;

  display: flex;

  align-items: center;

  gap: 8px;

}



.entry-content h3::before {

  content: "■";

  color: var(--color-secondary);

  font-size: 0.9rem;

}



.entry-content h4 {

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--color-dark);

  margin: 1.2rem 0 0.8rem;

}



/* Modern Internal Link / Tag Cloud Container */

.seo-keyword-hub {

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: var(--radius-lg);

  padding: 24px;

  margin: 2.5rem 0;

  box-shadow: var(--shadow-sm);

}



.seo-keyword-hub-header {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--color-dark);

  margin-bottom: 14px;

  display: flex;

  align-items: center;

  gap: 8px;

  border-bottom: 2px solid var(--color-secondary);

  padding-bottom: 8px;

}



.seo-pills-list {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.seo-pill-tag {

  display: inline-block;

  background: #f1f5f9;

  color: #334155;

  font-size: 0.85rem;

  font-weight: 600;

  padding: 5px 12px;

  border-radius: 20px;

  border: 1px solid #cbd5e1;

  transition: var(--transition);

}



.seo-pill-tag:hover {

  background: var(--color-primary);

  color: #ffffff;

  border-color: var(--color-primary);

  transform: translateY(-2px);

}



/* --------------------------------------------------------------------------

   4. SIDEBAR WIDGETS (STICKY TỰ ĐỘNG HIỆN NỘI DUNG CUỐI CÙNG KHI CUỘN XUỐNG)

   -------------------------------------------------------------------------- */

.sidebar-area {

  display: flex;

  flex-direction: column;

  gap: 26px;

  min-width: 0;

  position: -webkit-sticky;

  position: sticky;

  top: min(75px, calc(100vh - 100% - 20px));

  align-self: start;

  height: fit-content;

}



.sidebar-widget {

  background: #ffffff;

  border-radius: var(--radius-md);

  padding: 22px;

  box-shadow: var(--shadow-sm);

  border: 1px solid #e5e7eb;

}



.widget-title {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--color-dark);

  text-transform: uppercase;

  padding-bottom: 10px;

  margin-bottom: 16px;

  border-bottom: 3px solid var(--color-primary);

  position: relative;

}



.widget-title::after {

  content: "";

  position: absolute;

  bottom: -3px;

  left: 0;

  width: 40px;

  height: 3px;

  background: var(--color-secondary);

}



.widget-contact-card {

  background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);

  border: 2px solid #fecaca;

  border-radius: var(--radius-md);

  padding: 20px;

  text-align: center;

}



.widget-contact-hotline {

  font-size: 1.45rem;

  font-weight: 900;

  color: var(--color-primary);

  display: block;

  margin: 10px 0;

}



.btn-cta-quote {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: linear-gradient(135deg, #ffb800 0%, #f59e0b 100%);

  color: #111827;

  font-size: 0.92rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  padding: 11px 18px;

  border-radius: var(--radius-md);

  border: none;

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);

  transition: var(--transition);

}



.btn-cta-quote:hover {

  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);

}



.widget-services-list {

  list-style: none;

}



.widget-services-list li {

  border-bottom: 1px solid #f1f5f9;

}



.widget-services-list li:last-child {

  border-bottom: none;

}



.widget-services-list li a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 4px;

  color: var(--color-dark);

  font-weight: 600;

  font-size: 0.93rem;

  transition: var(--transition);

}



.widget-services-list li a:hover {

  color: var(--color-primary);

  padding-left: 8px;

}



/* --------------------------------------------------------------------------

   5. SINGLE POST & CATEGORY ARCHIVE STYLES

   -------------------------------------------------------------------------- */

.breadcrumb-trail {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  font-size: 0.86rem;

  color: var(--color-gray-medium);

  margin-bottom: 24px;

  padding: 10px 16px;

  background: #ffffff;

  border-radius: var(--radius-md);

  border: 1px solid #e5e7eb;

}



.breadcrumb-trail a {

  color: var(--color-gray-dark);

  font-weight: 600;

}



.breadcrumb-trail a:hover {

  color: var(--color-primary);

}



.breadcrumb-separator {

  color: #9ca3af;

}



.post-header {

  margin-bottom: 24px;

}



.post-meta-bar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 16px;

  font-size: 0.85rem;

  color: var(--color-gray-medium);

  margin-top: 10px;

}



.post-meta-item {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



/* CTA BANNER CUỐI BÀI VIẾT (SINGLE POST) */

.content-cta-banner {

  background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);

  border: 2px solid #fed7aa;

  border-radius: var(--radius-lg);

  padding: 22px 26px;

  margin: 35px 0 25px;

  box-shadow: var(--shadow-sm);

  box-sizing: border-box;

}



.cta-banner-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}



.cta-banner-text {

  flex: 1;

  min-width: 260px;

}



.cta-banner-text h3 {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--color-primary);

  margin: 0 0 6px;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  line-height: 1.4;

}



.cta-banner-text p {

  font-size: 0.92rem;

  color: #4b5563;

  margin: 0;

  line-height: 1.5;

}



.cta-banner-buttons {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.btn-cta-call {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: var(--color-primary);

  color: #ffffff !important;

  font-size: 0.95rem;

  font-weight: 800;

  padding: 11px 20px;

  border-radius: var(--radius-md);

  text-decoration: none;

  transition: var(--transition);

  white-space: nowrap;

  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);

}



.btn-cta-call:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(200, 16, 46, 0.45);

  color: #ffffff !important;

}



.btn-cta-call svg,

.btn-cta-quote svg {

  flex-shrink: 0;

}



.category-header-banner {

  background: linear-gradient(135deg, var(--color-primary) 0%, #7f1d1d 100%);

  color: #ffffff;

  padding: 32px 0;

  margin-bottom: 30px;

  border-radius: var(--radius-lg);

  position: relative;

  overflow: hidden;

}



.category-header-banner::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  width: 30%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 184, 0, 0.15));

  pointer-events: none;

}



.category-title {

  font-size: 2rem;

  font-weight: 900;

  text-transform: uppercase;

  margin-bottom: 8px;

}



.category-description {

  font-size: 0.96rem;

  color: #f8fafc;

  max-width: 950px;

  line-height: 1.65;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

}



.category-description p {

  margin: 0;

  line-height: 1.65;

}



/* HIỂN THỊ BÀI VIẾT 2 CỘT 1 HÀNG TRÊN CẢ PC VÀ MOBILE */

.posts-grid {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 24px;

}



.post-card {

  background: #ffffff;

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  border: 1px solid #e5e7eb;

  transition: var(--transition);

  display: flex;

  flex-direction: column;

}



.post-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

  border-color: var(--color-secondary);

}



.post-card-thumb {

  position: relative;

  padding-bottom: 60%;

  overflow: hidden;

  background: #f1f5f9;

}



.post-card-thumb img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.post-card:hover .post-card-thumb img {

  transform: scale(1.06);

}



.post-card-badge {

  position: absolute;

  top: 10px;

  left: 10px;

  background: var(--color-primary);

  color: #fff;

  font-size: 0.72rem;

  font-weight: 700;

  padding: 3px 8px;

  border-radius: 4px;

  text-transform: uppercase;

}



.post-card-body {

  padding: 18px;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.post-card-title {

  font-size: 1.08rem;

  font-weight: 700;

  line-height: 1.4;

  margin-bottom: 10px;

  color: var(--color-dark);

}



.post-card-title a {

  color: var(--color-dark);

}



.post-card-title a:hover {

  color: var(--color-primary);

}



/* MÔ TẢ NGẮN RÚT GỌN ĐÚNG 2 DÒNG */

.post-card-excerpt {

  font-size: 0.88rem;

  color: var(--color-gray-medium);

  line-height: 1.5;

  margin-bottom: 12px;

  flex: 1;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-height: calc(1.5em * 2) !important;

}



.post-card-excerpt p {

  margin: 0 !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}



.post-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid #f1f5f9;

  padding-top: 10px;

  font-size: 0.8rem;

  color: #9ca3af;

}



.post-card-date {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: #94a3b8;

  font-size: 0.82rem;

  font-weight: 500;

  line-height: 1;

}



.post-card-date svg {

  color: #ef4444;

  flex-shrink: 0;

}



.post-card-btn {

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--color-primary);

  text-transform: uppercase;

  display: inline-flex;

  align-items: center;

  gap: 4px;

}



.pagination-area {

  display: flex;

  justify-content: center;

  margin-top: 40px;

}



.pagination-area .page-numbers {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  height: 40px;

  padding: 0 10px;

  margin: 0 4px;

  border-radius: var(--radius-sm);

  background: #ffffff;

  color: var(--color-dark);

  font-weight: 700;

  border: 1px solid #e5e7eb;

  transition: var(--transition);

}



.pagination-area .page-numbers.current,

.pagination-area .page-numbers:hover {

  background: var(--color-primary);

  color: #ffffff;

  border-color: var(--color-primary);

}



/* --------------------------------------------------------------------------

   6. FOOTER STYLING

   -------------------------------------------------------------------------- */

.site-footer {

  background: #0f172a;

  color: #94a3b8;

  margin-top: auto;

  border-top: 4px solid var(--color-primary);

  font-size: 0.92rem;

}



.footer-top {

  padding: 50px 0 35px;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;

  gap: 36px;

}



.footer-widget h4 {

  color: #ffffff;

  font-size: 1.1rem;

  font-weight: 800;

  text-transform: uppercase;

  margin-bottom: 18px;

  position: relative;

  padding-bottom: 8px;

}



.footer-widget h4::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 35px;

  height: 3px;

  background: var(--color-secondary);

}



.footer-company-desc {

  margin-bottom: 16px;

  line-height: 1.6;

}



.footer-contact-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.footer-contact-item {

  display: flex;

  gap: 10px;

  align-items: flex-start;

}



.footer-contact-item svg {

  width: 18px;

  height: 18px;

  fill: var(--color-secondary);

  flex-shrink: 0;

  margin-top: 2px;

}



.footer-links-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.footer-links-list li a {

  color: #cbd5e1;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.footer-links-list li a:hover {

  color: var(--color-secondary);

  padding-left: 6px;

}



.footer-kcn-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.footer-kcn-tag {

  background: rgba(255, 255, 255, 0.06);

  color: #cbd5e1;

  font-size: 0.8rem;

  padding: 4px 10px;

  border-radius: 4px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: var(--transition);

}



.footer-kcn-tag:hover {

  background: var(--color-secondary);

  color: var(--color-dark);

}



.footer-bottom {

  background: #020617;

  padding: 16px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  font-size: 0.84rem;

}



.footer-bottom-inner {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

}



/* --------------------------------------------------------------------------

   7. FLOATING CIRCULAR ACTION BUTTONS (2 NÚT TRÒN GỌI XE & CHAT ZALO 2 BÊN MÀN HÌNH)

   -------------------------------------------------------------------------- */

.floating-contact-buttons {

  position: fixed;

  bottom: 22px;

  left: 0;

  right: 0;

  pointer-events: none;

  z-index: 9998;

}



.circle-floating-btn {

  pointer-events: auto;

  position: fixed;

  bottom: 22px;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  z-index: 9998;

}



.circle-btn-call {

  left: 18px;

  background: linear-gradient(135deg, #e50914 0%, #b8000b 100%);

  color: #ffffff !important;

  animation: pulse-circle-call 2s infinite;

}



.circle-btn-zalo {

  right: 18px;

  background: #0068ff;

  color: #ffffff !important;

  animation: pulse-circle-zalo 2s infinite;

}



.circle-floating-btn:hover {

  transform: scale(1.12);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

}



.circle-btn-icon {

  display: block;

}



@keyframes pulse-circle-call {

  0% {

    box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.7);

  }

  70% {

    box-shadow: 0 0 0 14px rgba(229, 9, 20, 0);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);

  }

}



@keyframes pulse-circle-zalo {

  0% {

    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.7);

  }

  70% {

    box-shadow: 0 0 0 14px rgba(0, 104, 255, 0);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);

  }

}



@media (max-width: 480px) {

  .circle-floating-btn {

    width: 48px;

    height: 48px;

    bottom: 18px;

  }

  .circle-btn-call {

    left: 14px;

  }

  .circle-btn-zalo {

    right: 14px;

  }

}



/* --------------------------------------------------------------------------

   8. QUICK QUOTE MODAL

   -------------------------------------------------------------------------- */

.modal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(4px);

  z-index: 10000;

  align-items: center;

  justify-content: center;

  padding: 20px;

}



.modal-overlay.active {

  display: flex;

}



.modal-card {

  background: #ffffff;

  border-radius: var(--radius-lg);

  max-width: 500px;

  width: 100%;

  box-shadow: var(--shadow-xl);

  overflow: hidden;

  border-top: 5px solid var(--color-primary);

  animation: modal-appear 0.3s ease;

}



@keyframes modal-appear {

  from { opacity: 0; transform: translateY(20px); }

  to { opacity: 1; transform: translateY(0); }

}



.modal-header {

  padding: 18px 24px;

  background: #f8fafc;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #e2e8f0;

}



.modal-header h3 {

  font-size: 1.2rem;

  font-weight: 800;

  color: var(--color-dark);

  margin: 0;

}



.modal-close-btn {

  background: none;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;

  color: #64748b;

}



.modal-body {

  padding: 24px;

}



.form-group {

  margin-bottom: 16px;

}



.form-group label {

  display: block;

  font-size: 0.88rem;

  font-weight: 700;

  margin-bottom: 6px;

  color: var(--color-dark);

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 10px 14px;

  border: 1px solid #cbd5e1;

  border-radius: var(--radius-sm);

  font-family: inherit;

  font-size: 0.92rem;

  transition: var(--transition);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--color-primary);

  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);

}



.btn-submit-quote {

  width: 100%;

  padding: 12px;

  background: var(--color-primary);

  color: #ffffff;

  font-size: 1rem;

  font-weight: 800;

  text-transform: uppercase;

  border: none;

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: var(--transition);

}



.btn-submit-quote:hover {

  background: var(--color-primary-dark);

}



/* --------------------------------------------------------------------------

   9. RESPONSIVE BREAKPOINTS

   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  .header-container-fluid {

    padding: 0 20px;

  }

  .video-slider-container-fluid {

    padding: 0 35px;

  }

  .main-content-layout {

    grid-template-columns: 1fr;

  }

  .sidebar-area {

    position: static;

    max-height: none;

    overflow-y: visible;

  }

  .posts-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .footer-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 991px) {

  .header-container {

    padding: 0 16px;

  }

  .header-container {

    padding: 0 12px;

    max-width: 100%;

    box-sizing: border-box;

  }

  .header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    gap: 8px;

    box-sizing: border-box;

  }

  .site-branding {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    flex: 1 1 auto;

    overflow: hidden;

  }

  .site-logo-icon {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

  }

  .site-branding-text {

    display: flex;

    flex-direction: column;

    align-items: center !important;

    text-align: center !important;

    justify-content: center !important;

    min-width: 0;

    overflow: hidden;

    flex: 1 1 auto;

  }

  .site-title {

    font-size: 1.15rem;

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

    text-align: center !important;

    width: 100% !important;

  }

  .site-description {

    font-size: 0.44rem;

    line-height: 1.2;

    letter-spacing: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

    text-align: center !important;

    width: 100% !important;

    margin-top: 2px;

  }

  .header-actions {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    margin-left: auto;

  }

  .header-hotline-badge {

    display: none !important;

  }

  .mobile-menu-toggle {

    display: flex !important;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: var(--radius-sm);

    color: #ffffff;

    cursor: pointer;

    padding: 0;

    flex-shrink: 0;

    transition: var(--transition);

  }

  .mobile-menu-toggle:hover {

    background: rgba(255, 255, 255, 0.28);

  }

  .site-logo-img {

    max-height: 32px;

  }

  .primary-navigation {

    position: fixed;

    top: 56px; /* Dính sát mép dưới header, không bị đẩy thụt xuống */

    left: 0;

    right: 0;

    bottom: 0;

    background: #7c0a1a;

    flex-direction: column;

    justify-content: flex-start !important; /* Dính sát lên trên ngay dưới header */

    padding: 10px 16px 24px;

    overflow-y: auto;

    display: none;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

    z-index: 1000;

  }

  .nav-menu {

    flex-direction: column;

    width: 100%;

    align-items: stretch;

    justify-content: flex-start !important;

    gap: 0;

    margin: 0;

    padding: 0;

  }

  .primary-navigation.is-open {

    display: flex;

  }

  .nav-menu {

    flex-direction: column;

    width: 100%;

    align-items: flex-start;

    gap: 0;

  }

  .nav-menu > li {

    width: 100%;

    flex: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  }

  .nav-menu > li > a {

    width: 100%;

    justify-content: flex-start;

    padding: 12px 14px;

    border-right: none;

  }

  .nav-menu .sub-menu {

    position: static;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    border-top: none;

    background: rgba(0, 0, 0, 0.2);

    padding-left: 15px;

  }

}



@media (max-width: 768px) {

  .video-carousel-section {

    padding: 16px 0 8px !important;

  }



  .site-main.page-wrapper {

    padding-top: 24px !important;

  }



  .container {

    padding-left: 10px !important;

    padding-right: 10px !important;

  }



  .entry-content h2.section-heading-h1,

  .section-heading-h1 {

    margin-top: 6px !important;

    margin-bottom: 12px !important;

    font-size: 1.25rem !important;

    line-height: 1.35 !important;

    padding-bottom: 8px !important;

  }



  .hero-banner-h1 {

    font-size: 1.25rem;

  }

  

  .hero-banner-desc {

    font-size: 0.70rem !important;

    line-height: 1.45 !important;

    margin-bottom: 4px !important;

    padding: 0 4px !important;

  }



  .hero-intro-banner {

    margin-bottom: 6px !important;

  }



  .video-carousel-outer {

    padding: 0 6px;

  }



  .video-carousel-dots {

    margin-top: 6px !important;

    margin-bottom: 2px !important;

  }



  .hero-cta-button-row {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 10px !important;

    width: 100% !important;

    max-width: 390px !important;

    margin: 4px auto 0 !important;

    padding: 0 10px !important;

    box-sizing: border-box !important;

    justify-content: center !important;

  }

  .btn-hero-call,

  .btn-hero-zalo {

    flex: 1 1 50% !important;

    width: auto !important;

    justify-content: center !important;

    font-size: 0.78rem !important;

    padding: 6px 8px !important;

    height: 36px !important;

    min-height: 36px !important;

    white-space: nowrap !important;

    border-radius: 6px !important;

  }

  .btn-hero-call svg,

  .btn-hero-zalo svg {

    width: 16px !important;

    height: 16px !important;

  }



  .header-container-fluid {

    padding: 0 12px;

  }

  

  .video-slider-container-fluid {

    padding: 0 12px;

  }

  

  .video-carousel-track {

    padding: 0;

    gap: 12px;

  }

  

  .video-nav-arrow {

    display: none;

  }



  /* ẨN POST-HEADER TRÊN MOBILE */

  .single .post-header,

  .post-header {

    display: none !important;

  }



  /* BẢNG NỘI DUNG BÀI VIẾT TRÊN MOBILE: GIỮ NGUYÊN CẤU TRÚC BẢNG, KHÔNG BỊ TRÀN HAY NHẢY CÓC TỪNG Ô */

  .table-responsive-wrapper:not(:has(iframe)) {

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    margin: 10px 0 16px 0 !important;

    border-radius: 6px !important;

    box-sizing: border-box !important;

    border: 1px solid #e2e8f0 !important;

  }



  .entry-content table:not(:has(iframe)),

  .entry-content table[border="1"]:not(:has(iframe)) {

    display: table !important;

    width: 100% !important;

    min-width: 100% !important;

    max-width: none !important;

    border-collapse: collapse !important;

    margin: 0 !important;

    background: #ffffff !important;

    table-layout: auto !important;

  }



  .entry-content table:not(:has(iframe)) tbody,

  .entry-content table[border="1"]:not(:has(iframe)) tbody {

    display: table-row-group !important;

  }



  .entry-content table:not(:has(iframe)) tr,

  .entry-content table[border="1"]:not(:has(iframe)) tr {

    display: table-row !important;

  }



  .entry-content table:not(:has(iframe)) th,

  .entry-content table:not(:has(iframe)) td,

  .entry-content table[border="1"]:not(:has(iframe)) td {

    display: table-cell !important;

    vertical-align: middle !important;

    padding: 7px 10px !important;

    font-size: 0.78rem !important;

    line-height: 1.35 !important;

    border: 1px solid #e2e8f0 !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

    box-sizing: border-box !important;

    margin-bottom: 0 !important;

    width: auto !important;

    max-width: none !important;

  }



  /* Hàng tiêu đề bảng nền đỏ rượu chữ trắng sang trọng: CHỈ thead hoặc tr đầu tiên khi không có thead */

  .entry-content table:not(:has(iframe)) thead th,

  .entry-content table:not(:has(iframe)) thead td,

  .entry-content table:not(:has(iframe)):not(:has(thead)) > tbody > tr:first-child td,

  .entry-content table:not(:has(iframe)):not(:has(thead)) > tbody > tr:first-child th,

  .entry-content table:not(:has(iframe)):not(:has(thead)) > tr:first-child td,

  .entry-content table:not(:has(iframe)):not(:has(thead)) > tr:first-child th {

    background: #8B0000 !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    text-align: center !important;

    font-size: 0.80rem !important;

    padding: 8px 10px !important;

  }



  .entry-content table:not(:has(iframe)) thead th *,

  .entry-content table:not(:has(iframe)) thead td *,

  .entry-content table:not(:has(iframe)):not(:has(thead)) > tbody > tr:first-child td *,

  .entry-content table:not(:has(iframe)):not(:has(thead)) > tbody > tr:first-child th * {

    color: #ffffff !important;

    font-weight: 700 !important;

  }



  /* Hàng chẵn nền nhạt xen kẽ dễ theo dõi */

  .entry-content table:not(:has(iframe)) tr:nth-child(even):not(:first-child) td,

  .entry-content table[border="1"]:not(:has(iframe)) tr:nth-child(even):not(:first-child) td {

    background: #f8fafc !important;

  }



  /* Bảng video dưới tiêu đề H2 trên mobile: 1 HÀNG 2 VIDEO, TO RÕ HƠN 40%, KHÔNG KÉO DÀI KHOẢNG TRẮNG */

  .entry-content table:has(iframe),

  .table-responsive-wrapper:has(iframe) {

    display: block !important;

    width: 100% !important;

    overflow: visible !important;

    border: none !important;

    margin: 0 !important;

    padding: 0 !important;

  }

  .entry-content table:has(iframe) tbody {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    width: 100% !important;

  }

  .entry-content table:has(iframe) tr {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 6px !important;

    width: 100% !important;

    border: none !important;

  }

  .entry-content table:has(iframe) td {

    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 calc(50% - 3px) !important;

    width: calc(50% - 3px) !important;

    max-width: calc(50% - 3px) !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    margin-bottom: 0 !important;

    padding: 4px 4px 6px 4px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 8px !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;

    height: auto !important;

  }

  .entry-content table:has(iframe) td h4 {

    font-size: 0.78rem !important;

    font-weight: 700 !important;

    margin: 2px 0 5px !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    text-align: center !important;

  }

  .content-video-iframe-wrap {

    position: relative !important;

    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    border-radius: 4px !important;

    background: #000000 !important;

  }

  .content-video-iframe-wrap iframe {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    transform: none !important;

    border: none !important;

    display: block !important;

  }

  .entry-content table:has(iframe) td iframe {

    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    border-radius: 4px !important;

    display: block !important;

    background: #000000 !important;

  }

  



  /* TỐI ƯU CÁC BẢNG DỮ LIỆU / BẢNG GIÁ TRÊN MOBILE */

  .table-responsive-wrapper:not(:has(table:has(iframe))):not(:has(table:has(h4))) {

    margin: 12px 0 !important;

    border-radius: 8px !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;

  }



  .data-table tr:first-child td,

  .data-table tr:first-child th,

  .data-table thead th,

  .entry-content table:not(:has(iframe)):not(:has(h4)) tr:first-child td,

  .entry-content table:not(:has(iframe)):not(:has(h4)) th {

    font-size: 0.74rem !important;

    line-height: 1.25 !important;

    padding: 8px 3px !important;

  }



  .data-table tr:not(:first-child) td,

  .entry-content table:not(:has(iframe)):not(:has(h4)) tr:not(:first-child) td {

    padding: 8px 3px !important;

    font-size: 0.78rem !important;

    line-height: 1.35 !important;

  }



      /* ==========================================================================

     TỐI ƯU CÂN BẰNG CỘT BẢNG BÀI VIẾT TRÊN MOBILE

     Cột ít chữ tự động thu nhỏ lại nhường chỗ cho cột nhiều chữ.

     Đảm bảo TẤT CẢ chữ ở mọi cột hiển thị đầy đủ 100%, không bị cắt chữ / đè chữ.

     ========================================================================== */

  .table-responsive-wrapper:not(:has(table:has(iframe))):not(:has(table:has(h4))) {

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: auto !important;

    margin: 12px 0 !important;

    border-radius: 6px !important;

    box-sizing: border-box !important;

    border: 1px solid #e2e8f0 !important;

  }



  .entry-content table:not(:has(iframe)):not(:has(h4)),

  .data-table {

    width: 100% !important;

    max-width: 100% !important;

    table-layout: fixed !important;

    border-collapse: collapse !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

  }



  .entry-content table:not(:has(iframe)):not(:has(h4)) colgroup,

  .data-table colgroup {

    display: none !important;

  }



  .entry-content table:not(:has(iframe)):not(:has(h4)) td,

  .entry-content table:not(:has(iframe)):not(:has(h4)) th,

  .data-table td,

  .data-table th {

    white-space: normal !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

    box-sizing: border-box !important;

    vertical-align: middle !important;

    border: 1px solid #e2e8f0 !important;

  }



  /* NỀN DỮ LIỆU CHUẨN: TRẮNG SÁNG, CHỮ ĐẬM RÕ RÀNG */

  .data-table tbody tr td,

  .entry-content table:not(:has(iframe)):not(:has(h4)) tbody tr td {

    background: #ffffff !important;

    color: #1e293b !important;

  }



  /* TIÊU ĐỀ BẢNG (HEADER) DUY NHẤT Ở HÀNG ĐẦU TIÊN: NỀN ĐỎ #8B0000, CHỮ TRẮNG 100% */

  .data-table thead th,

  .data-table thead td,

  .data-table:not(:has(thead)) > tbody > tr:first-child th,

  .data-table:not(:has(thead)) > tbody > tr:first-child td,

  .entry-content table:not(:has(iframe)):not(:has(h4)) thead th,

  .entry-content table:not(:has(iframe)):not(:has(h4)):not(:has(thead)) > tbody > tr:first-child th,

  .entry-content table:not(:has(iframe)):not(:has(h4)):not(:has(thead)) > tbody > tr:first-child td {

    background: #8B0000 !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    font-size: 0.82rem !important;

    line-height: 1.45 !important;

    text-align: center !important;

    vertical-align: middle !important;

    padding: 10px 6px !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

  }



  .data-table thead th strong,

  .data-table thead td strong,

  .data-table thead th span,

  .data-table thead td span,

  .data-table tr:first-child th strong,

  .data-table tr:first-child td strong,

  .data-table tr:first-child th span,

  .data-table tr:first-child td span {

    color: #ffffff !important;

    background: transparent !important;

    padding: 0 !important;

    margin: 0 !important;

    font-size: inherit !important;

    line-height: inherit !important;

    display: inline !important;

  }



  .data-table th.table-header-merged,

  .data-table td.table-header-merged,

  .data-table tr:first-child td[colspan],

  .data-table tr:first-child th[colspan],

  .data-table td[colspan]:not(.entry-content table tr:not(:first-child) td) {

    width: 100% !important;

    text-align: center !important;

    padding: 10px 8px !important;

    font-size: 0.88rem !important;

    line-height: 1.45 !important;

  }



  /* Khi hàng có cột STT và ô kế tiếp có colspan, ô colspan chiếm trọn 87% màn hình */

  .data-table.has-col-stt td:nth-child(2)[colspan],

  .data-table.has-col-stt th:nth-child(2)[colspan],

  .data-table.table-cols-3.has-col-stt td:nth-child(2)[colspan],

  .data-table.table-cols-3.has-col-stt th:nth-child(2)[colspan],

  .data-table.table-cols-4.has-col-stt td:nth-child(2)[colspan],

  .data-table.table-cols-4.has-col-stt th:nth-child(2)[colspan] {

    width: 87% !important;

  }



  /* ----------------------------------------------------

     1. BẢNG 2 CỘT THÔNG SỐ / ĐẶC TÍNH (no-col-stt hoặc mặc định)

     Cột 1 ít chữ: 34% (vừa khít 2-3 từ như "Thiết bị huy động", "Tải trọng",...)

     Cột 2 nhiều chữ: 66% (thoải mái hiển thị chi tiết, không bị chèn ép)

     ---------------------------------------------------- */

  .data-table.table-cols-2:not(.has-col-stt) tbody td:nth-child(1),

  .data-table.no-col-stt.table-cols-2 tbody td:nth-child(1) {

    width: 34% !important;

    padding: 8px 6px !important;

    font-size: 0.76rem !important;

    font-weight: 700 !important;

    color: #1e293b !important;

    text-align: left !important;

    line-height: 1.35 !important;

    word-break: normal !important;

  }



  .data-table.table-cols-2:not(.has-col-stt) thead th:nth-child(1),

  .data-table.no-col-stt.table-cols-2 thead th:nth-child(1) {

    width: 34% !important;

    color: #ffffff !important;

    text-align: center !important;

  }



  .data-table.table-cols-2:not(.has-col-stt) tbody td:nth-child(2),

  .data-table.no-col-stt.table-cols-2 tbody td:nth-child(2) {

    width: 66% !important;

    padding: 8px 8px !important;

    font-size: 0.78rem !important;

    font-weight: 500 !important;

    color: #334155 !important;

    text-align: left !important;

    line-height: 1.35 !important;

    word-break: break-word !important;

  }



  .data-table.table-cols-2:not(.has-col-stt) thead th:nth-child(2),

  .data-table.no-col-stt.table-cols-2 thead th:nth-child(2) {

    width: 66% !important;

    color: #ffffff !important;

    text-align: center !important;

  }



  /* ----------------------------------------------------

     2. BẢNG CÓ CỘT STT (has-col-stt)

     Cột STT chỉ 1-2 chữ số: thu nhỏ 13% (~40px)

     Nhường toàn bộ 87% cho cột nội dung chính

     ---------------------------------------------------- */

  .data-table.has-col-stt.table-cols-2 td:nth-child(1):not([colspan]),

  .data-table.has-col-stt.table-cols-2 th:nth-child(1):not([colspan]) {

    width: 13% !important;

    padding: 8px 3px !important;

    font-size: 0.78rem !important;

    font-weight: 700 !important;

    text-align: center !important;

    white-space: nowrap !important;

  }



  .data-table.has-col-stt.table-cols-2 td:nth-child(2),

  .data-table.has-col-stt.table-cols-2 th:nth-child(2) {

    width: 87% !important;

    padding: 8px 8px !important;

    font-size: 0.80rem !important;

    font-weight: 600 !important;

    text-align: left !important;

    word-break: break-word !important;

  }



  /* ----------------------------------------------------

     3. BẢNG 3 CỘT

     ---------------------------------------------------- */

  .data-table.table-cols-3.has-col-stt td:nth-child(1),

  .data-table.table-cols-3.has-col-stt th:nth-child(1) {

    width: 12% !important;

    text-align: center !important;

    padding: 8px 2px !important;

    font-size: 0.78rem !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

  }

  .data-table.table-cols-3.has-col-stt td:nth-child(2),

  .data-table.table-cols-3.has-col-stt th:nth-child(2) {

    width: 60% !important;

    text-align: left !important;

    padding: 8px 8px !important;

    font-size: 0.78rem !important;

    word-break: break-word !important;

  }

  .data-table.table-cols-3.has-col-stt td:nth-child(3),

  .data-table.table-cols-3.has-col-stt th:nth-child(3) {

    width: 28% !important;

    text-align: center !important;

    padding: 8px 4px !important;

    font-size: 0.78rem !important;

    font-weight: 700 !important;

  }



  .data-table.table-cols-3.no-col-stt td:nth-child(1),

  .data-table.table-cols-3.no-col-stt th:nth-child(1) {

    width: 28% !important;

    text-align: left !important;

    padding: 8px 5px !important;

    font-size: 0.76rem !important;

    font-weight: 700 !important;

  }

  .data-table.table-cols-3.no-col-stt td:nth-child(2),

  .data-table.table-cols-3.no-col-stt th:nth-child(2) {

    width: 46% !important;

    text-align: left !important;

    padding: 8px 6px !important;

    font-size: 0.78rem !important;

  }

  .data-table.table-cols-3.no-col-stt td:nth-child(3),

  .data-table.table-cols-3.no-col-stt th:nth-child(3) {

    width: 26% !important;

    text-align: center !important;

    padding: 8px 4px !important;

    font-size: 0.78rem !important;

    font-weight: 700 !important;

  }



  /* ----------------------------------------------------

     4. BẢNG 4 CỘT (Khóa cứng 100% vừa khít màn hình, KHÔNG tràn ngang)

     ---------------------------------------------------- */

  .data-table.table-cols-4 tr td:nth-child(1):not([colspan]),

  .data-table.table-cols-4 tr th:nth-child(1):not([colspan]) {

    width: 10% !important;

    text-align: center !important;

    padding: 7px 2px !important;

    font-size: 0.74rem !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

  }

  .data-table.table-cols-4 tr td:nth-child(2):not([colspan]),

  .data-table.table-cols-4 tr th:nth-child(2):not([colspan]) {

    width: 44% !important;

    text-align: left !important;

    padding: 7px 5px !important;

    font-size: 0.76rem !important;

    font-weight: 600 !important;

    word-break: break-word !important;

    white-space: normal !important;

  }

  .data-table.table-cols-4 tr td:nth-child(3):not([colspan]),

  .data-table.table-cols-4 tr th:nth-child(3):not([colspan]) {

    width: 20% !important;

    text-align: center !important;

    padding: 7px 2px !important;

    font-size: 0.74rem !important;

    white-space: nowrap !important;

  }

  .data-table.table-cols-4 tr td:nth-child(4):not([colspan]),

  .data-table.table-cols-4 tr th:nth-child(4):not([colspan]) {

    width: 26% !important;

    text-align: center !important;

    padding: 7px 3px !important;

    font-size: 0.74rem !important;

    font-weight: 700 !important;

    color: #c8102e !important;

    white-space: nowrap !important;

  }



  /* ----------------------------------------------------

     5. BẢNG 5 CỘT

     ---------------------------------------------------- */

  .data-table.table-cols-5 td:nth-child(1),

  .data-table.table-cols-5 th:nth-child(1) {

    width: 10% !important;

    text-align: center !important;

    padding: 8px 1px !important;

    font-size: 0.74rem !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

  }

  .data-table.table-cols-5 td:nth-child(2),

  .data-table.table-cols-5 th:nth-child(2) {

    width: 38% !important;

    text-align: left !important;

    padding: 8px 5px !important;

    font-size: 0.76rem !important;

    font-weight: 600 !important;

    word-break: break-word !important;

  }

  .data-table.table-cols-5 td:nth-child(3),

  .data-table.table-cols-5 th:nth-child(3) {

    width: 13% !important;

    text-align: center !important;

    padding: 8px 2px !important;

    font-size: 0.74rem !important;

    white-space: nowrap !important;

  }

  .data-table.table-cols-5 td:nth-child(4),

  .data-table.table-cols-5 th:nth-child(4) {

    width: 25% !important;

    text-align: center !important;

    padding: 8px 3px !important;

    font-size: 0.76rem !important;

    font-weight: 700 !important;

    color: #c8102e !important;

  }

  .data-table.table-cols-5 td:nth-child(5),

  .data-table.table-cols-5 th:nth-child(5) {

    width: 14% !important;

    text-align: center !important;

    padding: 8px 2px !important;

    font-size: 0.74rem !important;

    white-space: nowrap !important;

  }



  /* 2 bài viết 1 hàng trên cả mobile */

  .posts-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 12px !important;

  }



  .post-card-body {

    padding: 10px !important;

  }



  .post-card-title {

    font-size: 0.88rem !important;

    line-height: 1.35 !important;

    margin-bottom: 6px !important;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }



  .post-card-excerpt {

    font-size: 0.78rem !important;

    line-height: 1.4 !important;

    margin-bottom: 8px !important;

    max-height: calc(1.4em * 2) !important;

  }



  .post-card-footer {

    padding-top: 6px !important;

    font-size: 0.72rem !important;

  }



  .post-card-date {

    font-size: 0.72rem !important;

  }



  .post-card-btn {

    font-size: 0.72rem !important;

  }

  

  .footer-grid {

    grid-template-columns: 1fr;

  }

  

  .mobile-sticky-bar {

    display: none !important;

  }

  

  /* Breadcrumbs trên mobile chỉ hiển thị đúng 1 dòng duy nhất, nếu dài thì tự động ẩn bớt bằng dấu ... */

  .breadcrumb-trail {

    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    padding: 8px 12px !important;

    margin-bottom: 16px !important;

    font-size: 0.8rem !important;

  }

  .breadcrumb-trail > * {

    flex-shrink: 0 !important;

    white-space: nowrap !important;

  }

  .breadcrumb-trail .current-crumb {

    flex-shrink: 1 !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    min-width: 0 !important;

  }

}





/* --------------------------------------------------------------------------

   BỘ LỌC CHUYÊN MỤC TRANG TIN TỨC (XE NÂNG, XE CẨU, XE NÂNG NGƯỜI, SỬA CHỮA)

   -------------------------------------------------------------------------- */

.news-filter-wrapper {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: var(--radius-lg);

  padding: 16px 20px;

  margin-bottom: 24px;

  box-shadow: var(--shadow-sm);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

}



.news-filter-label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 0.95rem;

  font-weight: 800;

  color: var(--color-dark);

  text-transform: uppercase;

  letter-spacing: 0.2px;

}



.news-filter-label svg {

  color: var(--color-primary);

  flex-shrink: 0;

}



.news-filter-buttons {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.news-filter-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  color: #334155;

  font-size: 0.86rem;

  font-weight: 700;

  padding: 7px 14px;

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: var(--transition);

  text-decoration: none;

  white-space: nowrap;

}



.news-filter-btn:hover {

  background: #f1f5f9;

  border-color: var(--color-primary);

  color: var(--color-primary);

  transform: translateY(-1px);

}



.news-filter-btn.active {

  background: var(--color-primary);

  border-color: var(--color-primary);

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);

}



/* --------------------------------------------------------------------------

   KHU VỰC BÌNH LUẬN & ĐÁNH GIÁ CỦA KHÁCH HÀNG (INTEGRATED WORDPRESS COMMENTS)

   -------------------------------------------------------------------------- */

.comments-area {

  margin-top: 40px;

  padding-top: 30px;

  border-top: 2px solid #e5e7eb;

}



.comments-header-card {

  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);

  border: 2px solid #fecaca;

  border-radius: var(--radius-lg);

  padding: 22px 24px;

  margin-bottom: 30px;

  box-shadow: var(--shadow-sm);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}



.comments-header-info {

  flex: 1;

  min-width: 260px;

}



.comments-section-title {

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--color-primary);

  margin: 0 0 6px;

  display: flex;

  align-items: center;

  gap: 10px;

  text-transform: uppercase;

}



.comments-count-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--color-primary);

  color: #ffffff;

  font-size: 0.78rem;

  font-weight: 800;

  min-width: 24px;

  height: 24px;

  padding: 0 6px;

  border-radius: 9999px;

}



.comments-section-desc {

  font-size: 0.92rem;

  color: #4b5563;

  margin: 0;

  line-height: 1.5;

}



.comments-rating-box {

  background: #ffffff;

  border: 1px solid #fed7aa;

  border-radius: var(--radius-md);

  padding: 12px 18px;

  text-align: center;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  flex-shrink: 0;

}



.rating-score {

  font-size: 1.6rem;

  font-weight: 900;

  color: var(--color-dark);

  line-height: 1;

}



.rating-score span {

  font-size: 0.9rem;

  color: #94a3b8;

  font-weight: 600;

}



.rating-stars {

  color: #f59e0b;

  font-size: 1.1rem;

  margin: 4px 0 2px;

  letter-spacing: 2px;

}



.rating-label {

  font-size: 0.75rem;

  font-weight: 700;

  color: #059669;

}



/* Danh Sách Bình Luận */

.comment-list {

  list-style: none;

  padding: 0;

  margin: 0 0 35px 0;

}



.comment-item {

  margin-bottom: 20px;

}



.comment-item-inner {

  display: flex;

  gap: 14px;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: var(--radius-md);

  padding: 16px 20px;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

}



.comment-item-inner:hover {

  border-color: #cbd5e1;

  box-shadow: var(--shadow-md);

}



.comment-avatar img {

  border-radius: 50% !important;

  width: 44px !important;

  height: 44px !important;

  object-fit: cover !important;

  margin: 0 !important;

  border: 2px solid #e2e8f0;

}



.comment-main {

  flex: 1;

  min-width: 0;

}



.comment-header {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 8px;

}



.comment-author-name {

  font-weight: 800;

  color: var(--color-dark);

  font-size: 0.98rem;

}



.comment-badge-admin {

  background: #fee2e2;

  color: var(--color-primary);

  font-size: 0.72rem;

  font-weight: 800;

  padding: 2px 8px;

  border-radius: 4px;

  border: 1px solid #fca5a5;

  text-transform: uppercase;

}



.comment-badge-client {

  background: #ecfdf5;

  color: #059669;

  font-size: 0.72rem;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 4px;

  border: 1px solid #a7f3d0;

}



.comment-date {

  font-size: 0.78rem;

  color: #94a3b8;

  margin-left: auto;

}



.comment-text {

  font-size: 0.94rem;

  line-height: 1.6;

  color: #374151;

  margin-bottom: 8px;

}



.comment-text p {

  margin: 0 0 6px;

}



.comment-reply a {

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--color-primary);

  text-decoration: none;

  transition: var(--transition);

}



.comment-reply a:hover {

  color: var(--color-primary-dark);

  text-decoration: underline;

}



.comment-item .children {

  list-style: none;

  padding-left: 28px;

  margin-top: 14px;

  border-left: 2px solid #fed7aa;

}



/* Form Bình Luận Chuẩn */

.comment-respond {

  background: #ffffff;

  border: 2px solid #e2e8f0;

  border-radius: var(--radius-lg);

  padding: 24px 28px;

  box-shadow: var(--shadow-sm);

  margin-top: 25px;

}



.comment-reply-title {

  font-size: 1.15rem;

  font-weight: 800;

  color: var(--color-dark);

  margin: 0 0 8px;

  text-transform: uppercase;

  letter-spacing: 0.2px;

}



.comment-notes {

  font-size: 0.85rem;

  color: #64748b;

  margin-bottom: 18px;

}



.comment-form-row {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

  margin-bottom: 16px;

}



@media (max-width: 640px) {

  .comment-form-row {

    grid-template-columns: 1fr;

    gap: 0;

  }

}



.comment-form-field {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-bottom: 16px;

}



.comment-form-field label {

  font-size: 0.88rem;

  font-weight: 700;

  color: #374151;

}



.comment-form-field .required {

  color: #ef4444;

}



.comment-form-field input,

.comment-form-field textarea {

  width: 100%;

  padding: 10px 14px;

  border: 1px solid #cbd5e1;

  border-radius: var(--radius-md);

  font-size: 0.92rem;

  font-family: inherit;

  transition: var(--transition);

  box-sizing: border-box;

  background: #f8fafc;

}



.comment-form-field input:focus,

.comment-form-field textarea:focus {

  outline: none;

  border-color: var(--color-primary);

  background: #ffffff;

  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);

}



.form-submit {

  margin: 0;

}



.submit-btn-comment {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: var(--color-primary);

  color: #ffffff !important;

  font-size: 0.95rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  padding: 12px 26px;

  border: none;

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: var(--transition);

  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);

}



.submit-btn-comment:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(200, 16, 46, 0.45);

}





/* --------------------------------------------------------------------------

   BANNER SUBPAGE HEADER ĐỜI MỚI (PAGE, DANH MỤC, BÀI VIẾT + TƯ VẤN BÁO GIÁ)

   -------------------------------------------------------------------------- */

.subpage-hero-banner {

  background: linear-gradient(135deg, #7c0a1a 0%, #990a20 50%, #680816 100%);

  color: #ffffff;

  padding: 24px 0 26px;

  border-bottom: 3px solid var(--color-secondary);

  position: relative;

  overflow: hidden;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

  margin-bottom: 24px;

}



.subpage-hero-banner::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  width: 35%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 184, 0, 0.12));

  pointer-events: none;

}



.subpage-banner-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

}



.subpage-banner-content {

  flex: 1;

  min-width: 0;

}



.subpage-banner-title {

  font-size: 1.65rem;

  font-weight: 900;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 0.4px;

  line-height: 1.3;

  margin: 0 0 8px;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}



.subpage-banner-desc {

  font-size: 0.94rem;

  line-height: 1.6;

  color: #f1f5f9;

  margin: 0 0 14px;

  max-width: 840px;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

}



/* 5 Huy Hiệu Uy Tín */

.subpage-badges-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

}



.subpage-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-size: 0.78rem;

  font-weight: 700;

  padding: 5px 11px;

  border-radius: 6px;

  white-space: nowrap;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

  transition: var(--transition);

}



.subpage-badge:hover {

  transform: translateY(-1px);

}



.badge-yellow {

  background: #f59e0b;

  color: #111827;

}



.badge-red {

  background: #dc2626;

  color: #ffffff;

}



.badge-orange {

  background: #ea580c;

  color: #ffffff;

}



.badge-blue {

  background: #2563eb;

  color: #ffffff;

}



.badge-green {

  background: #16a34a;

  color: #ffffff;

}



.subpage-badge svg {

  flex-shrink: 0;

}



/* Card TƯ VẤN & BÁO GIÁ NHANH Bên Phải */

.subpage-quote-card {

  background: #ffffff;

  border-radius: var(--radius-lg);

  padding: 18px 20px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

  border: 2px solid #fed7aa;

  text-align: center;

  flex: 0 0 310px;

  max-width: 320px;

  box-sizing: border-box;

}



.quote-card-header {

  color: var(--color-primary);

  font-size: 0.96rem;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.2px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  margin-bottom: 4px;

}



.quote-card-header svg {

  color: #ef4444;

  flex-shrink: 0;

}



.quote-card-sub {

  font-size: 0.8rem;

  color: #4b5563;

  margin: 0 0 12px;

  line-height: 1.4;

}



.quote-card-actions {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.btn-quote-call {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  background: var(--color-primary);

  color: #ffffff !important;

  font-size: 0.92rem;

  font-weight: 800;

  padding: 10px 16px;

  border-radius: var(--radius-md);

  text-decoration: none;

  transition: var(--transition);

  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.35);

}



.btn-quote-call:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(200, 16, 46, 0.45);

}



.btn-quote-zalo {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  background: #ffffff;

  color: #0284c7 !important;

  border: 1.5px solid #0284c7;

  font-size: 0.88rem;

  font-weight: 800;

  padding: 9px 16px;

  border-radius: var(--radius-md);

  text-decoration: none;

  transition: var(--transition);

}



.btn-quote-zalo:hover {

  background: #f0f9ff;

  border-color: #0369a1;

  color: #0369a1 !important;

  transform: translateY(-2px);

}



/* Responsive Cho Mobile & Tablet */

@media (max-width: 991px) {

  .subpage-banner-container {

    flex-direction: column;

    align-items: stretch;

    gap: 18px;

  }



  .subpage-quote-card {

    flex: 1 1 100%;

    max-width: 100%;

  }



  .quote-card-actions {

    flex-direction: column;

    gap: 8px;

  }



  .btn-quote-call,

  .btn-quote-zalo {

    width: 100%;

    font-size: 0.9rem;

    padding: 10px 14px;

    box-sizing: border-box;

  }



  .subpage-banner-title {

    font-size: 1.35rem;

  }

}



/* --------------------------------------------------------------------------

   KCN BADGES SLIDER (1 HÀNG TRÊN MOBILE + TRƯỢT TỰ ĐỘNG DẠNG SLIDE)

   -------------------------------------------------------------------------- */

.hero-kcn-slider-container {

  width: 100%;

}



.kcn-clone {

  display: none !important;

}



@media (max-width: 768px) {

  .hero-kcn-slider-container {

    width: 100%;

    overflow: hidden;

    position: relative;

    padding: 3px 0 !important;

    margin: 2px 0 0 !important;

    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);

  }



  .hero-kcn-badge-row {

    display: flex !important;

    flex-wrap: nowrap !important;

    width: max-content !important;

    gap: 8px !important;

    justify-content: flex-start !important;

    animation: kcn-slide-marquee 22s linear infinite;

  }



  .hero-kcn-badge-row:hover,

  .hero-kcn-badge-row:active {

    animation-play-state: paused;

  }



  .kcn-clone {

    display: inline-flex !important;

  }



  .hero-kcn-badge {

    flex-shrink: 0;

    font-size: 0.74rem;

    padding: 4px 10px;

    white-space: nowrap;

  }

}



@keyframes kcn-slide-marquee {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



/* --------------------------------------------------------------------------

   VIDEO CAROUSEL INDICATOR DOTS / PILL BARS (GIỐNG HÌNH THAM CHIẾU)

   -------------------------------------------------------------------------- */

.video-carousel-dots {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 14px;

  margin-bottom: 6px;

}



.video-dot {

  width: 22px;

  height: 5px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.3);

  cursor: pointer;

  transition: all 0.3s ease;

}



.video-dot.active {

  width: 38px;

  background: #ffb800; /* Vàng nổi bật như mẫu */

  box-shadow: 0 0 10px rgba(255, 184, 0, 0.7);

}



@media (max-width: 640px) {

  .video-slide-item {

    flex: 0 0 calc((100cqw - 10px) / 2) !important;

    width: calc((100cqw - 10px) / 2) !important;

  }

  .video-slide-title {

    font-size: 0.76rem !important;

    padding: 6px 8px !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

  }

  .video-slide-card {

    border-radius: 10px;

  }

  .video-carousel-outer {

    padding: 0 6px;

  }

}



/* Scale down player on mobile so play button (hình tròn & tam giác) is sleek and not too big */

@media (max-width: 640px) {

  .video-slide-iframe {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 0 0 8px 8px;

    background: #000000;

  }

  .video-slide-iframe iframe,

  .content-video-iframe-wrap iframe {

    position: absolute !important;

    top: 0 !important;

    left: 0 !important;

    width: 100% !important;

    height: 100% !important;

    transform: none !important;

    border: none !important;

    display: block !important;

  }

  .video-carousel-track {

    gap: 8px !important;

  }

  .video-slide-item {

    scroll-snap-align: start;

    scroll-snap-stop: always;

  }

}



/* ==========================================================================

   HOMEPAGE 4-IMAGE SERVICES GRID (2 HÀNG x 2 CỘT)

   Thay thế vị trí video cũ ngay dưới tiêu đề H2 chính

   ========================================================================== */

.homepage-services-grid {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 16px !important;

  margin: 18px 0 28px 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.homepage-services-grid .service-grid-card {

  display: flex !important;

  flex-direction: column !important;

  background: #ffffff !important;

  border: 1px solid #e5e7eb !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;

  text-decoration: none !important;

  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;

  box-sizing: border-box !important;

}



.homepage-services-grid .service-grid-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;

  border-color: #b91c1c !important;

}



.homepage-services-grid .service-card-thumb {

  position: relative !important;

  width: 100% !important;

  aspect-ratio: 4 / 3 !important;

  overflow: hidden !important;

  background: #f1f5f9 !important;

  margin: 0 !important;

  padding: 0 !important;

}



.homepage-services-grid .service-card-thumb img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

  margin: 0 !important;

  padding: 0 !important;

  border-radius: 0 !important;

  border: none !important;

  box-shadow: none !important;

  transition: transform 0.4s ease !important;

}



.homepage-services-grid .service-grid-card:hover .service-card-thumb img {

  transform: scale(1.05) !important;

}



.homepage-services-grid .service-card-title-wrap {

  padding: 12px 10px !important;

  background: #ffffff !important;

  border-top: 1px solid #f1f5f9 !important;

  text-align: center !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex: 1 !important;

  min-height: 52px !important;

  box-sizing: border-box !important;

}



.homepage-services-grid .service-card-title {

  font-size: 1.02rem !important;

  font-weight: 700 !important;

  color: #8B0000 !important;

  margin: 0 !important;

  padding: 0 !important;

  line-height: 1.35 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.3px !important;

  transition: color 0.2s ease !important;

}



.homepage-services-grid .service-grid-card:hover .service-card-title {

  color: #dc2626 !important;

}



/* KHU VỰC VIDEO THI CÔNG Ở CUỐI BÀI VIẾT */

.homepage-video-section {

  margin-top: 36px !important;

  padding-top: 18px !important;

  border-top: 2px dashed #e2e8f0 !important;

}



.homepage-video-section h2 {

  font-size: 1.55rem !important;

  font-weight: 800 !important;

  color: var(--color-dark, #1f2937) !important;

  line-height: 1.4 !important;

  margin: 0 0 16px 0 !important;

  padding-left: 14px !important;

  border-left: 5px solid var(--color-primary, #8B0000) !important;

  text-transform: uppercase !important;

  position: relative !important;

}



.homepage-video-section h2 strong {

  color: #8B0000 !important;

}



/* TỐI ƯU TRÊN MOBILE CHO 4 HÌNH ẢNH (2 HÀNG x 2 CỘT) & VIDEO THI CÔNG */

@media (max-width: 640px) {

  .homepage-services-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 8px !important;

    margin: 10px 0 20px 0 !important;

  }



  .homepage-services-grid .service-grid-card {

    border-radius: 6px !important;

  }



  .homepage-services-grid .service-card-title-wrap {

    padding: 7px 5px !important;

    min-height: 42px !important;

  }



  .homepage-services-grid .service-card-title {

    font-size: 0.78rem !important;

    line-height: 1.25 !important;

    letter-spacing: 0 !important;

  }



  .homepage-video-section {

    margin-top: 24px !important;

    padding-top: 14px !important;

  }



  .homepage-video-section h2 {

    font-size: 1.15rem !important;

    padding-left: 10px !important;

    border-left-width: 4px !important;

    margin-bottom: 12px !important;

  }

}



/* Tinh chỉnh typography & bỏ bullet vuông màu vàng trên card dịch vụ */

.homepage-services-grid .service-card-title::before,

.homepage-services-grid .service-card-title::after {

  display: none !important;

  content: none !important;

}



.homepage-services-grid .service-card-title {

  text-align: center !important;

  width: 100% !important;

  font-size: 0.98rem !important;

  letter-spacing: 0.2px !important;

}



.homepage-video-section {

  scroll-margin-top: 100px !important;

}



.homepage-video-section h2 {

  scroll-margin-top: 100px !important;

}



.section-heading-h1 {

  scroll-margin-top: 100px !important;

}



/* ==========================================================================

   TỐI ƯU GIAO DIỆN PC (DESKTOP >= 641px)

   Lưới 6 dịch vụ (1 hàng 3 ảnh - 2 hàng x 3 cột), triệt tiêu khoảng trắng thừa 2 bên

   ========================================================================== */

@media (min-width: 641px) {

  .video-carousel-section {

    padding: 10px 0 8px !important;

  }



  .hero-intro-banner {

    margin-bottom: 4px !important;

  }



  .hero-banner-h1 {

    font-size: 1.5rem !important;

    margin-bottom: 3px !important;

  }



  .hero-banner-desc {

    margin-bottom: 5px !important;

  }



  .hero-kcn-strip {

    margin: 4px 0 8px 0 !important;

  }



  .video-carousel-dots {

    margin-top: 6px !important;

    margin-bottom: 4px !important;

  }



  .hero-cta-button-row {

    margin: 6px auto 0 !important;

  }



  .site-main.page-wrapper {

    padding-top: 24px !important;

  }



  .entry-content h2.section-heading-h1,

  .section-heading-h1 {

    margin-top: 10px !important;

    margin-bottom: 6px !important;

    padding-bottom: 4px !important;

    font-size: 1.45rem !important;

  }



  /* LƯỚI 6 DỊCH VỤ TRÊN PC: 3 CỘT x 2 HÀNG */

  .homepage-services-grid {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 14px !important;

    margin: 6px 0 18px 0 !important;

  }



  .homepage-services-grid .service-grid-card {

    display: flex !important;

    flex-direction: column !important;

  }



  .homepage-services-grid .service-card-thumb {

    height: 180px !important;

    aspect-ratio: 4 / 3 !important;

    background: #f1f5f9 !important;

    overflow: hidden !important;

  }



  .homepage-services-grid .service-card-thumb img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    transition: transform 0.4s ease !important;

  }



  .homepage-services-grid .service-grid-card:hover .service-card-thumb img {

    transform: scale(1.05) !important;

  }



  .homepage-services-grid .service-card-title-wrap {

    padding: 7px 6px !important;

    min-height: 38px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

  }



  .homepage-services-grid .service-card-title {

    font-size: 0.82rem !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;

    text-align: center !important;

    width: 100% !important;

  }

}



/* ==========================================================================

   TỐI ƯU CÂN ĐỐI CHO MOBILE (< 640px)

   GIỮ NGUYÊN 4 DỊCH VỤ NHƯ CŨ (Ẩn 2 ô mới thêm của PC), khoảng cách thoáng đẹp

   ========================================================================== */

@media (max-width: 640px) {

  /* ẨN 2 DỊCH VỤ MỚI TRÊN MOBILE ĐÚNG YÊU CẦU ("mobile giữ nguyên như cũ") */

  .homepage-services-grid .pc-only-card,

  .homepage-services-grid .service-grid-card:nth-child(n+5) {

    display: none !important;

  }



  .video-carousel-section {

    padding: 12px 0 8px !important;

  }



  .hero-intro-banner {

    margin-bottom: 4px !important;

  }



  .hero-banner-h1 {

    font-size: 1.15rem !important;

    margin-bottom: 3px !important;

  }



  .hero-banner-desc {

    font-size: 0.68rem !important;

    line-height: 1.4 !important;

    margin-bottom: 4px !important;

  }



  .hero-kcn-strip {

    margin: 3px 0 6px 0 !important;

  }



  .video-carousel-dots {

    margin-top: 5px !important;

    margin-bottom: 4px !important;

  }



  .hero-cta-button-row {

    margin: 6px auto 0 !important;

  }



  .site-main.page-wrapper {

    padding-top: 12px !important;

  }



  .entry-content h2.section-heading-h1,

  .section-heading-h1 {

    margin-top: 8px !important;

    margin-bottom: 8px !important;

    font-size: 1.05rem !important;

    line-height: 1.25 !important;

    padding-bottom: 4px !important;

  }



  .homepage-services-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 8px !important;

    margin: 8px 0 14px 0 !important;

  }



  .homepage-services-grid .service-grid-card {

    border-radius: 6px !important;

  }



  .homepage-services-grid .service-card-thumb {

    aspect-ratio: 1.36 / 1 !important;

  }



  .homepage-services-grid .service-card-thumb img {

    object-fit: cover !important;

  }



  .homepage-services-grid .service-card-title-wrap {

    padding: 5px 4px !important;

    min-height: 30px !important;

  }



  .homepage-services-grid .service-card-title {

    font-size: 0.67rem !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    letter-spacing: 0 !important;

    text-align: center !important;

    width: 100% !important;

  }



  .circle-floating-btn {

    bottom: 12px !important;

  }



  /* --------------------------------------------------------------------------

     TỐI ƯU SUBPAGE & DANH MỤC TRÊN MOBILE (< 640px)

     - Căn giữa tiêu đề banner, mô tả tối đa 3 dòng, ẩn subpage-badges-row

     - Thu nhỏ post-card-badge vừa vặn, không che ảnh

     - Căn chỉnh ngày tháng & Xem Chi Tiết vừa vặn trên 1 dòng thẳng hàng

     -------------------------------------------------------------------------- */

  .subpage-banner-content {

    text-align: center !important;

  }



  .subpage-banner-title {

    text-align: center !important;

    font-size: 1.25rem !important;

    line-height: 1.3 !important;

    margin-bottom: 6px !important;

  }



  .subpage-banner-desc {

    text-align: center !important;

    font-size: 0.78rem !important;

    line-height: 1.45 !important;

    margin: 0 auto 10px auto !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 3 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }



  .subpage-badges-row {

    display: none !important;

  }



  .subpage-hero-banner {

    padding: 16px 0 18px !important;

    margin-bottom: 12px !important;

  }



  /* Thu nhỏ post-card-badge trên Mobile */

  .post-card-thumb {

    position: relative !important;

  }



  .post-card-badge {

    top: 6px !important;

    left: 6px !important;

    font-size: 0.58rem !important;

    font-weight: 700 !important;

    padding: 2px 6px !important;

    border-radius: 3px !important;

    max-width: calc(100% - 12px) !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    line-height: 1.2 !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;

  }



  /* Căn chỉnh bài viết & footer (ngày tháng + Xem Chi Tiết) trên Mobile */

  .posts-grid .post-card {

    display: flex !important;

    flex-direction: column !important;

  }



  .posts-grid .post-card-body {

    display: flex !important;

    flex-direction: column !important;

    flex: 1 !important;

    padding: 8px 8px !important;

  }



  .posts-grid .post-card-title {

    font-size: 0.82rem !important;

    line-height: 1.25 !important;

    min-height: calc(1.25em * 2) !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    margin-bottom: 4px !important;

  }



  .posts-grid .post-card-excerpt {

    font-size: 0.70rem !important;

    line-height: 1.35 !important;

    margin-bottom: 8px !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

  }



  .posts-grid .post-card-footer {

    margin-top: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding-top: 6px !important;

    gap: 4px !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }



  .posts-grid .post-card-date {

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

    font-size: 0.62rem !important;

    color: #94a3b8 !important;

    white-space: nowrap !important;

    letter-spacing: -0.2px !important;

    flex-shrink: 0 !important;

  }



  .posts-grid .post-card-date svg {

    width: 11px !important;

    height: 11px !important;

    flex-shrink: 0 !important;

  }



  .posts-grid .post-card-btn {

    font-size: 0.62rem !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    color: var(--color-primary) !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 2px !important;

    flex-shrink: 0 !important;

  }

}



@media (max-width: 640px) {

  .entry-content table:has(iframe) td h4 {

    font-size: 0.71rem !important;

    white-space: normal !important;

    line-height: 1.2 !important;

    margin: 2px 0 4px !important;

  }

}



@media (max-width: 640px) {



  /* YÊU CẦU: TIÊU ĐỀ H2 TRÊN MOBILE CÓ MARGIN-TOP 0.1REM */

  h2,

  .entry-content h2,

  .entry-content h2.section-heading-h1,

  .section-heading-h1,

  .homepage-video-section h2 {

    margin-top: 0.1rem !important;

  }



  /* YÊU CẦU: 2 NÚT GỌI VÀ CHAT TRÒN TRÊN MOBILE THU NHỎ LẠI CHÚT (42px) */

  .circle-floating-btn {

    width: 42px !important;

    height: 42px !important;

    bottom: 16px !important;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;

  }

  .circle-btn-call {

    left: 12px !important;

  }

  .circle-btn-call svg {

    width: 20px !important;

    height: 20px !important;

  }

  .circle-btn-zalo {

    right: 12px !important;

  }

  .circle-btn-zalo svg,

  .circle-btn-icon-zalo {

    width: 25px !important;

    height: 25px !important;

  }



}



@media (max-width: 640px) {



  .data-table td h2,

  .data-table th h2,

  .entry-content table td h2,

  .entry-content table th h2 {

    font-size: 0.88rem !important;

    font-weight: 800 !important;

    margin: 0 !important;

    padding: 2px 0 !important;

    line-height: 1.3 !important;

    color: #ffffff !important;

    text-align: center !important;

    border: none !important;

  }



}