/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

/* ===== BẢNG GIÁ XE – CSS DÙNG CHUNG ===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
  white-space: nowrap;
}

table th {
  background-color: #f8f8f8;
  font-weight: bold;
  color: #1a1a1a;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.call-zalo-fixed {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 16px;
  z-index: 9999;
  font-family: sans-serif;
  padding: 0 10px;
  max-width: 100%;
  box-sizing: border-box;
}

.call-zalo-fixed a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 50px;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: pulse 1.5s infinite;
  white-space: nowrap;               /* Giữ chữ trên 1 dòng */
  overflow: hidden;                  /* Ẩn phần tràn */
  text-overflow: ellipsis;           /* Hiển thị dấu ... nếu quá dài */
  max-width: 160px;                  /* Giới hạn chiều rộng */
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
}

.call-zalo-fixed .hotline {
  background-color: #C62828;
}

.call-zalo-fixed .zalo {
  background-color: #0050A0;
}
.call-zalo-fixed .inline-svg-icon svg {
  width: 20px;
  height: 20px;
}
/* Hiệu ứng */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Desktop: đặt bên phải */
@media (min-width: 1025px) {
  .call-zalo-fixed {
    left: auto;
    right: 20px;
    transform: none;
    max-width: none;
  }

  .call-zalo-fixed a {
    max-width: none;
    text-overflow: initial;
    overflow: visible;
  }
}
/* === ICON SVG INLINE — BẢN CHUẨN DUY NHẤT (không dùng class màu) === */
.inline-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom; /* đổi sang middle nếu cần */
  margin-right: 0.2em;
  line-height: 0; /* tránh dư khoảng theo dòng */
}
.inline-svg-icon svg {
  width: 1em;   /* scale đúng theo font-size wrapper -> khớp size px */
  height: 1em;
  display: inline-block;
  stroke: currentColor; /* mode=stroke & duotone */
  /* mode=fill/duotone: fill được PHP set trên SVG */
}

/* ===========================
   CONTACT FORM 7 — FULL CSS
   Gọn, đồng nhất, tự responsive
   =========================== */

:root{
  --cf7-accent:#FFD700;       /* Màu thương hiệu (vàng) */
  --cf7-text:#ffffff;         /* Chữ chính */
  --cf7-muted:#bdbdbd;        /* Chữ mờ/placeholder */
  --cf7-bg:#111111;           /* Nền form/popup tối (nếu dùng) */
  --cf7-field:#1f1f1f;        /* Nền ô nhập */
  --cf7-border:#3a3a3a;       /* Viền ô */
  --cf7-focus-shadow: rgba(255,215,0,.15);
  --cf7-error:#ff4d4d;
  --cf7-success:#28a745;
  --cf7-radius: 4px;
  --cf7-radius-btn: 6px;
  --cf7-gap-row: 12px;         /* Khoảng cách giữa các nhóm */
  --cf7-gap-in:12px;           /* Khoảng cách label ↔ control */
  --cf7-pad:16px 16px;        /* Padding mặc định cho control */
  --cf7-font: inherit;
}

/* Khung form & bố cục chung */
.wpcf7 form{
  display:flex; flex-direction:column; gap:var(--cf7-gap-row);
  color:var(--cf7-accent); font:var(--cf7-font);
}

/* Lưới & hàng */
.form-grid{ display:flex; flex-direction:column; gap:var(--cf7-gap-row); }
.form-row{ display:flex; flex-direction:column; gap:var(--cf7-gap-in); }

/* Label */
.form-row label{
  margin:0; font-weight:400; color:var(--cf7-accent);
  line-height:1.45; font-size:15px;
}

/* ====== Controls dạng văn bản ====== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 input[type="datetime-local"],
.wpcf7 input[type="time"],
.wpcf7 input[type="month"],
.wpcf7 input[type="week"],
.wpcf7 textarea{
  width:100%;
  padding:var(--cf7-pad);
  border:1px solid var(--cf7-border);
  border-radius:var(--cf7-radius);
  background:var(--cf7-field);
  color:var(--cf7-text);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  outline:0;
}
.wpcf7 textarea{ min-height:110px; resize:vertical; }
.wpcf7 ::placeholder{ color:var(--cf7-muted); opacity:.9; }
.wpcf7 input:disabled,
.wpcf7 textarea:disabled{ opacity:.6; cursor:not-allowed; }

.wpcf7 input:focus,
.wpcf7 textarea:focus{
  border-color:var(--cf7-accent);
  box-shadow:0 0 0 3px var(--cf7-focus-shadow);
  background:#232323;
}

/* Ẩn spinner number (tuỳ chọn) */
.wpcf7 input[type=number]::-webkit-outer-spin-button,
.wpcf7 input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.wpcf7 input[type=number]{ -moz-appearance:textfield; }

