/*
 * MAIN.CSS – CHILD THEME
 * Brand:
 *  - Xanh: #002c5f
 *  - Đỏ:  #ec1c24
 */

:root {
  --brand-blue: #002c5f;
  --brand-red:  #ec1c24;
  --gray-border: #e5e7eb;
  --gray-text:  #0f172a;
}

/* =====================================================
 * 1. BẢNG GIÁ / TABLE – DÙNG CHUNG TOÀN SITE
 * ===================================================*/

/* Áp dụng cho bảng trong nội dung, Woo tabs, tóm tắt sản phẩm */
.entry-content table,
.post-content table,
.site-main table,
.woocommerce-Tabs-panel table,
.woocommerce div.product .summary table,
table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;

  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content table th,
.entry-content table td,
.post-content table th,
.post-content table td,
.site-main table th,
.site-main table td,
.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td,
.woocommerce div.product .summary table th,
.woocommerce div.product .summary table td,
table th,
table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
  border: 1px solid #ccc;
  word-break: break-word; /* xuống dòng khi từ dài */
}

.entry-content table thead th,
.post-content table thead th,
.site-main table thead th,
.woocommerce-Tabs-panel table thead th,
.woocommerce div.product .summary table thead th,
table thead th {
  background-color: #f8f8f8;
  font-weight: 600;
  color: #1a1a1a;
}

/* Bảng thông số riêng (cột 1 là label) */
.table-specs {
  text-align: center;
}

.table-specs td:first-child,
.table-specs th:first-child {
  text-align: left;
  font-weight: 600;
}

/* Nếu theme đang ép container tràn – cắt tràn nhẹ */
.entry-content,
.post-content,
.site-main {
  overflow-x: hidden;
}
/* =====================================================
 * 3. ICON SVG INLINE
 * ===================================================*/

.inline-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  margin-right: 0.2em;
}

.inline-svg-icon svg {
  width: 1.2em;
  height: 1.2em;
  stroke: currentColor;
}

/* =====================================================
 * 4. TOC – [toc] DẠNG TAB NGANG, BRAND
 * ===================================================*/

/* Cuộn mượt khi nhảy anchor */
html {
  scroll-behavior: smooth;
}

/* TOC ở trạng thái bình thường (nằm đúng block) */
.my-toc-inline {
  position: relative;
  background: #ffffff;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Khi JS thêm .is-fixed -> bám mép trên */
.my-toc-inline.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Ẩn scrollbar cho gọn */
.my-toc-inline::-webkit-scrollbar {
  height: 0;
}

.my-toc-inline ul {
  display: flex;
  margin: 0;
  padding: 0 12px;
  list-style: none;
  white-space: nowrap;
}

.my-toc-inline .my-toc-item {
  margin: 0;
}

.my-toc-inline .my-toc-item a {
  display: inline-block;
  padding: 10px 14px;
  font-size: 16px;
  text-decoration: none;
  color: var(--brand-blue);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Tab đang chọn + hover – dùng đỏ brand */
.my-toc-inline .my-toc-item a.is-active,
.my-toc-inline .my-toc-item a:hover {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
  font-weight: 600;
}

/* Mobile / tablet: vẫn bám mép trên */
@media (max-width: 1300px) {
  .my-toc-inline.is-fixed {
    top: 0;
  }
}

/* Khi nhảy tới H2 bằng anchor, chừa khoảng cho thanh TOC fixed */
h2[id] {
  scroll-margin-top: 80px; /* nếu còn bị che, tăng lên 90–100 */
}

/* =====================================================
 * 5. BỐ CỤC 2 CỘT – CỘT STICKY (CTA, FORM...)
 * ===================================================*/

.page-content {
  display: flex;
  gap: 24px;
}

/* Cột trái sticky (CTA, hotline, form) */
.sticky-cta {
  width: 300px; /* chỉnh theo thiết kế */
}

/* Cột phải chiếm phần còn lại */
.right-column {
  flex: 1;
}

/* Desktop: cho sticky */
@media (min-width: 992px) {
  .sticky-cta {
    position: sticky;
    top: 50px; /* chỉnh theo chiều cao Header/Menu */
    align-self: flex-start;
  }
}

/* Mobile: trở lại bình thường */
@media (max-width: 991px) {
  .sticky-cta {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
}
/* =====================================================
 * 8. MENU CHÍNH & MENU CON – TỐI GIẢN, NỀN TRẮNG
 * ===================================================*/

/* Link menu (top-level + submenu) – áp dụng cho cả block & classic */
.main-navigation a,
.primary-menu a,
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--brand-blue);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Hover: chỉ gạch chân, giữ nền trắng */
.main-navigation a:hover,
.primary-menu a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}

/* Mục đang active: cho nổi hơn một chút (màu đỏ brand) */
.main-navigation ul li.current-menu-item > a,
.primary-menu ul li.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--brand-red) !important;
  text-decoration: underline;
}

