/* ==========================================================================
   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: 1360px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 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: 2px;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: nowrap;
}

.nav-menu > li {
  position: relative;
  flex-shrink: 0;
}

.nav-menu > li.menu-item-has-children > a::after {
  content: " ▾";
  font-size: 0.7rem;
  margin-left: 3px;
  opacity: 0.85;
}

.nav-menu > li > a {
  display: inline-flex;
  align-items: center;
  padding: 6px 7px;
  font-size: 0.81rem;
  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,
.nav-menu > li.current-menu-parent > a,
.nav-menu > li.current-post-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: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  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.video-grid-table,
.table-responsive-wrapper:has(table.video-grid-table),
.table-responsive-wrapper:has(table:has(iframe)) {
  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: collapse !important;
}

/* Định dạng chuẩn cho bảng video: 2 ô gần nhau, gọn gàng */
.entry-content table.video-grid-table,
.entry-content table:has(iframe) {
  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.video-grid-table td,
.entry-content table:has(iframe) 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.video-grid-table td:hover,
.entry-content table:has(iframe) 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 tr.table-header-merged-row th,
.data-table tr.table-header-merged-row td,
.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.table-header-merged-row td strong,
.data-table tr.table-header-merged-row th strong,
.data-table .table-header-merged 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 ĐỒNG NHẤT
   ========================================================================== */
.entry-content table:not(.video-grid-table):not(:has(iframe)) tbody td,
.data-table tbody td,
.entry-content table tr:not(:first-child) td,
.data-table tr:not(:first-child) td {
  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 tbody td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tbody td,
.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 tbody tr:nth-child(even) td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tbody tr:nth-child(even) td,
.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 tr.table-header-merged-row th,
  .data-table tr.table-header-merged-row td {
    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;
}

/* Bảng trên Desktop luôn tràn 100% khung post-body */
.data-table.table-cols-4,
.entry-content table.data-table.table-cols-4,
.data-table.table-cols-5,
.entry-content table.data-table.table-cols-5 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  table-layout: auto !important;
}

.data-table.table-cols-4 th:nth-child(1),
.data-table.table-cols-4 td:nth-child(1) {
  width: 65px !important;
  text-align: center !important;
}

.data-table.table-cols-4 th:nth-child(2),
.data-table.table-cols-4 td:nth-child(2) {
  text-align: left !important;
  padding: 12px 14px !important;
}

.data-table.table-cols-4 th:nth-child(3),
.data-table.table-cols-4 td:nth-child(3) {
  width: 160px !important;
  text-align: center !important;
  padding: 12px 10px !important;
}

.data-table.table-cols-4 th:nth-child(4),
.data-table.table-cols-4 td:nth-child(4) {
  width: 200px !important;
  text-align: center !important;
  padding: 12px 10px !important;
}

.data-table thead th,
.data-table thead td,
.data-table tr.table-header-row th,
.data-table tr.table-header-row td,
.data-table tr.table-header-merged-row td,
.data-table tr.table-header-merged-row th,
.data-table .table-header-merged,
.entry-content table:not(.video-grid-table) thead th,
.entry-content table:not(.video-grid-table) thead td,
.entry-content table:not(.video-grid-table) tr.table-header-row th,
.entry-content table:not(.video-grid-table) tr.table-header-row td {
  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;
  vertical-align: middle !important;
}

.data-table thead th strong,
.data-table thead td strong,
.data-table tr.table-header-row th strong,
.data-table tr.table-header-row td strong,
.data-table tr.table-header-merged-row td strong,
.data-table tr.table-header-merged-row th strong,
.data-table .table-header-merged strong,
.entry-content table:not(.video-grid-table) thead strong,
.entry-content table:not(.video-grid-table) tr.table-header-row strong {
  color: #ffffff !important;
}

/* Toàn bộ chữ dữ liệu trong ô bảng phải luôn là màu xám đen đậm, KHÔNG BAO GIỜ bị trắng chữ */
.data-table tbody td,
.data-table tbody td strong,
.entry-content table:not(.video-grid-table) tbody td,
.entry-content table:not(.video-grid-table) tbody td strong,
.data-table tr:not(.table-header-row):not(.table-header-merged-row) td,
.data-table tr:not(.table-header-row):not(.table-header-merged-row) td strong,
.entry-content table:not(.video-grid-table) tr:not(.table-header-row):not(.table-header-merged-row) td,
.entry-content table:not(.video-grid-table) tr:not(.table-header-row):not(.table-header-merged-row) td strong {
  color: #1e293b !important;
}

.data-table tr.table-header-merged-row td,
.data-table tr.table-header-merged-row th,
.data-table .table-header-merged {
  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;
}


/* CHUẨN HÓA TOÀN BỘ Ô BẢNG DỮ LIỆU (TBODY TD): ĐỒNG NHẤT 100% CỠ CHỮ, PADDING, VIỀN Ở TẤT CẢ CÁC HÀNG */
.data-table tbody td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tbody td,
.data-table tr:not(:first-child) td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tr:not(:first-child) td {
  padding: 10px 8px !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  border: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.data-table tbody tr:nth-child(even) td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tbody tr:nth-child(even) td,
.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;
}

.data-table tbody tr:nth-child(odd) td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tbody tr:nth-child(odd) td,
.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 !important;
}

.data-table tbody tr:hover td,
.entry-content table:not(:has(iframe)):not(:has(h4)) tbody tr:hover td,
.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 !important;
}

/* NÚT BẤM LIÊN HỆ / GỌI ĐIỀU XE TRONG BẢNG: ĐỒNG NHẤT MÀU ĐỎ ĐẬM 100% TẠI MỌI HÀNG */
.table-contact-link,
.entry-content table td a.table-contact-link,
.data-table td a.table-contact-link,
.table-call-btn,
.entry-content table .table-call-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.table-contact-link:hover,
.entry-content table td a.table-contact-link:hover,
.data-table td a.table-contact-link:hover,
.table-call-btn:hover,
.entry-content table .table-call-btn:hover {
  color: #b91c1c !important;
  text-decoration: underline !important;
}

/* NÚT CHAT ZALO TRONG BẢNG: ĐỒNG NHẤT NÚT BẤM XANH NỔI BẬT TẠI MỌI HÀNG */
.table-zalo-link,
.entry-content table td a.table-zalo-link,
.data-table td a.table-zalo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.table-zalo-link:hover,
.entry-content table td a.table-zalo-link:hover,
.data-table td a.table-zalo-link:hover {
  background: #0369a1 !important;
  color: #ffffff !important;
}