/* ====== Select (custom arrow) ====== */
.wpcf7 select{
  width:100%;
  padding:var(--cf7-pad);
  border:1px solid var(--cf7-border);
  border-radius:var(--cf7-radius);
  background:var(--cf7-field);
  color:var(--cf7-text);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:16px 16px;
  padding-right:44px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wpcf7 select:focus{ border-color:var(--cf7-accent); box-shadow:0 0 0 3px var(--cf7-focus-shadow); }
.wpcf7 select option{ background:#000; color:#fff; }

/* ====== Checkbox & Radio ====== */
/* Mặc định dùng accent-color: gọn & đồng bộ */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"]{
  accent-color: var(--cf7-accent);
  width:18px; height:18px; margin:0 8px 0 0;
  transform:translateY(2px);
  cursor:pointer;
}

/* Bố cục danh sách lựa chọn */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio{
  display:flex; flex-wrap:wrap; gap:15px 18px;
}
.wpcf7 .wpcf7-list-item{
  display:flex; align-items:center; gap:12px;
  margin:0; /* CF7 có margin mặc định */
}
.wpcf7 .wpcf7-list-item label{
  display:flex; align-items:center; gap:8px;
  color:var(--cf7-text); font-weight:500; font-size:17px;
}

/* ====== File Upload ====== */
.wpcf7 input[type="file"]{
  width:100%;
  padding:10px 12px;
  border:1px dashed var(--cf7-border);
  border-radius:var(--cf7-radius);
  background:#171717;
  color:var(--cf7-text);
  cursor:pointer;
}
.wpcf7 input[type="file"]:focus{ border-color:var(--cf7-accent); box-shadow:0 0 0 3px var(--cf7-focus-shadow); }

/* ====== Range Slider ====== */
.wpcf7 input[type="range"]{
  width:100%; appearance:none; height:4px; background:#2a2a2a; border-radius:999px;
}
.wpcf7 input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--cf7-accent); border:2px solid #000; cursor:pointer;
}
.wpcf7 input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--cf7-accent); border:2px solid #000; cursor:pointer;
}

/* ====== Submit Buttons ====== */
/* Fallback nếu ai đó còn dùng [submit "..."] */
.wpcf7 input[type="submit"]{
  display:inline-block; width:100%;
  padding:22px 18px; border:0; border-radius:var(--cf7-radius-btn);
  background:var(--cf7-accent); color:#000; font-weight:700; cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
  font-size: 20px;
}
.wpcf7 input[type="submit"]:hover{ filter:brightness(.97); }
.wpcf7 input[type="submit"]:active{ transform:translateY(1px); }
.wpcf7 input[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }

/* Nút <button> có icon (khuyên dùng) */
.btn-with-icon{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:22px 18px;
  border:0; border-radius:var(--cf7-radius-btn);
  background:var(--cf7-accent); color:#000; font-weight:700; cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
  font-size: 20px;
}
.btn-with-icon:hover{ filter:brightness(.97); }
.btn-with-icon:active{ transform:translateY(1px); }
.btn-with-icon:disabled{ opacity:.6; cursor:not-allowed; }
.btn-with-icon .inline-svg-icon{ line-height:0; }
.btn-with-icon .inline-svg-icon svg{ width:1em; height:1em; }

/* Spinner của CF7 sát nút */
.wpcf7 .ajax-loader{ margin-left:8px !important; position:relative; top:2px; }

/* ====== Thông điệp phản hồi & lỗi ====== */
.wpcf7-response-output{
  margin-top:8px; padding:10px 12px;
  border-radius:8px; border:1px solid var(--cf7-accent);
  background:rgba(255,215,0,.10); color:var(--cf7-accent); font-size:13px;
}
.wpcf7-not-valid-tip{ color:var(--cf7-error); font-size:12px; margin-top:4px; }
.wpcf7 form.invalid .wpcf7-response-output{
  border-color:var(--cf7-error);
  background:rgba(255,77,77,.08); color:#ffb3b3;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--cf7-success);
  background:rgba(40,167,69,.08); color:#b9f6ca;
}

/* ====== A11y: focus-visible rõ ràng ====== */
.wpcf7 a:focus-visible,
.wpcf7 button:focus-visible,
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible{
  outline:2px solid var(--cf7-accent);
  outline-offset:2px;
}