/* ======================
   SUBMENU – PANEL TRẮNG
   ====================== */

/* Khung submenu – block navigation (TT25) */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: #ffffff !important;       /* nền trắng */
  border: 1px solid var(--gray-border);
  border-radius: 3px;
  padding: 6px 0;
  min-width: 220px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

/* Bỏ margin thừa giữa các item trong submenu */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: 0 !important;
}

/* Link trong submenu – chiếm full dòng, dễ click */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 8px 18px;
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: none;
}

/* Hover trong submenu: chỉ gạch chân, không đổi nền */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: underline;
}

/* Khi menu cha đang mở (has child, expanded), giữ chữ xanh dễ đọc */
.wp-block-navigation .wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation-item__content {
  color: var(--brand-blue) !important;
}

/* ======================
   SUBMENU – CLASSIC MENU
   ====================== */

.main-navigation ul ul,
.primary-menu ul ul {
  background-color: #ffffff;
  border: 1px solid var(--gray-border);
  border-radius: 3px;
  padding: 6px 0;
  min-width: 220px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.main-navigation ul ul li,
.primary-menu ul ul li {
  margin: 0;
}

.main-navigation ul ul li a,
.primary-menu ul ul li a {
  display: block;
  padding: 8px 18px;
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: none;
}

/* Hover submenu (classic): cũng chỉ gạch chân */
.main-navigation ul ul li a:hover,
.primary-menu ul ul li a:hover {
  color: var(--brand-blue) !important;
  background: transparent !important;
  text-decoration: underline;
}
/* Giá niêm yết */
.core-price-main {
    font-size: 18px;
    font-weight: 400;
    color: var(--brand-red);   /* màu đỏ brand */
}

/* Giá gạch */
.core-price-regular {
    opacity: 0.6;
    margin-right: 8px;
}

/* Giá khuyến mãi */
.core-price-sale {
    color: var(--brand-red);
}

/* Trả góp – màu xanh brand */
.core-installment {
    display: inline-block;
    margin-top: 6px;
    font-size: 18px;
    font-weight: 400;
    color: var(--brand-blue);  /* màu xanh brand */
}
/* =========================================
 * BẢNG GIÁ XE – SHORTCODE [car_price_table]
 * =======================================*/

/* Khung chung */
.car-price-table-wrap {
  width: 100%;
  margin: 6px 0 22px;
}

/* ===================== DESKTOP – BẢNG ===================== */

.car-price-table-desktop {
  display: block;
}

.car-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 20px;
}

.car-price-table thead th {
  background: #ffffff;
  color: var(--brand-blue);
  font-weight: 400;
  padding: 8px 8px;
  border-bottom: 1px solid var(--gray-border);
  text-align: left;
  white-space: nowrap;
}

/* Ô dữ liệu */
.car-price-table tbody td {
  padding: 15px 10px;
  border-bottom: 1px solid var(--gray-border);
  vertical-align: middle;
}

/* Cột danh mục */
.car-price-table .col-cat {
  width: 300px;
}

.car-cat-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.car-cat-thumb-wrap {
  flex-shrink: 0;
}

/* Ảnh danh mục – desktop */
.car-cat-thumb-wrap img.car-cat-thumb {
  width: 180px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.car-cat-name {
  font-weight: 700;
  color: var(--gray-text);
  font-size: 20px;
}

/* Cột sản phẩm */
.car-price-table .col-product .car-product-link {
  text-decoration: none;
  color: var(--brand-blue);
  font-weight: 600;
}

.car-price-table .col-product .car-product-link:hover {
  text-decoration: underline;
}

/* Giá & trả góp */
.car-price-table .col-price {
  white-space: nowrap;
  font-weight: 400;
}

.car-price-table .col-installment {
  white-space: nowrap;
  font-size: 16px;
  color: #4b5563;
}

/* ===================== MOBILE – DANH SÁCH CARD ===================== */
/* Mặc định ẩn trên desktop */

.car-price-list-mobile {
  display: none;
}

/* =========================================
 * MOBILE < 768px
 * =======================================*/
@media (max-width: 767px) {

  /* Ẩn bảng, chỉ dùng dạng card */
  .car-price-table-desktop {
    display: none;
  }

  .car-price-list-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .car-cat-block {
    border: 1px solid var(--gray-border);
    border-radius: 10px;
    padding: 10px 8px;
    background: #f4f4f4;
  }

  .car-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  /* Ảnh danh mục – mobile */
  .car-cat-thumb-wrap img.car-cat-thumb {
    width: 120px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
  }

  .car-cat-name {
    font-weight: 700;
    color: var(--brand-blue);
    font-size: 22px;
  }

  .car-cat-products {
    margin-top: 22px;
  }

  .car-item {
    padding: 8px 0;
    border-top: 1px solid #e5e7eb;
  }

  .car-item:first-child {
    border-top: none;
  }

  .car-item-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
  }

  .car-item-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 2px;
  }

  .car-item-value {
    font-size: 16px;
  }

  .car-item-price .car-item-value {
    font-weight: 600;
  }

  .car-item-installment .car-item-value {
    font-size: 15px;
    color: #4b5563;
  }

  .car-item-name .car-product-link {
    text-decoration: none;
    color: var(--brand-blue);
    font-weight: 700;
  }

  .car-item-name .car-product-link:hover {
    text-decoration: underline;
  }

  /* Ẩn label "TRẢ GÓP TỪ" trên mobile để không lặp */
  .car-item-installment .car-item-label {
    display: none;
  }
}
/* =====================================================
 * LƯỚI DANH MỤC & SẢN PHẨM WOO – GRID CHUẨN
 * ===================================================*/