/* Nút bấm liên hệ / Gọi báo giá trực tiếp trong bảng */
.table-call-btn,
.entry-content table .table-call-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.table-call-btn:hover,
.entry-content table .table-call-btn:hover {
  background: #b91c1c !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.table-call-btn:active,
.entry-content table .table-call-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   QUY CHUẨN CỘT STT TOÀN DIỆN CHO TẤT CẢ CÁC BẢNG (DESKTOP & TABLET & MOBILE)
   ========================================================================== */
/* MẶC ĐỊNH MỌI BẢNG CÓ CỘT STT TRÊN DESKTOP: CỘT STT LUÔN THU GỌN TỐI ĐA */
.data-table.has-col-stt th:first-child,
.data-table.has-col-stt td:first-child,
.entry-content table.has-col-stt th:first-child,
.entry-content table.has-col-stt td:first-child,
.data-table th[data-col="stt"],
.data-table td[data-col="stt"] {
  width: 44px !important;
  min-width: 40px !important;
  max-width: 48px !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  padding: 10px 2px !important;
  box-sizing: border-box !important;
}

.data-table.has-col-stt thead th:first-child,
.data-table.has-col-stt tr.table-header-row th:first-child,
.entry-content table.has-col-stt thead th:first-child,
.entry-content table.has-col-stt tr.table-header-row th:first-child {
  background: #8B0000 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.data-table.has-col-stt tbody td:first-child,
.entry-content table.has-col-stt tbody td:first-child {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Bảng 2 cột có STT (STT + Nội dung) */
.data-table.table-cols-2.has-col-stt td:nth-child(2),
.data-table.table-cols-2.has-col-stt th:nth-child(2) {
  width: calc(100% - 65px) !important;
  text-align: left !important;
  padding: 10px 14px !important;
}

/* Trường hợp ô thứ 2 có colspan bất kỳ đi cùng ô STT */
.data-table.has-col-stt tr th:nth-child(2)[colspan],
.data-table.has-col-stt tr td:nth-child(2)[colspan] {
  width: calc(100% - 65px) !important;
  text-align: left !important;
  max-width: none !important;
}

/* 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, .footer-widget h3 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 8px;
}

.footer-widget h4::after, .footer-widget h3::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;
  }
  .nav-menu .sub-menu li a {
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
  }
  .nav-menu .sub-menu li a:hover {
    color: #ffeb3b !important;
    background: transparent !important;
  }
}

/* ==========================================================================
   BLOCK LIÊN HỆ CUỐI BÀI VIẾT (TỐI ƯU TOÀN DIỆN CHO CẢ PC & MOBILE)
   ========================================================================== */
.article-contact-box,
.entry-content .contact-card,
.entry-content .article-contact-box {
  display: block !important;
  flex-direction: column !important;
  background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%) !important;
  border: 1.5px solid #fecdd3 !important;
  border-top: 4px solid #dc2626 !important;
  border-radius: 12px !important;
  padding: 26px 28px !important;
  margin: 36px 0 24px 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}

.article-contact-box .contact-box-title,
.entry-content .contact-card h3,
.entry-content .article-contact-box h3 {
  color: #9f1239 !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin: 0 0 10px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.article-contact-box .contact-box-desc,
.article-contact-box .contact-box-subtitle,
.entry-content .contact-card > p:first-of-type,
.entry-content .article-contact-box > p:first-of-type {
  color: #475569 !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 0 auto 20px auto !important;
  max-width: 820px !important;
  display: block !important;
  text-align: center !important;
}

/* Khối nút bấm Hotline & Zalo */
.article-contact-box .contact-box-actions,
.article-contact-box .contact-actions-row,
.entry-content .contact-card .contact-box-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 18px 0 24px 0 !important;
  width: 100% !important;
}

.article-contact-box .contact-box-btn,
.article-contact-box .btn-call,
.article-contact-box .btn-action-call,
.article-contact-box .btn-zalo,
.article-contact-box .btn-action-zalo,
.entry-content .contact-card .contact-box-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  transition: all 0.25s ease !important;
}

.article-contact-box .btn-call,
.article-contact-box .btn-action-call,
.entry-content .contact-card .btn-call {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.15rem !important;
  padding: 13px 30px !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35) !important;
}

.article-contact-box .btn-call:hover,
.article-contact-box .btn-action-call:hover,
.entry-content .contact-card .btn-call:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.45) !important;
  color: #ffffff !important;
}

.article-contact-box .btn-zalo,
.article-contact-box .btn-action-zalo,
.entry-content .contact-card .btn-zalo {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  padding: 13px 26px !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.article-contact-box .btn-zalo:hover,
.article-contact-box .btn-action-zalo:hover,
.entry-content .contact-card .btn-zalo:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;
  color: #ffffff !important;
}

/* Lưới thông tin chi nhánh & địa chỉ 2 cột trên PC */
.article-contact-box .contact-box-info-grid,
.article-contact-box .contact-info-grid,
.entry-content .contact-card .contact-box-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px 24px !important;
  text-align: left !important;
  background: #ffffff !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 10px !important;
  padding: 18px 22px !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.article-contact-box .contact-info-item,
.article-contact-box .info-item,
.entry-content .contact-card .contact-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 0.94rem !important;
  color: #334155 !important;
  line-height: 1.55 !important;
}

.article-contact-box .contact-info-item strong,
.article-contact-box .info-item strong,
.entry-content .contact-card .contact-info-item strong {
  color: #0f172a !important;
}

/* Tương thích ngược: nếu dùng các thẻ p cũ trong .contact-card */
.entry-content .contact-card > p {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 6px 0 !important;
}