/* Tùy chọn: nhóm theo hàng ngang (radio/checkbox inline) */
.form-row.inline .wpcf7-checkbox,
.form-row.inline .wpcf7-radio{ flex-wrap:nowrap; gap:14px; }

/* Tùy chọn: input kèm prefix/suffix (nhóm hai cột trong 1 row) */
.input-group{ display:flex; gap:8px; }
.input-group > *{ flex:1; }

/* Hỗ trợ giảm chuyển động */
@media (prefers-reduced-motion: reduce){
  .wpcf7 input, .wpcf7 textarea, .wpcf7 select,
  .btn-with-icon, .wpcf7 input[type="submit"]{ transition:none; }
}
/* ===== POPUP FORM (khôi phục tối giản) ===== */
.popup-overlay{
  position: fixed;
  inset: 0;                          /* top/right/bottom/left:0 */
  display: none;                     /* ẩn mặc định, mở bằng class */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  z-index: 100000;                   /* cao hơn mọi thứ */
}
.popup-overlay.is-open{              /* class để mở popup */
  display: flex;
  animation: popFade .2s ease forwards;
}

.popup-content{
  position: relative;
  width: min(92vw, 560px);
  max-height: 92vh;
  overflow: auto;                    /* nếu nội dung dài */
  background: #111;
  color: #fff;
  padding: 24px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* Nút đóng */
.popup-close{
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* CF7 bên trong popup vẫn full width */
.popup-content .wpcf7 form{ width: 100%; }

/* Hiệu ứng nhỏ */
@keyframes popFade{
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* (tuỳ chọn) khoá scroll nền khi mở popup */
body.modal-open{ overflow: hidden; }
/* Ngăn tràn ngang do box model */
.wpcf7 form,
.wpcf7 form * {
  box-sizing: border-box;
}

/* Phòng ngừa: không cho phần tử con phá vỡ chiều ngang */
.popup-content { overflow: auto; }
.wpcf7 input, .wpcf7 select, .wpcf7 textarea { max-width: 100%; display: block; }

/* Khi mở popup thì khóa scroll nền để không xuất hiện thanh kéo ngoài */
body.modal-open { overflow: hidden; }
/* 2 cột trên PC, tự về 1 cột trên mobile */
.input-group{
  display:flex;
  flex-direction:column; /* mobile */
  gap:16px;
}
@media (min-width: 768px){
  .input-group{ flex-direction:row; }
  .input-group .form-row{ flex:1; } /* chia đôi đều nhau */
}

/* ===== CĂN GIỮA ẢNH ===== */
.aligncenter,
.wp-block-image img.aligncenter,
.woocommerce div.product div.images img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea,
  .wpcf7 select {
    font-size: 14px;
    padding: 10px 14px;
  }
  .popup-content {
    padding: 20px 15px;
  }
}
@media (max-width: 480px) {
  .wpcf7 .wpcf7-radio {
    justify-content: flex-start;
    gap: 12px 20px;
  }
  .wpcf7 .wpcf7-radio label {
    font-size: 14px;
    gap: 5px;
  }
  .wpcf7 input[type="radio"] {
    width: 16px;
    height: 16px;
  }
}
/* === SLIDER GALLERY FINAL – GALLERY CHI TIẾT BÀI VIẾT & SẢN PHẨM === */
.custom-gallery-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap;
  margin: 24px auto;
  max-width: 100%;
  box-sizing: border-box;
}

.custom-gallery-main {
  position: relative;
  flex: 1;
  max-width: 800px;
}

.custom-gallery-main img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.custom-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100px;
  max-height: 600px;
  overflow-y: auto;
}

.custom-gallery-thumbs img {
  width: 100%;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border 0.3s ease;
}

.custom-gallery-thumbs img.active,
.custom-gallery-thumbs img:hover {
  border-color: #FFD700;
}

/* Nút điều hướng */
.custom-gallery-main .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  z-index: 10;
  border-radius: 6px;
}

.custom-gallery-main .nav-arrow.prev { left: 10px; }
.custom-gallery-main .nav-arrow.next { right: 10px; }