/* UL sản phẩm / danh mục: dùng grid, bỏ bullet, bỏ padding */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

/* Mỗi item (danh mục hoặc sản phẩm) là 1 card */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
  float: none !important;
  width: auto !important;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border-radius: 5px;
  padding: 5px 5px 12px;
  text-align: center;
  border: 1px solid #ffffff;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* Hover card */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover {
  transform: translateY(-2px);
  border-color: #d1d5db;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

/* Ảnh danh mục & sản phẩm trong grid */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product-category a img,
.woocommerce .product-category img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #ffffff;
  display: block;
  margin: 0 auto 4px;
}

/* Tiêu đề danh mục */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  margin: 6px 0 0;
  letter-spacing: 0.2px;
  color: var(--gray-text);
}

/* Tiêu đề sản phẩm */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-blue);
  margin: 4px 0 2px;
}

/* Ẩn số lượng sản phẩm trong danh mục */
.woocommerce ul.products li.product-category mark.count {
  display: none !important;
}

/* Giá trong grid (đã format bởi core_format_car_price) */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .core-price-main {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-red);
  margin: 2px 0 0;
}

/* Ẩn rating cho sạch mắt */
.woocommerce ul.products li.product .star-rating {
  display: none !important;
}

/* Ẩn nút Đọc tiếp / Add to cart trong lưới */
.woocommerce ul.products li.product .button {
  display: none !important;
}

/* Mobile: 2 cột, card thoáng hơn */
@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
  }

  .woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
    font-size: 18px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px;
  }
}

/* =====================================================
 * FIX TRÀN MÀN HÌNH TOÀN SITE + INLINE WIDTH
 * ===================================================*/

/* Mobile: xử lý mọi phần tử có width cố định trong nội dung */
@media (max-width: 767px) {

  /* Mọi thành phần trong nội dung post / page / danh mục / mô tả sản phẩm */
  .entry-content *,
  .term-description *,
  .woocommerce-product-details__short-description * {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Đè các thẻ có style width inline */
  .entry-content [style*="width"],
  .term-description [style*="width"],
  .woocommerce-product-details__short-description [style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Bảng có width inline – ép dạng block cuộn ngang */
  .entry-content table[style*="width"],
  .term-description table[style*="width"],
  .woocommerce-product-details__short-description table[style*="width"] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* FIGURE + WP BLOCK IMAGE / GROUP / TABLE có width px kéo tràn */
  .entry-content figure,
  .entry-content .wp-block-image,
  .entry-content .wp-block-table,
  .entry-content .wp-block-group,
  .term-description figure,
  .term-description .wp-block-image,
  .term-description .wp-block-table,
  .term-description .wp-block-group,
  .woocommerce-product-details__short-description figure,
  .woocommerce-product-details__short-description .wp-block-image,
  .woocommerce-product-details__short-description .wp-block-table,
  .woocommerce-product-details__short-description .wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ảnh bên trong: luôn ôm theo chiều ngang màn hình */
  .entry-content img,
  .term-description img,
  .woocommerce-product-details__short-description img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* =====================================================
 * FIX ẢNH CÓ CHÚ THÍCH (CAPTION) BỊ TRÀN
 * ===================================================*/

/* Khung caption do WordPress sinh ra */
.wp-caption,
figure.wp-caption {
  width: 100% !important;       /* bỏ width: XXXpx inline */
  max-width: 100% !important;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
}

/* Trường hợp có inline style width trong caption */
.wp-caption[style*="width"],
figure.wp-caption[style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ảnh bên trong caption */
.wp-caption img,
figure.wp-caption img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Chú thích dưới ảnh */
.wp-caption-text,
figure.wp-caption .wp-caption-text,
.wp-block-image figcaption {
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  margin-top: 4px;
  max-width: 100%;
}