@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 {
    display: table-row-group !important;
  }

  .entry-content table:not(:has(iframe)) tr {
    display: table-row !important;
  }

  .entry-content table:not(:has(iframe)) th,
  .entry-content table: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 {
    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;
  }

  /* Tiêu đề bảng thead trên Mobile */
  .data-table thead th,
  .entry-content table:not(:has(iframe)):not(:has(h4)) thead th,
  .data-table:not(:has(thead)) > tbody > tr:first-child td,
  .entry-content table:not(:has(iframe)):not(:has(h4)):not(:has(thead)) > tbody > tr:first-child td {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    padding: 8px 3px !important;
    background: #8B0000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  /* Toàn bộ ô dữ liệu tbody trên Mobile: CÙNG CỠ CHỮ, CÙNG PADDING, ĐỒNG NHẤT 100% */
  .data-table tbody td,
  .entry-content table:not(:has(iframe)):not(:has(h4)) tbody td,
  .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;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
  }

  .data-table tbody td a.table-contact-link,
  .entry-content table td a.table-contact-link {
    font-size: 0.76rem !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .data-table tbody td a.table-zalo-link,
  .entry-content table td a.table-zalo-link {
    font-size: 0.74rem !important;
    padding: 4px 8px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    white-space: nowrap !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.table-header-merged-row td,
  .data-table tr.table-header-merged-row th {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }

  /* STT trên mobile */
  /* MẶC ĐỊNH MỌI BẢNG CÓ CỘT STT TRÊN MOBILE: CỘT STT LUÔN THU GỌN TỐI ĐA */
  .data-table.has-col-stt th:first-child,
  .data-table.has-col-stt td:first-child,
  .entry-content table.has-col-stt th:first-child,
  .entry-content table.has-col-stt td:first-child,
  .data-table th[data-col="stt"],
  .data-table td[data-col="stt"] {
    width: 38px !important;
    min-width: 35px !important;
    max-width: 42px !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 8px 2px !important;
    font-size: 0.78rem !important;
    box-sizing: border-box !important;
  }

  /* Bảng 2 cột có STT trên mobile */
  .data-table.table-cols-2.has-col-stt th:nth-child(2),
  .data-table.table-cols-2.has-col-stt td:nth-child(2),
  .data-table.has-col-stt tr th:nth-child(2)[colspan],
  .data-table.has-col-stt tr td:nth-child(2)[colspan] {
    width: calc(100% - 50px) !important;
    padding: 8px 10px !important;
    text-align: left !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 (Chuyển sang thanh cuộn ngang độc lập chuẩn UX Mobile theo yêu cầu)
     ---------------------------------------------------- */
  .data-table.table-cols-4,
  .entry-content table.data-table.table-cols-4 {
    min-width: 500px !important;
    width: 500px !important;
    table-layout: auto !important;
  }

  .data-table.table-cols-4 tr th,
  .data-table.table-cols-4 tr td,
  .entry-content table.data-table.table-cols-4 tr th,
  .entry-content table.data-table.table-cols-4 tr td {
    box-sizing: border-box !important;
    overflow: visible !important;
    vertical-align: middle !important;
  }

  /* Cột 1: STT */
  .data-table.table-cols-4 tr td:nth-child(1),
  .data-table.table-cols-4 tr th:nth-child(1) {
    width: 46px !important;
    min-width: 42px !important;
    max-width: 50px !important;
    text-align: center !important;
    padding: 8px 4px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* Cột 2: Dòng xe / Model / Hạng mục */
  .data-table.table-cols-4 tr td:nth-child(2),
  .data-table.table-cols-4 tr th:nth-child(2) {
    width: 200px !important;
    min-width: 180px !important;
    text-align: left !important;
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }

  /* Cột 3: Độ cao / Tải trọng / Triệu chứng */
  .data-table.table-cols-4 tr th:nth-child(3),
  .data-table.table-cols-4 tr td:nth-child(3) {
    width: 114px !important;
    min-width: 105px !important;
    text-align: center !important;
    padding: 8px 6px !important;
    font-size: 0.8rem !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  /* Cột 4: Báo giá / Nút gọi */
  .data-table.table-cols-4 tr th:nth-child(4),
  .data-table.table-cols-4 tr td:nth-child(4) {
    width: 140px !important;
    min-width: 135px !important;
    text-align: center !important;
    padding: 8px 8px !important;
    font-size: 0.8rem !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  /* KHÓA CHẶT TIÊU ĐỀ TH MỌI BẢNG TRÊN MOBILE - TUYỆT ĐỐI KHÔNG BAO GIỜ ĐÈ CHỮ */
  .data-table thead th,
  .data-table thead td,
  .data-table tr.table-header-row th,
  .data-table tr.table-header-row td,
  .entry-content table thead th,
  .entry-content table tr.table-header-row th {
    font-size: 0.73rem !important;
    padding: 7px 3px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
  }

  /* ----------------------------------------------------
     5. BẢNG 5 CỘT TRỞ LÊN (Ưu tiên hiển thị thông số kỹ thuật & dòng xe thoáng rộng)
     ---------------------------------------------------- */
  .data-table.table-cols-5,
  .data-table.table-cols-6,
  .entry-content table[class*="table-cols-5"],
  .entry-content table[class*="table-cols-6"] {
    min-width: 740px !important;
    width: 740px !important;
    table-layout: fixed !important;
  }

  /* Bảng 5 cột KHÔNG có STT (no-col-stt, ví dụ Bảng 1: Xe nâng, Bảng 3: Kato & Nâng người) */
  /* Cột 1: Dòng xe / Thiết bị nâng hạ */
  .data-table.table-cols-5:not(.has-col-stt) th:nth-child(1),
  .data-table.table-cols-5:not(.has-col-stt) td:nth-child(1),
  .data-table.table-cols-5.no-col-stt th:nth-child(1),
  .data-table.table-cols-5.no-col-stt td:nth-child(1) {
    width: 155px !important;
    min-width: 145px !important;
    text-align: left !important;
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /* Cột 2: THÔNG SỐ KỸ THUẬT / TẢI TRỌNG (Cột người xem muốn đọc nhất - rộng rãi, số và chữ rõ nét) */
  .data-table.table-cols-5:not(.has-col-stt) th:nth-child(2),
  .data-table.table-cols-5:not(.has-col-stt) td:nth-child(2),
  .data-table.table-cols-5.no-col-stt th:nth-child(2),
  .data-table.table-cols-5.no-col-stt td:nth-child(2) {
    width: 155px !important;
    min-width: 145px !important;
    text-align: center !important;
    padding: 8px 8px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .data-table.table-cols-5:not(.has-col-stt) thead th:nth-child(2),
  .data-table.table-cols-5.no-col-stt thead th:nth-child(2) {
    color: #ffffff !important;
  }

  .data-table.table-cols-5:not(.has-col-stt) tbody td:nth-child(2),
  .data-table.table-cols-5.no-col-stt tbody td:nth-child(2) {
    color: #0f172a !important;
  }

  /* Cột 3: Đơn giá theo ca (8h) */
  .data-table.table-cols-5:not(.has-col-stt) th:nth-child(3),
  .data-table.table-cols-5:not(.has-col-stt) td:nth-child(3),
  .data-table.table-cols-5.no-col-stt th:nth-child(3),
  .data-table.table-cols-5.no-col-stt td:nth-child(3) {
    width: 155px !important;
    min-width: 150px !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }

  /* Cột 4: Đơn giá theo tháng / Dự án */
  .data-table.table-cols-5:not(.has-col-stt) th:nth-child(4),
  .data-table.table-cols-5:not(.has-col-stt) td:nth-child(4),
  .data-table.table-cols-5.no-col-stt th:nth-child(4),
  .data-table.table-cols-5.no-col-stt td:nth-child(4) {
    width: 155px !important;
    min-width: 150px !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }

  /* Cột 5: Liên hệ điều xe / Zalo */
  .data-table.table-cols-5:not(.has-col-stt) th:nth-child(5),
  .data-table.table-cols-5:not(.has-col-stt) td:nth-child(5),
  .data-table.table-cols-5.no-col-stt th:nth-child(5),
  .data-table.table-cols-5.no-col-stt td:nth-child(5) {
    width: 120px !important;
    min-width: 115px !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }

  /* Bảng 5 cột CÓ STT (has-col-stt, ví dụ Bảng 2: Xe cẩu tự hành) */
  .data-table.table-cols-5.has-col-stt {
    min-width: 685px !important;
    width: 685px !important;
    table-layout: fixed !important;
  }

  /* Cột 1: STT cực nhỏ gọn */
  .data-table.table-cols-5.has-col-stt th:nth-child(1),
  .data-table.table-cols-5.has-col-stt td:nth-child(1) {
    width: 38px !important;
    min-width: 35px !important;
    max-width: 42px !important;
    padding: 8px 2px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Cột 2: Loại xe cẩu tự hành */
  .data-table.table-cols-5.has-col-stt th:nth-child(2),
  .data-table.table-cols-5.has-col-stt td:nth-child(2) {
    width: 185px !important;
    min-width: 175px !important;
    text-align: left !important;
    padding: 8px 8px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /* Cột 3: Tải trọng cẩu / Thùng xe (CỘT THÔNG SỐ: Rộng rãi, chữ rõ ràng) */
  .data-table.table-cols-5.has-col-stt th:nth-child(3),
  .data-table.table-cols-5.has-col-stt td:nth-child(3) {
    width: 165px !important;
    min-width: 155px !important;
    text-align: center !important;
    padding: 8px 8px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .data-table.table-cols-5.has-col-stt thead th:nth-child(3) {
    color: #ffffff !important;
  }

  .data-table.table-cols-5.has-col-stt tbody td:nth-child(3) {
    color: #0f172a !important;
  }

  /* Cột 4: Báo giá theo ca / chuyến */
  .data-table.table-cols-5.has-col-stt th:nth-child(4),
  .data-table.table-cols-5.has-col-stt td:nth-child(4) {
    width: 155px !important;
    min-width: 150px !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }

  /* Cột 5: Kết nối tổng đài (Zalo) */
  .data-table.table-cols-5.has-col-stt th:nth-child(5),
  .data-table.table-cols-5.has-col-stt td:nth-child(5) {
    width: 120px !important;
    min-width: 115px !important;
    text-align: center !important;
    padding: 8px 4px !important;
  }

  .table-call-btn,
  .entry-content table .table-call-btn {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !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;
  }

  /* Block liên hệ cuối bài viết trên mobile */
  .article-contact-box,
  .entry-content .contact-card,
  .entry-content .article-contact-box {
    padding: 18px 14px !important;
    margin: 22px 0 16px 0 !important;
    border-radius: 10px !important;
  }
  .article-contact-box .contact-box-title,
  .entry-content .contact-card h3,
  .entry-content .article-contact-box h3 {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .article-contact-box .contact-box-desc,
  .entry-content .contact-card > p:first-of-type,
  .entry-content .article-contact-box > p:first-of-type {
    font-size: 0.88rem !important;
    margin-bottom: 14px !important;
  }
  .article-contact-box .contact-box-actions,
  .article-contact-box .contact-actions-row,
  .entry-content .contact-card .contact-box-actions {
    flex-direction: column !important;
    gap: 10px !important;
    margin: 12px 0 16px 0 !important;
  }
  .article-contact-box .btn-call,
  .article-contact-box .btn-action-call,
  .entry-content .contact-card .btn-call {
    width: 100% !important;
    font-size: 1.05rem !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }
  .article-contact-box .btn-zalo,
  .article-contact-box .btn-action-zalo,
  .entry-content .contact-card .btn-zalo {
    width: 100% !important;
    font-size: 0.95rem !important;
    padding: 11px 16px !important;
    box-sizing: border-box !important;
  }
  .article-contact-box .contact-box-info-grid,
  .article-contact-box .contact-info-grid,
  .entry-content .contact-card .contact-box-info-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px 14px !important;
  }
  .article-contact-box .contact-info-item,
  .article-contact-box .info-item,
  .entry-content .contact-card .contact-info-item {
    font-size: 0.88rem !important;
  }
  .article-contact-box .btn-call,
  .entry-content .contact-card .btn-call {
    width: 100% !important;
    font-size: 1.05rem !important;
    padding: 11px 16px !important;
    box-sizing: border-box !important;
  }
  .article-contact-box .btn-zalo,
  .entry-content .contact-card .btn-zalo {
    width: 100% !important;
    font-size: 0.95rem !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }
  .article-contact-box .contact-box-info-grid,
  .entry-content .contact-card .contact-box-info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px 12px !important;
  }
  .article-contact-box .contact-info-item,
  .entry-content .contact-card .contact-info-item {
    font-size: 0.86rem !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, rgba(124, 10, 26, 0.94) 0%, rgba(153, 10, 32, 0.90) 50%, rgba(104, 8, 22, 0.95) 100%), url('/wp-content/uploads/2026/10/xecau-chuyen-dung-kato-du-an-dien-gio.webp') center/cover no-repeat !important;
  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 24s linear 2.5s 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: block !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;
  }

}


/* ==========================================================================
   DYNAMIC WIDGETS STYLING (ĐỒNG BỘ WP ADMIN)
   ========================================================================== */
.sidebar-widget .search-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.sidebar-widget .search-form input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.92rem;
  background: #f9fafb;
}
.sidebar-widget .search-form button,
.sidebar-widget .search-form input[type="submit"] {
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.sidebar-widget .search-form button:hover,
.sidebar-widget .search-form input[type="submit"]:hover {
  background: #990a20;
}

.sidebar-widget.widget_categories ul,
.sidebar-widget .widget_categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-widget.widget_categories li a,
.sidebar-widget .widget_categories li a {
  color: #1e293b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #e2e8f0;
  transition: all 0.2s;
  font-weight: 600;
}
.sidebar-widget.widget_categories li a:hover,
.sidebar-widget .widget_categories li a:hover {
  color: var(--color-primary);
  padding-left: 6px;
}

.sidebar-widget.widget_recent_entries ul,
.sidebar-widget .widget_recent_entries ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar-widget.widget_recent_entries li,
.sidebar-widget .widget_recent_entries li {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
}
.sidebar-widget.widget_recent_entries li a,
.sidebar-widget .widget_recent_entries li a {
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  display: block;
  margin-bottom: 4px;
}
.sidebar-widget.widget_recent_entries li a:hover,
.sidebar-widget .widget_recent_entries li a:hover {
  color: var(--color-primary);
}
.sidebar-widget.widget_recent_entries .post-date {
  font-size: 0.8rem;
  color: #94a3b8;
}

.sidebar-widget.widget_media_image img,
.sidebar-widget .widget_media_image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.sidebar-widget .textwidget {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
}
.sidebar-widget .textwidget a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  display: block;
  padding: 4px 0;
  transition: all 0.2s;
}
.sidebar-widget .textwidget a:hover {
  color: var(--color-secondary);
  padding-left: 4px;
}

/* Footer Dynamic Widgets */
.footer-widget .footer-widget-title,
.footer-widget h4, .footer-widget h3 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 8px;
}
.footer-widget .footer-widget-title::after,
.footer-widget h4::after, .footer-widget h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 3px;
  background: var(--color-secondary);
}

.footer-widget .textwidget {
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.65;
}
.footer-widget .textwidget a {
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.2s;
  display: block;
  margin-bottom: 6px;
}
.footer-widget .textwidget a:hover {
  color: var(--color-secondary);
  padding-left: 4px;
}
.footer-widget .textwidget strong {
  color: #ffffff;
  display: block;
  margin-bottom: 6px;
}
.footer-widget .textwidget img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin-top: 10px;
}
.footer-widget .textwidget iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 250px !important;
  border-radius: 8px;
  border: none !important;
}


/* ==========================================================================
   ENHANCEMENTS: FOOTER STRAIGHT COLUMN ALIGNMENT & MAP & IMAGE CAROUSEL
   ========================================================================== */
.footer-contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}

.footer-contact-item > span,
.footer-contact-item .contact-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.footer-contact-item strong,
.footer-contact-item .contact-lbl {
  display: inline-block !important;
  width: 95px !important;
  min-width: 95px !important;
  max-width: 95px !important;
  color: #ffb800 !important;
  flex-shrink: 0 !important;
  font-weight: 700 !important;
}

.footer-contact-item .contact-val {
  flex: 1 !important;
  color: #e2e8f0 !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

.footer-map-box {
  width: 100% !important;
}

.footer-map-box iframe {
  width: 100% !important;
  height: 200px !important;
  border: 0 !important;
  border-radius: 8px !important;
  display: block !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.footer-map-address {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 8px !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
}

.video-slide-card {
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
}

.video-slide-card:hover .video-slide-title {
  color: var(--color-primary) !important;
  background: #fef2f2 !important;
}

.video-slide-thumb,
.video-slide-iframe {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #0f172a !important;
  overflow: hidden !important;
}

.video-slide-thumb img,
.video-slide-iframe img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.video-slide-card:hover .video-slide-thumb img,
.video-slide-card:hover .video-slide-iframe img {
  transform: scale(1.08) !important;
}

/* Desktop Footer Columns Optimization */
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.55fr 1fr 1.15fr 1.1fr !important;
    gap: 28px !important;
  }
}

.footer-contact-item {
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
}

.footer-contact-item strong,
.footer-contact-item .contact-lbl {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}

.footer-contact-item .contact-val {
  font-size: 0.84rem !important;
}

.footer-map-box iframe {
  width: 100% !important;
  height: 210px !important;
  background: #1e293b;
}

/* ==========================================================================
   VIDEO THI CÔNG RESPONSIVE GRID
   ========================================================================== */
.video-thicong-section {
  margin: 40px 0;
  padding-top: 20px;
  border-top: 2px dashed #cbd5e1;
}

.video-thicong-heading {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: var(--color-primary) !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
}

.video-thicong-heading .heading-line {
  display: inline-block !important;
  width: 6px !important;
  height: 26px !important;
  background: var(--color-primary) !important;
  border-radius: 3px !important;
}

.video-thicong-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px !important;
}

.video-thicong-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}