/* MOBILE: thumbnail bên dưới */
@media (max-width: 768px) {
  .custom-gallery-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .custom-gallery-thumbs {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .custom-gallery-thumbs img {
    width: 80px;
  }
}
/* Phòng tràn ngang khi ảnh lớn/lazy */
.custom-gallery-wrapper, .custom-gallery-wrapper * { box-sizing: border-box; }
.custom-gallery-main img, .custom-gallery-thumbs img { max-width: 100%; height: auto; display: block; }

/* ===== SHADOW UTILS ===== */
.shadow-light  { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.shadow-medium { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.shadow-deep   { box-shadow: 0 10px 30px rgba(0,0,0,.20); }

/* BỎ BÓNG HOÀN TOÀN (kể cả drop-shadow & pseudo) */
.shadow-none,
img.shadow-none,
figure.shadow-none,
figure.shadow-none img,
.wp-block-image.shadow-none img {
  box-shadow: none !important;
  filter: none !important;
}

.shadow-none::before,
.shadow-none::after {
  box-shadow: none !important;
  filter: none !important;
  /* nếu theme vẽ bóng bằng background gradient trong pseudo */
  background: none !important;
}

/* Tuỳ chọn: chỉ bật bóng khi hover */
.shadow-hover:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  transform: translateY(-2px);
  transition: box-shadow .3s ease, transform .2s ease;
}

.rounded { border-radius: 6px; }
/* ================================
   H2: định nghĩa màu thương hiệu 1 lần
   TOC tự kế thừa qua biến --toc-title-color
================================ */
h2 {
  color: #002C5F;                    /* đổi theo màu thương hiệu của bạn */
  --toc-title-color: currentColor;   /* TOC lấy màu này */
}

/* ====== Offset & Smooth ====== */
:root { --toc-offset: 80px; }                 /* desktop */
@media (max-width: 768px){ :root{ --toc-offset: 64px; } }

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

.entry-content h2[id],
.single-post .site-main h2[id],
.single-product .site-main h2[id],
.page .site-main h2[id] {
  scroll-margin-top: var(--toc-offset);
}

@keyframes tocFlash { 0%{background:rgba(255,215,0,.25)} 100%{background:transparent} }
.toc-hit { animation: tocFlash 1.2s ease-out; }

/* ====== TOC – Light mặc định ====== */
:root {
  --toc-bg: #f9f9fb;
  --toc-border: #e5e7eb;
  --toc-text: #111827;
  --toc-link: var(--toc-title-color, #002C5F);
  --toc-accent: #FFD700;
  --toc-radius: 6px;
  --toc-max-height: 360px;
}

/* ====== TOC Box ====== */
.dv-toc{
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: var(--toc-radius);
  padding: 12px 16px;
  margin: 20px auto;
  color: var(--toc-text);
  font-size: 17px;
  line-height: 1.7;

  /* Hiển thị gọn gàng trên PC, full trên mobile */
  box-sizing: border-box;
  max-width: 680px;
  width: 100%;
}
.dv-toc details > summary{
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  margin-bottom: 12px;
  background: transparent;
  border: none;
  padding: 6px 0;

  color: var(--toc-title-color, var(--toc-link));
  transition: color .25s ease;
}
.dv-toc details > summary::-webkit-details-marker{ display:none; }
.dv-toc details > summary::after{
  content: "▾"; float: right; opacity: .85; transition: transform .2s;
}
.dv-toc details[open] > summary::after{ transform: rotate(180deg); }

.dv-toc .dv-toc__list{
  margin: 0;
  padding: 0 16px 12px 1.25rem;      /* gọn trên mobile */
  max-height: var(--toc-max-height, 360px);
  overflow: auto;
}
.dv-toc li,
.dv-toc a { word-break: break-word; overflow-wrap: anywhere; }
.dv-toc li { margin: 6px 0; }
.dv-toc a  { color: var(--toc-link); text-decoration: none; font-weight: 500; transition: color .25s ease; }
.dv-toc a:hover { color: var(--toc-accent); text-decoration: underline; }

@media (max-width: 768px){
  .dv-toc{ margin: 16px 12px; max-width: calc(100% - 24px); }
  .dv-toc ol, .dv-toc ul { list-style-position: outside; padding-left: 1.25rem; margin: 0; }
}

/* ====== Dark mode (nếu site dùng nền tối) ====== */
@media (prefers-color-scheme: dark){
  .dv-toc{
    --toc-bg:#0f0f0f; --toc-border:#2e2e2e; --toc-text:#f5f5f5;
    --toc-link: var(--toc-title-color, #FFD700); --toc-accent:#FFD700;
  }
}
/* Ép tối theo class .dark hoặc .theme-dark nếu bạn dùng */
.dark .dv-toc, .theme-dark .dv-toc{
  --toc-bg:#0f0f0f; --toc-border:#2e2e2e; --toc-text:#f5f5f5;
  --toc-link: var(--toc-title-color, #FFD700); --toc-accent:#FFD700;
}