/*
Theme Name: Volvo Đông Sài Gòn
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
@font-face {
  font-display: swap;
  font-family: VolvoNovum-Light;
  font-style: normal;
  font-weight: 400;
  src: url(PT-VolvoNovum-Light.aa0b4e3f.ttf) format("truetype");
}

*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

.box-overlay.dark .box-text, .box-shade.dark .box-text {
  text-shadow: none !important;
}

.header .header-wrapper {
  position: relative;
  width: 100%;
  background-color: #fff;
}

.text-lg {
  font-size: 2rem !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.button.is-outline {
  border: 1px solid #000 !important;
  color: #000 !important;
}

body {
  font-family: "VolvoNovum-Light", sans-serif;
}

#header .nav {
  font-weight: 700;
}

.contact-left .col-inner,
.contact-right .col-inner {
  height: 100%;
}
.text-dark {
  color: #000 !important;
}

/* Row: Đăng ký Trải nghiệm Xe */
.volvo-exp-row .col .col-inner {
  margin: 15px;
  width: auto;
}
/* Row: Đăng ký bảo dưỡng */
.volvo-maintenance-row .col .col-inner {
  margin: 15px;
}

/* Volvo form ở đặt lịch bão dưỡng */
.volvo-form-row {
  display: flex;
  gap: 15px;
}
.volvo-form-col {
  flex: 1;
}

/* Bảng giá xe 2026 */
.volvo-price-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-family: inherit;
  border: 1px solid #000000;
}
.volvo-price-table th,
.volvo-price-table td {
  padding: 15px 10px;
  border: 1px solid #000000;
  text-align: center;
  font-size: 1rem;
  color: #000000;
  text-transform: none;
}

/*Bảng giá bảo dưỡng */
.volvo-table-responsive {
  overflow-x: auto;
  background: #fff;
  max-width: 100%;
}
.volvo-maintenance-table {
  width: 100%;
  min-width: 1200px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1rem;
}
.volvo-maintenance-table th,
.volvo-maintenance-table td {
  border: 1px solid #000;
  padding: 10px 8px;
  text-align: center;
  color: #000000;
  white-space: nowrap;
  text-transform: none;
}
.volvo-maintenance-table td:first-child {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  border-right: 1px solid #000;
}
.volvo-maintenance-table thead th {
  font-weight: 700;
  border-bottom: 1px solid #000;
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
  z-index: 1;
}
.volvo-maintenance-table thead th:first-child {
  left: 0;
  z-index: 3;
  background-color: #f9f9f9;
  border-right: 1px solid #000;
}
/* Bảng giá bảo dưỡng chữ */
.volvo-caption {
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 10px;
  color: #000000;
  text-align: center;
}

/* Bảng giá phụ kiện */
.volvo-item-price-table th,
.volvo-item-price-table td {
  padding: 15px 10px;
  text-align: center;
  font-size: 1rem;
  color: #000000;
  text-transform: none;
}

.volvo-item-price-table.other-items th,
.volvo-item-price-table.other-items td {
  text-align: start;
}

.volvo-item-price-table p {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: block;
}
.volvo-item-title {
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 2rem;
  color: #000;
}
.volvo-item-note {
  color: #555;
  text-align: center;
}

#floating-contact {
  width: 250px;
  position: fixed;
  bottom: 200px;
  right: 10px;
  z-index: 10;
}

#floating-contact .icon-box {
  align-items: center;
}

#floating-contact .icon-box-img + .icon-box-text {
  display: none;
}

#floating-contact .icon-box-img:hover + .icon-box-text {
  display: block;
}
/* Liên hệ */
.contact-left h2 {
  line-height: 1.1;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.contact-left p {
  margin-bottom: 5px;
  font-size: 0.95rem;
}

/* Label */
.wpcf7-form label {
  color: #fff;
  font-weight: normal;
  font-size: 0.85rem;
  margin-bottom: 4px;
  display: block;
}

/* Input Fields & Selects */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
  height: 36px;
  line-height: normal;
  margin-bottom: 10px;
  box-shadow: none;
  font-size: 0.9rem;
  color: #333;
  outline: none;
}
.wpcf7-form textarea {
  height: 80px;
  padding-top: 8px;
}

/* Submit Button */
.wpcf7-not-valid-tip {
  background: transparent !important;
  color: #ff3b30 !important;
  padding: 0 !important;
  border: none !important;
  margin-top: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
}

/* Ẩn mũi tên validation */
.wpcf7-not-valid-tip::before,
.wpcf7-not-valid-tip::after {
  display: none !important;
  content: none !important;
}