.video-thicong-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border-color: #cbd5e1 !important;
}

.video-card-title {
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 !important;
  background: #f8fafc !important;
  border-bottom: 2px solid var(--color-primary) !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.video-card-iframe {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #0f172a !important;
}

.video-card-iframe iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

@media (max-width: 768px) {
  .video-thicong-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .video-thicong-heading {
    font-size: 1.2rem !important;
  }
  .video-card-title {
    font-size: 0.88rem !important;
    padding: 8px 10px !important;
  }
}
















/* ==========================================================================
   HEADER & HOMEPAGE REFINED PATCH (USER REQUESTED ADJUSTMENTS)
   - Menu PC: Spaced out evenly & airy (gap: 8px, padding: 6px 8px), yellow bold text
   - Branding & Hotline: Close to menu (no huge empty gaps), perfectly fits container
   - Site-description: Single line as original, no 2-line break
   - Mobile Header: Matches Image 2 (Logo + Title + Single-line subtitle + Toggle)
   - Mobile Menu: Submenu accordion on click (Matches Image 1 & user request)
   - Hero Slider: Perfect alignment with Content (x=113) and Sidebar (right=1313)
   ========================================================================== */

/* 1. HEADER CONTAINER & INNER LAYOUT */
.site-header .header-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Groups branding, menu, and hotline close together */
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 0 !important;
}

/* 2. SITE BRANDING (LOGO + TITLE + SINGLE-LINE DESCRIPTION) */
.site-branding {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.site-logo-icon {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.site-branding-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
}

.site-title {
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  color: #ffb800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Site-description: SINGLE LINE AS ORIGINAL, NO LINE WRAP */
.site-description {
  font-size: 0.40rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  display: block !important;
  text-align: center !important;
  margin-top: 2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  max-width: none !important;
  -webkit-line-clamp: unset !important;
}

/* 3. PRIMARY NAVIGATION (SPACED OUT AIRY & CLEAR ON PC) */
.primary-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.nav-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important; /* Giãn cách các mục menu rộng rãi, thoáng mắt */
  flex-wrap: nowrap !important;
}

.nav-menu > li {
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Menu items: Yellow text (#ffeb3b), larger font, clear padding for airy spacing */
.nav-menu > li > a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 8px !important; /* Đệm rộng thoáng, giãn cách đều */
  font-size: 0.69rem !important; /* Chữ to rõ chuẩn SEO, nổi bật */
  font-weight: 800 !important;
  color: #ffeb3b !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  letter-spacing: -0.1px !important;
  border-radius: 4px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
}

.nav-menu > li > a:hover {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Active Menu Item */
.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;
  background-color: rgba(0, 0, 0, 0.45) !important;
  box-shadow: inset 0 -3px 0 #ffeb3b, 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Desktop Submenu dropdown */
@media (min-width: 992px) {
  .nav-menu .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border-top: 3px solid #ffb800 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    border-radius: 0 0 6px 6px !important;
    list-style: none !important;
    padding: 6px 0 !important;
    z-index: 9999 !important;
    display: none !important;
  }

  .nav-menu li:hover > .sub-menu {
    display: block !important;
  }

  .nav-menu .sub-menu li a {
    display: block !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-shadow: none !important;
  }

  .nav-menu .sub-menu li a:hover {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    padding-left: 20px !important;
  }
}

/* 4. HEADER ACTIONS & HOTLINE BADGE (CLOSE TO MENU) */
.header-actions {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  flex-shrink: 0 !important;
}

.header-hotline-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(0, 0, 0, 0.32) !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 184, 0, 0.5) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.header-hotline-badge:hover {
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: #ffeb3b !important;
  transform: translateY(-1px) !important;
}

.hotline-title {
  font-size: 0.56rem !important;
  color: #ffeb3b !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}

.hotline-number {
  font-size: 0.80rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}

/* 5. RESPONSIVE FOR LAPTOPS (<= 1366px) */
@media (min-width: 992px) and (max-width: 1366px) {
  .header-inner {
    gap: 8px !important;
  }
  .site-title {
    font-size: 1.0rem !important;
  }
  .site-description {
    font-size: 0.38rem !important;
  }
  .nav-menu {
    gap: 5px !important;
  }
  .nav-menu > li > a {
    font-size: 0.65rem !important;
    padding: 5px 6px !important;
  }
  .header-hotline-badge {
    padding: 4px 7px !important;
  }
  .hotline-number {
    font-size: 0.76rem !important;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .header-inner {
    gap: 6px !important;
  }
  .site-title {
    font-size: 0.92rem !important;
  }
  .site-description {
    display: none !important;
  }
  .nav-menu {
    gap: 3px !important;
  }
  .nav-menu > li > a {
    font-size: 0.62rem !important;
    padding: 4px 4px !important;
  }
}

/* Large monitors: Extra airy spacing */
@media (min-width: 1600px) {
  .header-inner {
    gap: 16px !important;
  }
  .nav-menu {
    gap: 12px !important;
  }
  .nav-menu > li > a {
    font-size: 0.74rem !important;
    padding: 7px 11px !important;
  }
}

/* ==========================================================================
   6. MOBILE HEADER & ACCORDION MENU (< 992px)
   - Header Bar matches user image 2 exactly
   - Drawer & Submenu Accordion on Click matches user request & image 1
   ========================================================================== */
@media (max-width: 991px) {
  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 0 !important;
    width: 100% !important;
  }

  /* Exact match to Image 2: Logo + Title + Single line subtitle */
  .site-branding {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-decoration: none !important;
  }

  .site-logo-icon {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .site-branding-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .site-title {
    font-size: 1.10rem !important;
    font-weight: 900 !important;
    color: #ffb800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  }

  /* Subtitle on mobile: single line, crisp white - MATCHES IMAGE 2 */
  .site-description {
    display: block !important;
    font-size: 0.40rem !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: 8px !important;
  }

  /* Hide Hotline button from mobile header bar */
  .header-hotline-badge {
    display: none !important;
  }

  /* Hamburger toggle button */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .mobile-menu-toggle.is-active {
    background: #b91c1c !important;
    border-color: #ef4444 !important;
  }

  /* OFF-CANVAS MOBILE DRAWER MENU */
  .primary-navigation {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #7c0a1a !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 14px 16px 40px !important;
    overflow-y: auto !important;
    display: none !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    z-index: 9999 !important;
  }

  .primary-navigation.is-open {
    display: flex !important;
  }

  .nav-menu {
    flex-direction: column !important;
    width: 100% !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  .nav-menu > li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 10px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #ffeb3b !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
  }

  .nav-menu > li.current-menu-item > a {
    background-color: rgba(0, 0, 0, 0.45) !important;
    box-shadow: inset 0 -3px 0 #ffeb3b !important;
  }

  /* Arrow indicator for parent items */
  .nav-menu > li.menu-item-has-children > a::after {
    content: "▼" !important;
    font-size: 0.65rem !important;
    color: #ffeb3b !important;
    margin-left: 8px !important;
    transition: transform 0.25s ease !important;
  }

  .nav-menu > li.menu-item-has-children.sub-menu-open > a::after {
    transform: rotate(180deg) !important;
  }

  /* SUBMENU ACCORDION (FLOWS INLINE, NOT ABSOLUTE FLOATING) */
  .nav-menu .sub-menu {
    position: static !important;
    display: none !important; /* Only shows when sub-menu-open */
    width: 100% !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin: 2px 0 8px 0 !important;
    list-style: none !important;
  }

  .nav-menu > li.menu-item-has-children.sub-menu-open > .sub-menu {
    display: block !important;
    animation: fadeInSubmenu 0.25s ease-out !important;
  }

  @keyframes fadeInSubmenu {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .nav-menu .sub-menu li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .nav-menu .sub-menu li:last-child {
    border-bottom: none !important;
  }

  .nav-menu .sub-menu li a {
    display: block !important;
    padding: 10px 16px 10px 22px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: none !important;
    white-space: normal !important;
    transition: all 0.2s ease !important;
  }

  .nav-menu .sub-menu li a:hover,
  .nav-menu .sub-menu li a:active {
    color: #ffeb3b !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding-left: 28px !important;
  }
}

/* 7. HOMEPAGE SERVICES GRID */
.homepage-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin: 20px 0 35px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.homepage-services-grid > p,
.homepage-services-grid > br {
  display: none !important;
}

.homepage-services-grid .service-grid-card {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !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;
  height: 100% !important;
}

.homepage-services-grid .service-grid-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
  border-color: #b91c1c !important;
}

.homepage-services-grid .service-card-thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  height: 185px !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;
  transition: transform 0.4s ease !important;
}

.homepage-services-grid .service-grid-card:hover .service-card-thumb img {
  transform: scale(1.06) !important;
}

.homepage-services-grid .service-card-title-wrap {
  padding: 12px 10px !important;
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.homepage-services-grid .service-card-title {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #8B0000 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
  width: 100% !important;
}

.homepage-services-grid .service-grid-card:hover .service-card-title {
  color: #dc2626 !important;
}

@media (max-width: 900px) {
  .homepage-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  .homepage-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .homepage-services-grid .service-card-thumb {
    height: 120px !important;
  }
  .homepage-services-grid .service-card-title {
    font-size: 0.76rem !important;
  }
}

/* ==========================================================================
   8. HERO CAROUSEL: PERFECT ALIGNMENT WITH MAIN CONTAINER (1200PX CONTENT WIDTH)
   - Eliminates the 42px outer padding that indented the cards
   - First card aligns flush with .content-area (x = 113)
   - Fourth card aligns flush with .sidebar-area (right = 1313)
   - Arrows repositioned outside/edges so cards use full container width
   ========================================================================== */
.video-slider-container {
  width: 100% !important;
  max-width: var(--container-max-width, 1240px) !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.video-carousel-outer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.video-carousel-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 0 8px !important;
  box-sizing: border-box !important;
  container-type: inline-size !important;
}

.video-carousel-track {
  display: flex !important;
  gap: 14px !important;
  width: max-content !important;
  box-sizing: border-box !important;
}

/* On Desktop (min-width: 1024px), exactly 4 cards fit 1200px width with 3x 14px gaps */
@media (min-width: 1024px) {
  .video-slide-item {
    flex: 0 0 calc((100cqw - 42px) / 4) !important;
    width: calc((100cqw - 42px) / 4) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
}

/* NAVIGATION ARROWS */
.video-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.video-nav-arrow:hover {
  background: #ffb800 !important;
  color: #111827 !important;
  border-color: #ffb800 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Wide screens (>= 1360px): arrows float cleanly in red background outside cards */
@media (min-width: 1360px) {
  .video-nav-arrow.arrow-left {
    left: -46px !important;
  }
  .video-nav-arrow.arrow-right {
    right: -46px !important;
  }
}

/* Standard screens (1200px - 1359px): arrows sit half-in, half-out on the card boundary */
@media (min-width: 1200px) and (max-width: 1359px) {
  .video-nav-arrow.arrow-left {
    left: -19px !important;
  }
  .video-nav-arrow.arrow-right {
    right: -19px !important;
  }
}

/* Tablet screens (769px - 1199px): arrows overlay neatly inside cards */
@media (min-width: 769px) and (max-width: 1199px) {
  .video-nav-arrow.arrow-left {
    left: 8px !important;
  }
  .video-nav-arrow.arrow-right {
    right: 8px !important;
  }
}

/* Mobile: Hide arrows, touch swipe is active */
@media (max-width: 768px) {
  .video-nav-arrow {
    display: none !important;
  }
  .video-slider-container {
    padding: 0 10px !important;
  }
  .video-slide-item {
    flex: 0 0 calc((100cqw - 10px) / 2) !important;
    width: calc((100cqw - 10px) / 2) !important;
  }
}

/* ==========================================================================
   9. SLIDE BOXES: TANG KICH THUOC O ANH TO RO, NOI BAT THEO YEU CAU
   ========================================================================== */
.video-slide-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.video-slide-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.40) !important;
  border-color: #ffb800 !important;
}

.video-slide-title {
  padding: 10px 8px 9px !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-bottom: 2px solid #c8102e !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2px !important;
}

/* Tang ty le khung anh tu 16/9 len 4/3 giup anh to cao, hoanh trang */
.video-slide-thumb,
.video-slide-iframe {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important; /* Chieu cao tang tu 163px len ~218px */
  background: #0f172a !important;
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .video-slide-thumb,
  .video-slide-iframe {
    aspect-ratio: 16 / 10 !important;
  }
  .video-slide-title {
    font-size: 0.78rem !important;
    padding: 7px 6px !important;
  }
}

/* REMOVE SLIDE TITLES PER USER REQUEST */
.video-slide-title {
  display: none !important;
}

.video-slide-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.video-slide-thumb,
.video-slide-iframe {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  background: #0f172a !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

@media (max-width: 640px) {
  .video-slide-thumb,
  .video-slide-iframe {
    aspect-ratio: 16 / 10 !important;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   10. SUBPAGE HERO BANNER: BO VIEN NEN DO 2 BEN BANG CONTAINER
   - Nen do thu gon vua bang khung container (max-width: 1240px)
   - Bo tron viền góc 2 ben (border-radius: 14px), do bong sang trong
   - Can thang hang 100% voi cot noi dung va sidebar ben duoi
   ========================================================================== */
.subpage-hero-banner {
  width: 100% !important;
  max-width: var(--container-max-width, 1240px) !important;
  margin: 18px auto 24px auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 22px 24px !important;
  background: linear-gradient(135deg, rgba(124, 10, 26, 0.96) 0%, rgba(153, 10, 32, 0.92) 50%, rgba(104, 8, 22, 0.96) 100%), 
              url('/wp-content/uploads/2026/10/xecau-chuyen-dung-kato-du-an-dien-gio.webp') center/cover no-repeat !important;
  border: 1px solid rgba(255, 184, 0, 0.35) !important;
  border-bottom: 3px solid var(--color-secondary, #ffb800) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22) !important;
  box-sizing: border-box !important;
}

.subpage-banner-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1260px) {
  .subpage-hero-banner {
    margin: 14px 16px 20px 16px !important;
    width: calc(100% - 32px) !important;
  }
}

@media (max-width: 991px) {
  .subpage-hero-banner {
    margin: 10px 10px 16px 10px !important;
    width: calc(100% - 20px) !important;
    padding: 16px 14px !important;
    border-radius: 10px !important;
  }
  .subpage-banner-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   11. DESKTOP HERO SECTION: THÔNG THOÁNG, KHOÁNG ĐẠT CHUẨN ẢNH 2 (PC ONLY)
   - Tăng padding trên/dưới rộng rãi, hết cảm giác bí bách
   - Khoảng cách giữa Tiêu đề, Mô tả và Hàng KCN thoáng mắt
   - Tỷ lệ khung ảnh 16:10 thanh lịch, không quá cao, bo viền 10px tinh tế
   - Đổ bóng và khoảng cách nút CTA/Dots cân đối
   - TRÊN MOBILE GIỮ NGUYÊN 100%
   ========================================================================== */
@media (min-width: 992px) {
  .video-carousel-section {
    padding: 38px 0 42px !important;
  }

  .hero-intro-banner {
    margin-bottom: 26px !important;
  }

  .hero-banner-h1 {
    font-size: 1.85rem !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.3 !important;
  }

  .hero-banner-desc {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    max-width: 960px !important;
    margin: 0 auto 18px auto !important;
    color: #f1f5f9 !important;
  }

  .hero-kcn-badge-row {
    gap: 10px !important;
  }

  .hero-kcn-badge {
    padding: 6px 14px !important;
    font-size: 0.80rem !important;
  }

  .video-carousel-outer {
    margin: 0 0 14px 0 !important;
  }

  .video-carousel-track {
    gap: 16px !important;
  }

  .video-slide-item {
    flex: 0 0 calc((100cqw - 48px) / 4) !important;
    width: calc((100cqw - 48px) / 4) !important;
  }

  .video-slide-card {
    border-radius: 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  }

  .video-slide-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45) !important;
    border-color: #ffb800 !important;
  }

  .video-slide-thumb,
  .video-slide-iframe {
    aspect-ratio: 16 / 10 !important; /* Tỷ lệ ngang thanh lịch chuẩn Ảnh 2, cao vừa vặn ~180px */
    border-radius: 8px !important;
  }

  .video-carousel-dots {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    gap: 10px !important;
  }

  .video-dot {
    width: 24px !important;
    height: 5px !important;
    border-radius: 4px !important;
  }

  .video-dot.active {
    width: 44px !important;
    background: #ffb800 !important;
  }

  .hero-cta-button-row {
    margin: 0 auto !important;
    gap: 18px !important;
  }

  .btn-hero-call,
  .btn-hero-zalo {
    padding: 12px 28px !important;
    font-size: 1.0rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
  }
}



/* ==========================================================================
   12. SỬA LỖI TOÀN DIỆN: SUBPAGE HEADER, HERO PC BUTTONS & MOBILE SLIDER
   - Gắn sát subpage header với thanh menu (triệt tiêu khoảng trắng thừa bên trên)
   - Tiêu đề căn giữa, mô tả hiển thị đủ 3 dòng chuẩn SEO, sạch mã caption
   - Ô TƯ VẤN & BÁO GIÁ NHANH thu nhỏ gọn gàng, vừa vặn tỷ lệ
   - Trang chủ PC: Nút Gọi & Chat Zalo kéo sát lại chân ảnh slider (hết cảm giác xa cách)
   - Trang chủ Mobile: Trượt mượt mà, khớp chuẩn xác 2 ảnh 100% không khuyết góc
   ========================================================================== */

/* 1. Subpage Header Banner: Gắn sát thanh menu, bo viền ăn khớp */
.subpage-hero-banner {
  margin: 0 auto 20px auto !important;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

@media (max-width: 1260px) {
  .subpage-hero-banner {
    margin: 0 16px 20px 16px !important;
    width: calc(100% - 32px) !important;
  }
}

@media (max-width: 991px) {
  .subpage-hero-banner {
    margin: 0 10px 16px 10px !important;
    width: calc(100% - 20px) !important;
  }
}

/* 2. Tiêu đề căn giữa, Mô tả 3 dòng chuẩn SEO, 5 Huy hiệu căn giữa */
.subpage-banner-content {
  text-align: center !important;
  flex: 1 1 auto !important;
}

.subpage-banner-title {
  text-align: center !important;
  margin-bottom: 8px !important;
}

.subpage-banner-desc {
  text-align: center !important;
  margin: 0 auto 14px auto !important;
  max-width: 900px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.6 !important;
  max-height: calc(1.6em * 3) !important;
}

.subpage-badges-row {
  justify-content: center !important;
}

/* 3. Ô TƯ VẤN & BÁO GIÁ NHANH thu nhỏ gọn gàng */
.subpage-quote-card {
  flex: 0 0 240px !important;
  max-width: 240px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
}

.quote-card-header {
  font-size: 0.82rem !important;
  margin-bottom: 2px !important;
  letter-spacing: 0 !important;
}

.quote-card-header svg {
  width: 13px !important;
  height: 13px !important;
}

.quote-card-sub {
  font-size: 0.68rem !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
  color: #475569 !important;
}

.quote-card-actions {
  gap: 6px !important;
}

.btn-quote-call,
.btn-quote-zalo {
  padding: 6px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

.btn-quote-call svg,
.btn-quote-zalo svg {
  width: 12px !important;
  height: 12px !important;
}

/* 4. Trang chủ PC: Khoảng cách giữa nút Gọi/Zalo kéo sát chân ảnh slider */
@media (min-width: 992px) {
  .video-carousel-outer {
    margin: 0 0 4px 0 !important;
  }
  .video-carousel-dots {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }
  .hero-cta-button-row {
    margin-top: 0 !important;
  }
}

/* 5. Trang chủ Mobile: Trượt siêu mượt, khớp 2 ảnh 100% không khuyết góc */
@media (max-width: 768px) {
  .video-carousel-wrapper {
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .video-carousel-track {
    gap: 8px !important;
  }

  .video-slide-item {
    flex: 0 0 calc((100cqw - 8px) / 2) !important;
    width: calc((100cqw - 8px) / 2) !important;
    box-sizing: border-box !important;
  }

  /* Chỉ snap vào ô số lẻ (1, 3, 5, 7) để trọn vẹn từng cặp 2 ảnh, không bị cắt khuyết ảnh tiếp theo */
  .video-slide-item:nth-child(2n+1) {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .video-slide-item:nth-child(2n) {
    scroll-snap-align: none !important;
  }
}



/* ==========================================================================
   13. FIX MOBILE QUOTE CARD & FLOATING ZALO ICON
   - Trên mobile: Ô TƯ VẤN & BÁO GIÁ NHANH căn giữa cân đối 100%, không bị lệch trái
   - Nút Zalo góc dưới màn hình hiển thị logo Zalo chuẩn nét, không bị vỡ/lệch
   ========================================================================== */

/* Nút Zalo nổi góc màn hình chuẩn sắc nét */
.circle-btn-zalo {
  background: #0068ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.circle-btn-zalo svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
}

@media (max-width: 640px) {
  .circle-btn-zalo svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Fix Mobile: Ô TƯ VẤN & BÁO GIÁ NHANH căn giữa 100% cân đối */
@media (max-width: 991px) {
  .subpage-banner-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .subpage-banner-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .subpage-quote-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 auto !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  }

  .quote-card-header {
    font-size: 0.94rem !important;
    margin-bottom: 4px !important;
    justify-content: center !important;
  }

  .quote-card-header svg {
    width: 16px !important;
    height: 16px !important;
  }

  .quote-card-sub {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }

  .quote-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .btn-quote-call,
  .btn-quote-zalo {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }
}


/* --------------------------------------------------------------------------
   14. REFINEMENTS: BACK TO TOP BUTTON, TIGHT SPACING PC, COMPACT MOBILE QUOTE
   - Header banner dính sát menu không khoảng cách
   - Mobile: Banner tràn viền 100% (không còn khoảng trắng 2 bên)
   - Ẩn post-meta-bar và thu gọn khoảng cách breadcrumb
   -------------------------------------------------------------------------- */
/* Nút quay về đầu trang */
.back-to-top-btn {
  position: fixed;
  right: 22px;
  bottom: 84px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1e293b;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  padding: 0;
}

.back-to-top-btn.is-visible {
  opacity: 0.92;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  opacity: 1;
  background: #b8000b;
  color: #ffb800 !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(184, 0, 11, 0.45);
}

.back-to-top-btn svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.back-to-top-btn:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .back-to-top-btn {
    right: 17px;
    bottom: 74px;
    width: 38px;
    height: 38px;
  }
  .back-to-top-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* PC & Subpage: Dính sát menu header, căn bằng 100% với container & ẩn post-meta-bar */
@media (min-width: 993px) {
  .subpage-hero-banner {
    margin: 0 auto 0 auto !important;
    width: calc(100% - 40px) !important;
    max-width: 1200px !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .site-main.page-wrapper {
    padding-top: 0 !important;
  }
  body.home .site-main.page-wrapper {
    padding-top: 0 !important;
  }
  body.home .tn-quick-quote-bar {
    margin-top: 0 !important;
    border-radius: 8px !important;
  }

  /* PC: Breadcrumb dính sát Header Banner, dính sát Báo Giá Nhanh */
  .breadcrumb-trail {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .breadcrumb-trail + .tn-quick-quote-bar,
  .breadcrumb-trail ~ .tn-quick-quote-bar {
    margin-top: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 1px dashed #e2e8f0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    margin-bottom: 20px !important;
  }
}

.post-header,
.post-meta-bar {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Mobile: Banner tràn viền 100% (không còn khoảng trắng 2 bên), dính sát menu header */
@media (max-width: 991px) {
  .subpage-hero-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 3px solid var(--color-secondary, #ffb800) !important;
    padding: 12px 14px 14px 14px !important;
    box-sizing: border-box !important;
  }

  .subpage-banner-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .subpage-banner-title {
    margin-bottom: 6px !important;
    font-size: 1.15rem !important;
  }

  .subpage-banner-desc {
    margin: 0 auto 6px auto !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  .subpage-quote-card {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 310px !important;
    margin: 6px auto 0 auto !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  }

  .quote-card-header {
    font-size: 0.82rem !important;
    margin-bottom: 2px !important;
    justify-content: center !important;
  }

  .quote-card-header svg {
    width: 13px !important;
    height: 13px !important;
  }

  .quote-card-sub {
    font-size: 0.70rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  .quote-card-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .btn-quote-call,
  .btn-quote-zalo {
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 0.80rem !important;
    min-height: unset !important;
    height: auto !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }
}


/* --------------------------------------------------------------------------
   15. CONTACT PAGE STYLES (TRANG LIÊN HỆ CHUẨN LOCAL SEO & UI)
   -------------------------------------------------------------------------- */
.contact-page-wrapper {
  padding-bottom: 50px;
}

/* 1. Contact Info Cards Grid */
.contact-cards-section {
  margin-bottom: 28px;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.contact-cards-grid .contact-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-cards-grid .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

.card-hotline:hover { border-color: #e50914; }
.card-zalo:hover { border-color: #0068ff; }
.card-address:hover { border-color: #ca8a04; }
.card-tax:hover { border-color: #1e293b; }

.card-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-red { background: #fee2e2; color: #dc2626; }
.icon-zalo { background: #e0f2fe; color: #0284c7; }
.icon-gold { background: #fef3c7; color: #d97706; }
.icon-navy { background: #e2e8f0; color: #334155; }

.card-info {
  flex: 1;
  min-width: 0;
}

.card-tag {
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.tag-live { background: #dcfce7; color: #15803d; }
.tag-fast { background: #e0f2fe; color: #0284c7; }
.tag-gray { background: #f1f5f9; color: #475569; }
.tag-blue { background: #fef3c7; color: #b45309; }

.card-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 4px 0;
  text-transform: uppercase;
}

.card-main-val {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.25;
}

.card-main-val a.hotline-link {
  color: #dc2626;
  text-decoration: none;
  transition: color 0.2s ease;
}

.card-main-val a.hotline-link:hover {
  color: #991b1b;
}

.card-main-val a.zalo-link {
  color: #0068ff;
  text-decoration: none;
}

.card-main-val a.zalo-link:hover {
  text-decoration: underline;
}

.card-sub-val {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.35;
}

.card-sub-val a {
  color: #475569;
  text-decoration: none;
  font-weight: 600;
}

.card-sub-val a:hover {
  color: #dc2626;
}

.scroll-map-link {
  color: #ca8a04 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.card-desc {
  font-size: 0.78rem;
  color: #475569;
  margin: 0;
  line-height: 1.35;
}

.tax-code {
  color: #1e293b;
  letter-spacing: 0.5px;
}

/* 2. Main 2-Column Section: Form + Map & Depots */
.contact-main-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 24px;
  margin-bottom: 35px;
  align-items: start;
}

/* Form Card */
.contact-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.form-badge {
  display: inline-block;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.form-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.form-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 20px 0;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}

.form-row-2 .form-group {
  flex: 1;
  min-width: 0;
}

.form-group {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.form-label .required {
  color: #dc2626;
}

.form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.90rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #1e293b;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  background: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.form-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn-submit-contact {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-submit-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  color: #ffb800;
}

.form-privacy-note {
  font-size: 0.78rem;
  color: #94a3b8;
}

.form-status-msg {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.form-status-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

.form-status-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Sidebar Column: Map & Depots */
.contact-sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-map-card,
.contact-depots-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.map-card-header,
.depots-heading {
  margin: 0 0 12px 0;
}

.map-heading,
.depots-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.map-iframe-wrapper {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  margin-bottom: 10px;
}

.map-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.80rem;
  color: #64748b;
  flex-wrap: wrap;
}

.map-direction-btn {
  color: #dc2626;
  font-weight: 700;
  text-decoration: none;
}

.map-direction-btn:hover {
  text-decoration: underline;
}

.depots-subtitle {
  font-size: 0.82rem;
  color: #64748b;
  margin: 4px 0 14px 0;
}

.depot-item {
  border-left: 3px solid #ffb800;
  padding: 6px 0 6px 12px;
  margin-bottom: 12px;
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
}

.depot-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  background: #e2e8f0;
  color: #1e293b;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.depot-badge.badge-fast {
  background: #dcfce7;
  color: #15803d;
}

.depot-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 3px 0;
}

.depot-addr {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  line-height: 1.35;
}

/* 3. Commitments Section */
.contact-commitments-section,
.contact-faq-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.section-title-wrap {
  text-align: center;
  margin-bottom: 24px;
}

.sub-badge {
  display: inline-block;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.section-h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.gold-divider {
  width: 50px;
  height: 3px;
  background: #ffb800;
  margin: 0 auto;
  border-radius: 2px;
}

.commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.commitment-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.commitment-card:hover {
  transform: translateY(-3px);
  border-color: #ffb800;
}

.commitment-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.commitment-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 6px 0;
}

.commitment-desc {
  font-size: 0.80rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

/* 4. FAQ Accordion Section */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-accordion-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  transition: border-color 0.2s ease;
}

.faq-accordion-item.is-active {
  border-color: #b8000b;
  background: #ffffff;
}

.faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  outline: none;
}

.faq-question {
  font-size: 0.94rem;
  font-weight: 700;
  color: #1e293b;
}

.faq-accordion-item.is-active .faq-question {
  color: #b8000b;
}

.faq-toggle-icon {
  font-size: 1.25rem;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
}

.faq-accordion-item.is-active .faq-toggle-icon {
  color: #b8000b;
}

.faq-body {
  padding: 0 18px 14px 18px;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
}

.faq-body p {
  margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-main-grid {
    grid-template-columns: 1fr;
  }
  .commitments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-cards-grid .contact-card {
    padding: 14px 14px;
  }
  .contact-form-card {
    padding: 18px 16px;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .form-heading {
    font-size: 1.15rem;
  }
  .btn-submit-contact {
    width: 100%;
    justify-content: center;
  }
  .commitments-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .contact-commitments-section,
  .contact-faq-section {
    padding: 20px 16px;
  }
  .section-h2 {
    font-size: 1.15rem;
  }
}


/* ========================================================
   SERVICE INTENT QUICK ACTION CARDS (TRANG CHỦ MỚI)
   ======================================================== */
.service-intent-section {
    margin: 24px 0 32px 0;
}
.service-intent-intro {
    text-align: center;
    margin-bottom: 22px;
}
.service-intent-heading {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1e3a8a;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.service-intent-sub {
    font-size: 0.95rem;
    color: #4b5563;
    max-width: 680px;
    margin: 0 auto;
}
.service-intent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 1024px) {
    .service-intent-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}
@media (max-width: 640px) {
    .service-intent-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.intent-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}
.intent-card:hover {
    border-color: #f59e0b;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}
.intent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1e3a8a;
}
.intent-card.card-xenang::before { background: #2563eb; }
.intent-card.card-xecau::before { background: #d97706; }
.intent-card.card-xenangnguoi::before { background: #059669; }
.intent-card.card-suachua::before { background: #dc2626; }

.intent-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.intent-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.card-xenang .intent-card-icon { background: #eff6ff; color: #2563eb; }
.card-xecau .intent-card-icon { background: #fffbeb; color: #d97706; }
.card-xenangnguoi .intent-card-icon { background: #ecfdf5; color: #059669; }
.card-suachua .intent-card-icon { background: #fef2f2; color: #dc2626; }

.intent-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}
.intent-card-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}
.card-xenang .intent-card-badge { background: #dbeafe; color: #1e40af; }
.card-xecau .intent-card-badge { background: #fef3c7; color: #92400e; }
.card-xenangnguoi .intent-card-badge { background: #d1fae5; color: #065f46; }
.card-suachua .intent-card-badge { background: #fee2e2; color: #991b1b; }

.intent-card-desc {
    font-size: 0.86rem;
    color: #4b5563;
    line-height: 1.45;
    margin: 8px 0 14px 0;
    flex-grow: 1;
}
.intent-card-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: #374151;
}
.intent-card-specs li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.intent-card-specs li::before {
    content: '✔';
    color: #10b981;
    font-weight: 700;
    font-size: 0.75rem;
}

.intent-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}
.btn-intent-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 9px 12px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
    transition: all 0.2s ease;
}
.btn-intent-call:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    transform: translateY(-1px);
}
.btn-intent-zalo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #0068ff;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
    transition: all 0.2s ease;
}
.btn-intent-zalo:hover {
    background: #0052cc;
    transform: translateY(-1px);
}
.intent-link-more {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 6px;
    text-decoration: none;
}
.intent-link-more:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* Notice Bar So Sánh */
.demo-notice-bar {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.demo-notice-text {
    font-size: 0.92rem;
    color: #1e40af;
    line-height: 1.45;
    flex: 1 1 300px;
}
.demo-notice-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid #2563eb;
    color: #2563eb !important;
    font-weight: 700;
    font-size: 0.84rem;
    padding: 7px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.demo-notice-btn:hover {
    background: #2563eb;
    color: #ffffff !important;
}

/* Link Zalo trong Table */
.table-zalo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.table-zalo-link:hover {
    background: #2563eb;
    color: #ffffff !important;
}

/* =======================================================
   CSS CHO Ô TỔNG ĐÀI ĐIỀU XE CỨU HỘ 24/7 (CÂN ĐỐI 50% - 50% CẢ PC & MOBILE)
   ======================================================= */
.emergency-compact-card {
    background: linear-gradient(135deg, #fff7f7 0%, #ffffff 60%, #fff1f2 100%);
    border: 1.5px solid #e11d48;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 14px 0 20px 0;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.08);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.emergency-compact-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #e11d48, #f43f5e, #fb7185, #e11d48);
}
.compact-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.compact-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffe4e6;
    color: #be123c;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 12px;
    text-transform: uppercase;
}
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #e11d48;
    border-radius: 50%;
    display: inline-block;
}
.compact-eta {
    font-size: 0.76rem;
    color: #059669;
    font-weight: 700;
}
.compact-headline {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #9f1239 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}
.compact-sub {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

/* 2 NÚT BẤM CÂN ĐỐI 50% - 50% TRÊN MỌI THIẾT BỊ */
.compact-buttons {
    display: flex;
    gap: 10px;
    align-items: stretch;
    width: 100%;
}
.btn-call-compact,
.btn-zalo-compact {
    flex: 1 1 0 !important;
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}
.btn-call-compact {
    background: linear-gradient(135deg, #c8102e 0%, #a00c24 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(200, 16, 46, 0.28) !important;
    border: 1px solid #a00c24 !important;
}
.btn-call-compact:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(200, 16, 46, 0.38) !important;
}
.btn-zalo-compact {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25) !important;
    border: 1px solid #0369a1 !important;
}
.btn-zalo-compact:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(2, 132, 199, 0.35) !important;
}

@media (max-width: 480px) {
    .btn-call-compact,
    .btn-zalo-compact {
        font-size: 0.85rem !important;
        padding: 9px 6px !important;
        gap: 5px !important;
    }
}

/* =======================================================
   BẢNG GIÁ DỊCH VỤ CỨU HỘ
   DESKTOP: BẢNG 4 CỘT CHUẨN
   MOBILE: THẺ CARD RÕ RÀNG 100%
   ======================================================= */
.desktop-pricing-table,
.entry-content table.desktop-pricing-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 24px 0 !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid #e2e8f0 !important;
}
.desktop-pricing-table thead tr {
    background: #c8102e !important;
}
.desktop-pricing-table th,
.entry-content table.desktop-pricing-table th {
    padding: 12px 14px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    border: none !important;
}
.desktop-pricing-table td,
.entry-content table.desktop-pricing-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}
.desktop-pricing-table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}
.desktop-pricing-table td.price-col {
    color: #c8102e !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

/* Mobile Pricing Cards */
.mobile-pricing-list {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 20px 0;
}
.mobile-price-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    border-left: 3.5px solid #c8102e;
}
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #0f172a;
    line-height: 1.35;
}
.card-price {
    font-weight: 800;
    font-size: 0.88rem;
    color: #be123c;
    background: #fef2f2;
    border: 1px solid #fecdd3;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
}
.card-row {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.4;
    margin-top: 3px;
}
.card-row strong {
    color: #1e293b;
}

@media (max-width: 768px) {
    .desktop-pricing-table,
    .entry-content table.desktop-pricing-table {
        display: none !important;
    }
    .mobile-pricing-list {
        display: flex !important;
    }
}

/* Mobile: Breadcrumb-trail dính sát vào Header và Báo Giá Nhanh dính sát Breadcrumb */
@media (max-width: 992px) {
  .site-main.page-wrapper {
    padding-top: 0 !important;
  }
  .subpage-hero-banner {
    margin: 0 0 0 0 !important;
  }
  .breadcrumb-trail {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
  }
  .breadcrumb-trail + .tn-quick-quote-bar,
  .breadcrumb-trail ~ .tn-quick-quote-bar {
    margin-top: 0 !important;
    border-top: 1px dashed #e2e8f0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }
}

/* Triệt tiêu 100% lỗi tự động phóng to (auto-zoom) trên iOS Safari / iPhone khi chạm gõ vào bất kỳ ô nhập nào */
@media screen and (max-width: 992px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
}