/* Validation Box - No Padding to Prevent Overflow */
form.wpcf7-form .wpcf7-response-output,
form.wpcf7-form .wpcf7-validation-errors,
form.wpcf7-form .wpcf7-acceptance-missing {
  border: 1px solid #ffcc00 !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-radius: 4px;
  padding: 5px !important;
  font-size: 1.2rem;
  text-align: center;
  margin: 20px 0 0 0 !important;
}

/* Fix "Equal Height" preventing background expansion */
.row .col-inner {
  height: auto !important;
  min-height: 100%;
  padding-bottom: 20px;
}

/* Submit Button Container - For Spinner Positioning */
.wpcf7-form p:has(input[type="submit"]) {
  text-align: center;
  position: relative;
}

/* Submit Button - Keep Centered */
.wpcf7-form input[type="submit"] {
  background-color: #0d6efd;
  color: #fff;
  border-radius: 5px;
  font-weight: 500;
  font-size: 1rem;
  margin: 20px auto 0;
  padding: 0 10px;
  text-transform: none;
  position: relative;
}

/* Remove button pseudo-elements (circles) */
.wpcf7-form input[type="submit"]::before,
.wpcf7-form input[type="submit"]::after {
  content: none !important;
  display: none !important;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #0b5ed7;
}
/* remove spinner */
.wpcf7-spinner {
  display: none;
}

/*  Bài viết */
/* Container tin tức - giới hạn độ rộng */
.volvo-news-container {
  margin-bottom: 30px;
}

/* Override inline max-width trên row */
.volvo-news-container .row-small {
  max-width: 100vw !important;
}

.volvo-news-container .h5 {
  font-weight: 500 !important;
}
/* Buttons (Moved inline styles here) */
.volvo-news-container .button.secondary {
  background-color: #767f87 !important;
  font-weight: normal;
  padding: 1px 15px;
  font-size: 1.2rem;
  border-radius: 10px;
}
.volvo-news-container .news-nav {
  margin: 15px 0;
}
.volvo-news-container .news-nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.volvo-news-container .news-nav-buttons .nav-left,
.volvo-news-container .news-nav-buttons .nav-right {
  flex: 1;
}
.volvo-news-container .news-nav-buttons .nav-right {
  text-align: right;
}
/* Remove default margins to force full alignment */
.volvo-news-container .news-nav-buttons .nav-right .button {
  margin-right: 0;
}
.volvo-news-container .news-nav-buttons .nav-left .button {
  margin-left: 0;
}

.volvo-news-container .news-nav-top {
  margin-bottom: 20px;
}
.volvo-news-container .news-nav-bottom {
  margin-top: 20px;
}

/* Volvo Color Selector (Fixed Class Names & Logic) */
.volvo-ctrl {
  display: none !important;
}

.volvo-swatches {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
}
.volvo-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 1px solid #ddd;
  transition: transform 0.2s;
}

.color-image-container {
  position: relative;
  min-height: 200px;
}
.volvo-img {
  width: 100%;
  height: auto;
}

/* Volvo Color Selector (Generic Flex-Order Architecture) */
.volvo-wrapper-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  min-height: 50px; /* Space for controls */
}

/* Item Container - Flattened to participate in Flex */
.volvo-item {
  display: contents;
}

/* 1. Name (Order 1 - Left) */
.volvo-name {
  order: 1;
  margin-right: auto;
  display: none;
  font-size: 1.25rem;
  font-weight: bold;
}
/* Logic: Show Name when Input Checked */
.volvo-item input:checked ~ .volvo-name {
  display: block;
}

/* 2. Swatches (Order 2 - Right) */
.volvo-swatch {
  order: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  position: relative;
  transition: transform 0.2s;
}

/* Active Logic: Blue Line */
.volvo-item input:checked ~ .volvo-swatch::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: #0d6efd;
}

/* 3. Image (Order 3 - Bottom Row) */
.volvo-img {
  order: 3;
  width: 100%; /* Force new line */
  margin-top: 20px;
  display: none;
}
/* Logic: Show Image when Input Checked */
.volvo-item input:checked ~ .volvo-img {
  display: block;
}

/* Card Style - Bảng tin tức */
.volvo-news-container .volvo-card .col-inner {
  border: 1px solid #cacaca;
  padding: 25px 20px;
  height: 100%;
  border-radius: 5px;
}

.volvo-news-container .image-cover {
  padding-top: 60%;
  position: relative;
  overflow: hidden;
}
.volvo-news-container .image-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.volvo-news-container .box-text {
  padding: 0;
}
.volvo-news-container .box-text h5 {
  margin-top: 5px;
  font-size: 1.05em;
  font-weight: bold;
}
.volvo-news-container .box-text h5 a {
  color: #446084 !important;
  font-size: 1.1rem;
  line-height: 2rem;
}
.volvo-news-container .post-meta.date {
  font-size: 13px;
  color: #000;
  margin-bottom: 8px;
}
.volvo-news-container .post-meta.date img {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: middle;
}
.volvo-news-container .post-meta.date span {
  vertical-align: middle;
}

/* Custom Single Post Date Styling - Bảng tin tức */
.blog-single .entry-header .entry-meta .byline {
  display: none;
}

.blog-single .entry-header .entry-meta .posted-on {
  font-size: 0;
  color: #000;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  font-weight: normal;
}

.blog-single .entry-header .entry-meta .posted-on a,
.blog-single .entry-header .entry-meta .posted-on time {
  font-size: 13px; /* Restore size for date */
  color: #000;
}

.blog-single .entry-header .entry-meta .posted-on::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("/files/uploads/calendar3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}

/* Hide Divider on Single Post */
.blog-single .entry-header .is-divider {
  display: none;
}

/* Custom Single Post Navigation Buttons */
#nav-below .nav-previous a,
#nav-below .nav-next a {
  background-color: #ffffff;
  color: #555;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
  border: none;
  margin-bottom: 10px;
  border: 1px solid #000000;
}

#nav-below .nav-previous a:hover,
#nav-below .nav-next a:hover {
  background-color: #5a6268;
  color: #fff;
}

/* 1. CONTAINER & VIEWPORT */
/* Wrapper hides the 'too much' overflow from the slider */
.volvo-slider-wrapper {
  position: relative;
  padding: 0px 0% 5% 0%;
  overflow: hidden;
}

/* Viewport allows slides to be seen, but constrained by wrapper */
.volvo-main-slider .flickity-viewport {
  overflow: visible !important;
  width: 100% !important;
}

/* Slider Layout - Remove Column Padding */
.volvo-main-slider .row {
  width: 100%;
  margin: 0;
}
.volvo-main-slider .col {
  padding: 0 !important;
}

/* 2. CARD STYLE & LAYOUT (Fixed Heights for Stability) */
.volvo-slider-wrapper .volvo-car-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 15px; /* Spacing between cards */
}

/* 3. IMAGES (Fixed Height = Stable Dots) */
.volvo-slider-wrapper .card-image {
  width: 100%;
  aspect-ratio: 3/2; /* Fix: Locks shape to prevent vertical jumping */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.volvo-slider-wrapper .card-image img {
  max-height: 100%;
  width: auto !important;
  object-fit: contain;
  transition: transform 0.5s;
  opacity: 1 !important;
}

/* 4. SLIDER BULLETS (Make Active Bullet Blue) */
.volvo-main-slider .flickity-page-dots .dot.is-selected {
  background-color: #3b5a80 !important;
  border-color: #3b5a80 !important;
}
/* Move dots down */
.volvo-main-slider .flickity-page-dots {
  bottom: -0.3rem !important;
}
.volvo-main-slider .flickity-page-dots .dot {
  margin-bottom: -10px !important;
  border: 1px solid #919191; /* Default empty circle */
}
.volvo-main-slider .flickity-page-dots .dot:hover {
  border-color: #3b5a80;
}
.volvo-slider-wrapper .card-image:hover img {
  transform: scale(1.5);
}

/* 5. TABS - Style Blue Underline (Active) */
.nav-simple > li > a {
  position: relative;
} /* Ensure anchor is relative */
.nav-simple > li.active > a:after,
.nav-simple > li:hover > a:after {
  content: "" !important; /* REQUIRED for pseudo-element */
  display: block !important;
  background-color: #3b5a80 !important;
  height: 3px !important;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  opacity: 1 !important;
}
.nav-simple > li.active > a {
  color: #3b5a80 !important;
}

/* 6. LINKS */
.volvo-slider-wrapper .card-footer-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem; /* Move down */
  padding-left: 1rem; /* Squeeze in */
  padding-right: 1rem; /* Squeeze in */
  width: 100%;
}
.volvo-slider-wrapper .button-link {
  color: #1c6bba !important;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

/* 7. ARROWS (BOTTOM RIGHT - THIN - SIDE BY SIDE) */
.volvo-main-slider .flickity-prev-next-button {
  width: 44px;
  height: 44px;
  background: transparent !important;
  border: 1px solid #ddd !important;
  border-radius: 50%;
  top: 100% !important; /* Move below slider */
  bottom: auto !important;
  left: auto !important;
  color: #333 !important;
  opacity: 1 !important;
  transform: none;
}

/* Hide SVG */
.volvo-main-slider .flickity-prev-next-button svg {
  display: none !important;
}

/* Thin Text Arrows */
.volvo-main-slider .flickity-prev-next-button.previous::after {
  content: "\2039";
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 200 !important; /* Ultra Light */
  line-height: 1;
  padding-bottom: 4px;
  margin-right: 1px;
}
.volvo-main-slider .flickity-prev-next-button.next::after {
  content: "\203A";
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 200 !important; /* Ultra Light */
  line-height: 1;
  padding-bottom: 4px;
  margin-left: 1px;
}

/* Hover */
.volvo-main-slider .flickity-prev-next-button:hover {
  background: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
}

/* Specific Positions */
.volvo-main-slider .flickity-prev-next-button.next {
  right: 0 !important;
}
.volvo-main-slider .flickity-prev-next-button.previous {
  right: 55px !important; /* Left of Next button */
}

/* Gallery Car Style */

/* 1. Viewport Overflow - Show side slides */
.gallery-car .flickity-viewport {
  overflow: visible !important;
}

/* 2. Slide Layout & Sizing - Center Mode Fix */
/* Center the Left-Aligned slider by shifting origin */
.gallery-car .flickity-slider {
  left: 15% !important; /* (100% - 70%) / 2 */
}

.gallery-car .col {
  width: 70% !important;
  transition:
    opacity 0.5s,
    transform 0.5s;
  opacity: 0.4;
  transform: scale(0.95);
}

/* Active Center Slide */
.gallery-car .col.is-selected {
  opacity: 1 !important;
  transform: scale(1);
}

footer .ux-menu {
  display: flex;
  flex-direction: row !important;
  justify-content: center !important;
}

footer .absolute-footer {
  display: none;
}

footer .ux-menu .ux-menu-link {
  padding: 0 10px !important;
}

/* Custom CSS Tablet */
@media (max-width: 849px) {
  .volvo-maintenance-row .col .col-inner {
    margin: 0 !important;
    width: 100% !important;
  }
}

/* Custom CSS Mobile */
@media (max-width: 549px) {
  .volvo-news-container .row-small {
    max-width: 100vw !important;
  }
  .volvo-news-container .button.secondary {
    background-color: #767f87 !important;
    font-weight: normal;
    padding: 10px 10px;
    font-size: 1rem;
    border-radius: 10px;
  }

  .volvo-form-row {
    flex-direction: row;
    gap: 10px;
  }

  /* Compact Form on Mobile: Scale down from Desktop */
  .wpcf7-form label {
    margin-bottom: 2px;
    font-size: 0.85rem;
  }

  .volvo-exp-row .col .col-inner {
    margin: 0 !important;
    width: 100% !important;
  }

  /* Mobile: Maintenance Row - Remove Margin Spacing */
  .volvo-maintenance-row .col .col-inner {
    margin: 0 !important;
    width: 100% !important;
  }

  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="email"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="date"],
  .wpcf7-form select,
  .wpcf7-form textarea {
    height: 32px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    padding: 0 8px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .wpcf7-form textarea {
    height: 60px;
  }

  /* Mobile Validation Box - Viewport Limit */
  form.wpcf7-form .wpcf7-response-output,
  form.wpcf7-form .wpcf7-validation-errors,
  form.wpcf7-form .wpcf7-acceptance-missing {
    margin-top: 20px;
    font-size: 1rem;
    max-width: 100% !important;
  }

  .contact-left .col-inner,
  .contact-right .col-inner {
    margin: 0 !important;
    width: 100% !important;
  }
  /* Move dots down */
  .volvo-main-slider .flickity-page-dots {
    bottom: 0.7rem !important;
  }

  /* Center Arrows on Mobile */
  .volvo-main-slider .flickity-prev-next-button {
    display: block;
    margin-bottom: 0;
  }

  .volvo-main-slider .flickity-prev-next-button.previous {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-110%) !important; /* Left of center */
  }

  .volvo-main-slider .flickity-prev-next-button.next {
    right: auto !important;
    left: 50% !important;
    transform: translateX(10%) !important; /* Right of center */
  }

  /* Increase bottom padding to accommodate arrows */
  .volvo-slider-wrapper {
    padding-bottom: 100px !important;
    padding: 0px 10% 5% 10%;
  }

  /* Ensure blue line is centered on dot */
  .volvo-item input:checked ~ .volvo-swatch::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .gallery-car .flickity-slider {
    left: 0 !important; /* (100% - 70%) / 2 */
  }

  .gallery-car .col {
    width: 100% !important;
    transition:
      opacity 0.5s,
      transform 0.5s;
    opacity: 0.4;
    transform: scale(0.95);
  }


}