@charset "UTF-8";
/* ==========================================================================
   TQE EXPRESS — giao diện public
   Nạp SAU assets/css/bootstrap.min.css (Bootstrap 5.3.2).
   Màu chủ đạo lấy từ logo Trần Quyên (#A3D060) — xem khối :root bên dưới.
   ========================================================================== */

/* ---------- Font Inter (tự host, variable font: 1 file / 1 subset) -------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/inter/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Bảng màu ------------------------------------------------------ */
:root {
  --tqe-primary: #46691A;       /* nút, link, thanh active */
  --tqe-primary-dark: #375213;  /* hover, nền đậm */
  --tqe-primary-darker: #2A3F0D;
  --tqe-accent: #A3D060;        /* đúng màu logo — badge, icon, highlight */
  --tqe-accent-dark: #7FB03A;
  --tqe-soft: #F2F8E8;          /* nền nhạt, callout */
  --tqe-soft-border: #CFE6A8;
  --tqe-dark: #1E293B;          /* top bar, footer */
  --tqe-darker: #0F172A;
  --tqe-body: #334155;
  --tqe-muted: #64748B;
  --tqe-border: #E2E8F0;
  --tqe-bg: #F8FAFC;

  /* Ghi đè biến Bootstrap: mọi .btn-primary / .text-primary / .bg-primary
     trong template tự động đổi sang xanh lá, không phải sửa class. */
  --bs-primary: #46691A;
  --bs-primary-rgb: 70, 105, 26;
  --bs-primary-text-emphasis: #2A3F0D;
  --bs-primary-bg-subtle: #F2F8E8;
  --bs-primary-border-subtle: #CFE6A8;
  --bs-link-color: #46691A;
  --bs-link-color-rgb: 70, 105, 26;
  --bs-link-hover-color: #375213;
  --bs-link-hover-color-rgb: 55, 82, 19;
  --bs-border-color: #E2E8F0;
  --bs-body-color: #334155;
  --bs-body-color-rgb: 51, 65, 85;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* .btn-warning / .text-warning trong demo = chỗ nhấn phụ → dùng màu logo */
  --bs-warning: #A3D060;
  --bs-warning-rgb: 163, 208, 96;
}

.btn-primary {
  --bs-btn-bg: var(--tqe-primary);
  --bs-btn-border-color: var(--tqe-primary);
  --bs-btn-hover-bg: var(--tqe-primary-dark);
  --bs-btn-hover-border-color: var(--tqe-primary-dark);
  --bs-btn-active-bg: var(--tqe-primary-darker);
  --bs-btn-active-border-color: var(--tqe-primary-darker);
  --bs-btn-disabled-bg: var(--tqe-primary);
  --bs-btn-disabled-border-color: var(--tqe-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--tqe-primary);
  --bs-btn-border-color: var(--tqe-primary);
  --bs-btn-hover-bg: var(--tqe-primary);
  --bs-btn-hover-border-color: var(--tqe-primary);
  --bs-btn-active-bg: var(--tqe-primary-dark);
  --bs-btn-active-border-color: var(--tqe-primary-dark);
  --bs-btn-disabled-color: var(--tqe-primary);
  --bs-btn-disabled-border-color: var(--tqe-primary);
}
.btn-warning {
  --bs-btn-bg: var(--tqe-accent);
  --bs-btn-border-color: var(--tqe-accent);
  --bs-btn-color: var(--tqe-primary-darker);
  --bs-btn-hover-bg: var(--tqe-accent-dark);
  --bs-btn-hover-border-color: var(--tqe-accent-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--tqe-accent-dark);
  --bs-btn-active-border-color: var(--tqe-accent-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--tqe-accent);
  --bs-btn-disabled-border-color: var(--tqe-accent);
  --bs-btn-disabled-color: var(--tqe-primary-darker);
}
.accordion {
  --bs-accordion-active-color: var(--tqe-primary-dark);
  --bs-accordion-active-bg: var(--tqe-soft);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tqe-accent-dark);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
}
.page-link {
  --bs-pagination-color: var(--tqe-primary);
  --bs-pagination-hover-color: var(--tqe-primary-dark);
  --bs-pagination-hover-bg: var(--tqe-soft);
  --bs-pagination-active-bg: var(--tqe-primary);
  --bs-pagination-active-border-color: var(--tqe-primary);
  --bs-pagination-focus-color: var(--tqe-primary-dark);
  --bs-pagination-focus-bg: var(--tqe-soft);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--tqe-body);
  background-color: #fff;
}

/* ---------- Thanh trên cùng ---------------------------------------------- */
.top-bar {
  background-color: var(--tqe-dark);
  font-size: .875rem;
}
.top-bar a {
  color: #fff;
  text-decoration: none;
}
.top-bar a:hover {
  color: var(--tqe-accent);
}

/* ---------- Thanh điều hướng --------------------------------------------- */
.navbar {
  box-shadow: 0 2px 15px rgba(0, 0, 0, .05);
  padding: .75rem 0;
}
.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--tqe-primary) !important;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.navbar-brand img {
  height: 44px;
  width: auto;
}
.navbar .nav-link {
  font-weight: 500;
  color: var(--tqe-dark);
  margin: 0 4px;
  border-radius: .5rem;
  padding: .5rem .75rem;
  transition: all .25s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--tqe-primary);
  background-color: var(--tqe-soft);
}
.navbar .dropdown-menu {
  border-color: var(--tqe-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
  border-radius: .75rem;
  padding: .5rem;
}
.navbar .dropdown-item {
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 500;
  padding: .5rem .75rem;
  white-space: normal;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--tqe-soft);
  color: var(--tqe-primary-dark);
}
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
/* Trong menu thu gọn: liệt kê luôn danh sách dịch vụ thay vì phải bấm mở */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    display: block;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 1.5rem;
    margin: 0;
  }
  .navbar .dropdown-item {
    color: var(--tqe-muted);
    font-size: .85rem;
  }
}

/* ---------- Hero trang chủ ----------------------------------------------- */
/* Ảnh bg_dichvu.jpg là hình xe trắng trên nền bản đồ chấm bi rất sáng — phủ màu
   trực tiếp lên sẽ mất hút. Nên hoà bằng multiply để thành hình chìm màu xanh,
   lật ngang cho xe nằm bên phải, tránh đè lên chữ và nút bấm bên trái. */
.hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* gói multiply trong khối, menu dính đè lên khi cuộn không phải hoà màu lại */
  background: linear-gradient(120deg, var(--tqe-primary-darker) 0%, var(--tqe-primary) 100%);
  color: #fff;
  padding: 90px 0 110px;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('../images/bg_dichvu.jpg') center/cover no-repeat;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right,
    rgba(46, 70, 17, .72) 0%, rgba(46, 70, 17, .30) 45%, transparent 75%);
}
.hero-section > .container {
  position: relative;
  z-index: 3;
}
.hero-section .lead {
  color: rgba(255, 255, 255, .85);
}

/* Ô tra cứu nổi đè lên hero */
.tracking-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: 2rem;
  margin-top: -60px;
  position: relative;
  z-index: 10;
}

/* ---------- Thẻ tính năng / dịch vụ -------------------------------------- */
.feature-card {
  border: 1px solid var(--tqe-border);
  border-radius: 12px;
  padding: 1.75rem;
  background: var(--tqe-bg);
  transition: all .3s ease;
  height: 100%;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, .08);
  border-color: var(--tqe-accent);
  background: #fff;
}
.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--tqe-soft);
  color: var(--tqe-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.feature-icon img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

/* ---------- Dải kêu gọi hành động ---------------------------------------- */
.cta-section {
  background: linear-gradient(135deg, var(--tqe-primary) 0%, var(--tqe-primary-dark) 100%);
  border-radius: 20px;
  color: #fff;
  padding: 3rem 2rem;
}

/* ---------- Banner đầu trang con ----------------------------------------- */
/* Banner trang con thấp nên dùng hoạ tiết bản đồ chấm bi làm nền, không dùng
   ảnh xe (bị cắt cụt ở dải hẹp) */
.page-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(120deg, var(--tqe-primary-darker) 0%, var(--tqe-primary) 100%);
  color: #fff;
  padding: 56px 0;
}
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/bg_vanchuyen.jpg') center/cover no-repeat;
  mix-blend-mode: multiply;
}
.page-banner > .container {
  position: relative;
  z-index: 2;
}

/* ---------- Bài viết ------------------------------------------------------ */
.article-header h1 {
  font-weight: 800;
  font-size: 2rem;
  color: var(--tqe-dark);
  line-height: 1.3;
}
.article-meta {
  font-size: .875rem;
  color: var(--tqe-muted);
  border-bottom: 1px solid var(--tqe-border);
  padding-bottom: 1rem;
}
.article-content {
  font-size: 1.05rem;
  line-height: 1.75;
}
.article-content h2 {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tqe-dark);
  margin: 2rem 0 1rem;
}
.article-content h3 {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--tqe-dark);
  margin: 1.5rem 0 .75rem;
}
/* Nội dung HTML soạn từ trang quản trị — ép vừa khung, không tràn ngang */
.article-content img,
.article-content iframe,
.article-content video {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.article-content table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: collapse;
}
.article-content table td,
.article-content table th {
  border: 1px solid var(--tqe-border);
  padding: .625rem .75rem;
}
.article-content table th,
.article-content table thead td {
  background: var(--tqe-soft);
  font-weight: 600;
}
.featured-image-box {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.featured-image-box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.image-caption {
  font-size: .875rem;
  color: var(--tqe-muted);
  text-align: center;
  margin-top: .5rem;
  font-style: italic;
}
.callout-box {
  background-color: var(--tqe-soft);
  border-left: 4px solid var(--tqe-primary);
  padding: 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

/* ---------- Cột bên -------------------------------------------------------*/
.sidebar-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--tqe-border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.sticky-sidebar {
  position: sticky;
  top: 90px;
}
.sidebar-card .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--tqe-border);
  padding: .625rem 0;
  font-weight: 500;
  color: var(--tqe-body);
}
.sidebar-card .list-group-item:last-child {
  border-bottom: 0;
}
.sidebar-card .list-group-item:hover,
.sidebar-card .list-group-item.active {
  background: transparent;
  color: var(--tqe-primary);
}
.related-post-item {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tqe-border);
}
.related-post-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.related-post-img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---------- Slider ngang dùng chung --------------------------------------
   Dùng cho: trạm đến, đội ngũ tư vấn, đối tác.
   Trượt bằng scroll-snap của trình duyệt nên điện thoại vuốt được ngay,
   JS chỉ lo 2 nút mũi tên. Số thẻ mỗi khung đổi bằng biến --slide.
   ------------------------------------------------------------------------ */
.tqe-slider {
  position: relative;
}
.tqe-slider-track {
  --slide: 4;   /* số thẻ mỗi khung — đổi theo bề ngang màn hình ở cuối khối này */
  --khe: 1.25rem;
  display: flex;
  gap: var(--khe);
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity chứ không phải mandatory: mandatory kéo vị trí cuộn về chỗ cũ,
     làm 2 nút mũi tên bấm không ăn */
  scroll-snap-type: x proximity;
  /* Không đặt scroll-behavior:smooth ở đây — nó khoá luôn việc cuộn bằng JS.
     Hiệu ứng trượt mượt do scrollBy({behavior:'smooth'}) trong index.php lo. */
  scrollbar-width: none;
  /* chừa chỗ dọc cho thẻ nhấc lên + bóng đổ khi hover; ngang để 0 để
     vị trí cuộn bắt đầu đúng bằng 0 */
  padding: 10px 0 18px;
}
.tqe-slider-track::-webkit-scrollbar {
  display: none;
}
.tqe-slide {
  flex: 0 0 calc((100% - (var(--slide) - 1) * var(--khe)) / var(--slide));
  scroll-snap-align: start;
}
.tqe-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--tqe-border);
  background: #fff;
  color: var(--tqe-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}
.tqe-slider-btn:hover {
  background: var(--tqe-primary);
  border-color: var(--tqe-primary);
  color: #fff;
}
.tqe-slider-btn[hidden] {
  display: none;
}
.tqe-slider-prev { left: -14px; }
.tqe-slider-next { right: -14px; }

/* Băng chạy liên tục — dùng cho dải logo đối tác */
.tqe-marquee {
  overflow: hidden;
}
.tqe-marquee .tqe-slider-track {
  overflow-x: hidden;
  scroll-snap-type: none;
  animation: tqe-troi var(--tqe-marquee-time, 40s) linear infinite;
  width: max-content;
}
.tqe-marquee:hover .tqe-slider-track,
.tqe-marquee.is-paused .tqe-slider-track {
  animation-play-state: paused;
}
@keyframes tqe-troi {
  from { transform: translateX(0); }
  /* nửa quãng vì danh sách logo được nhân đôi để nối liền mạch */
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .tqe-marquee .tqe-slider-track {
    animation: none;
  }
}

@media (max-width: 1199.98px) {
  .tqe-slider-track { --slide: 3; }
}
@media (max-width: 991.98px) {
  .tqe-slider-track { --slide: 2; }
  .tqe-slider-prev { left: -6px; }
  .tqe-slider-next { right: -6px; }
}
@media (max-width: 575.98px) {
  /* 1,2 thẻ: hở một phần thẻ kế bên để người dùng biết là vuốt được */
  .tqe-slider-track { --slide: 1.2; --khe: .75rem; }
}

/* ---------- Danh sách tin / dịch vụ -------------------------------------- */
.news-card {
  border: 1px solid var(--tqe-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: all .3s ease;
  height: 100%;
}
.news-card:hover {
  border-color: var(--tqe-accent);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .07);
}
.news-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.news-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
}
.news-card h3 a {
  color: var(--tqe-dark);
  text-decoration: none;
}
.news-card:hover h3 a {
  color: var(--tqe-primary);
}

/* ---------- Chi nhánh (trang liên hệ) ------------------------------------ */
.branch-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--tqe-border);
  padding: 1.5rem;
  transition: all .3s ease;
  height: 100%;
  cursor: pointer;
}
.branch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .08);
  border-color: var(--tqe-primary);
}
/* Chi nhánh đang xem: viền đậm, không nhấc lên để hàng thẻ không bị lệch */
.branch-card.active {
  border-color: var(--tqe-primary);
  box-shadow: 0 0 0 1px var(--tqe-primary);
  background: var(--tqe-soft);
}
.branch-badge {
  display: inline-block;
  background: var(--tqe-soft);
  color: var(--tqe-primary-dark);
  font-weight: 700;
  font-size: .8rem;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.branch-title {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  color: var(--tqe-dark);
}
.branch-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: .75rem;
  font-size: .925rem;
}
.branch-info-item i {
  color: var(--tqe-primary);
  margin-top: 4px;
  width: 16px;
  flex-shrink: 0;
}
.contact-form-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--tqe-border);
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .03);
}
.map-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
  border: 1px solid var(--tqe-border);
  height: 100%;
  min-height: 380px;
}
.map-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}

/* ---------- Vận đơn (trang tra cứu) -------------------------------------- */
.bill-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
  border: 1px solid var(--tqe-border);
  overflow: hidden;
}
.bill-status-banner {
  background: linear-gradient(135deg, var(--tqe-primary) 0%, var(--tqe-primary-dark) 100%);
  color: #fff;
  padding: 1.5rem 2rem;
}
.bill-status-banner.is-pending {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.bill-status-banner.is-cancelled {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.tracking-timeline {
  padding: 1.5rem 0;
}
.timeline-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.timeline-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 5%;
  right: 5%;
  height: 3px;
  background-color: var(--tqe-border);
  z-index: 1;
}
.step-item {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
}
.step-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--tqe-border);
  color: var(--tqe-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .5rem;
  font-size: 1.1rem;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--tqe-border);
}
.step-item.completed .step-icon {
  background-color: var(--tqe-primary);
  color: #fff;
  box-shadow: 0 0 0 2px var(--tqe-primary);
}
.step-item.active .step-icon {
  background-color: var(--tqe-accent);
  color: var(--tqe-primary-darker);
  box-shadow: 0 0 0 2px var(--tqe-accent);
}
.step-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--tqe-dark);
}
.step-date {
  font-size: .75rem;
  color: var(--tqe-muted);
}
.info-box {
  background-color: var(--tqe-bg);
  border-radius: 12px;
  padding: 1.25rem;
  height: 100%;
  border: 1px solid var(--tqe-border);
}
.info-box-title {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tqe-muted);
  font-weight: 700;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Con dấu "đã thu tiền" chỉ dùng khi in */
.stamp-paid {
  display: none;
  position: absolute;
  border: 3px solid #d60000;
  color: #d60000;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .5);
  text-align: center;
  left: 180px;
  top: 330px;
  transform: rotate(-10deg);
  pointer-events: none;
}
.stamp-main {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}
.stamp-company {
  font-size: 10px;
  font-weight: 600;
}

/* Phiếu in — chỉ hiện khi in ra giấy, giữ nguyên bố cục bảng viền đen cũ */
.print-only {
  display: none;
}

@media print {
  body {
    background: #fff;
    padding: 0;
  }
  .no-print,
  .top-bar,
  .navbar,
  #footer,
  .site-chat {
    display: none !important;
  }
  .print-only {
    display: block;
  }
  .stamp-paid {
    display: block;
  }
  .bill-card {
    box-shadow: none;
    border: none;
  }
}

/* Bảng phiếu in (giữ nguyên định dạng cũ để in ra không đổi) */
.container-print-dh {
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  max-width: 860px;
  font-family: 'Times New Roman', Times, serif;
  color: #000;
}
.container-print-dh table {
  width: 100%;
  border-collapse: collapse;
}
.container-print-dh .header td,
.container-print-dh .info-row td,
.container-print-dh .item-table td,
.container-print-dh .item-table th {
  border: 1px solid #000;
  padding: 5px 10px;
  vertical-align: top;
}
.container-print-dh .header td {
  text-align: center;
  font-weight: bold;
}
.container-print-dh p {
  margin: 5px 0;
}
.container-print-dh .bold {
  font-weight: bold;
}
.container-print-dh .center {
  text-align: center;
}
.container-print-dh .right {
  text-align: right;
}
.container-print-dh .red {
  color: #f00;
}
.container-print-dh .tencty {
  font-size: 22px;
  margin-bottom: 0;
}
.container-print-dh .section-title td {
  background: #000;
  color: #fff;
  font-weight: bold;
}

/* ---------- Lịch sử vận đơn (nạp qua AJAX) ------------------------------- */
.history-timeline {
  position: relative;
  padding-left: 32px;
}
.history-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--tqe-border);
}
.timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--tqe-primary);
  box-shadow: 0 0 0 2px var(--tqe-primary);
}
.timeline-content {
  background: var(--tqe-bg);
  border-radius: 10px;
  border-left: 4px solid var(--tqe-primary);
  padding: 1rem 1.25rem;
}
.timeline-title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--tqe-dark);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.badge-type {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--tqe-primary);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.timeline-detail {
  color: var(--tqe-muted);
  font-size: .85rem;
  line-height: 1.7;
  margin-bottom: .5rem;
}
.timeline-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--tqe-muted);
  background: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--tqe-border);
}
/* Màu theo loại sự kiện */
.timeline-tonkho .timeline-dot { background: #D97706; box-shadow: 0 0 0 2px #D97706; }
.timeline-tonkho .timeline-content { border-left-color: #D97706; }
.timeline-tonkho .badge-type { background: #D97706; }
.timeline-phancong .timeline-dot { background: #0891B2; box-shadow: 0 0 0 2px #0891B2; }
.timeline-phancong .timeline-content { border-left-color: #0891B2; }
.timeline-phancong .badge-type { background: #0891B2; }
.timeline-tinnhan .timeline-dot { background: #2563EB; box-shadow: 0 0 0 2px #2563EB; }
.timeline-tinnhan .timeline-content { border-left-color: #2563EB; }
.timeline-tinnhan .badge-type { background: #2563EB; }
.timeline-thuho .timeline-dot { background: #DC2626; box-shadow: 0 0 0 2px #DC2626; }
.timeline-thuho .timeline-content { border-left-color: #DC2626; }
.timeline-thuho .badge-type { background: #DC2626; }
.history-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--tqe-muted);
}
.history-empty i {
  font-size: 40px;
  display: block;
  margin-bottom: 1rem;
  color: var(--tqe-border);
}

/* ---------- Chân trang ---------------------------------------------------- */
/* Chỉ nhắm vào chân trang của site — trong bài viết cũng có thẻ <footer> */
#footer {
  background-color: var(--tqe-dark);
  color: #94A3B8;
}
#footer h5 {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
#footer a {
  color: #94A3B8;
  text-decoration: none;
  transition: color .3s;
}
#footer a:hover {
  color: var(--tqe-accent);
}
#footer .footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#footer .footer-social a:hover {
  background: var(--tqe-primary);
  color: #fff;
}
#footer .form-control {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #E2E8F0;
}
#footer .form-control::placeholder {
  color: #64748B;
}
#footer .form-control:focus {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* ---------- Khung chat nổi ------------------------------------------------ */
.site-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1235;
}
.site-chat-toggle {
  border: 0;
  border-radius: 50px;
  padding: 12px 20px;
  background: var(--tqe-primary);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}
.site-chat-toggle:hover,
.site-chat-toggle:focus {
  background: var(--tqe-primary-dark);
}
.site-chat-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  display: none;
  width: 360px;
  height: 520px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tqe-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
.site-chat.is-open .site-chat-panel {
  display: block;
}
.site-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px 0 16px;
  background: var(--tqe-primary);
  color: #fff;
}
.site-chat-close {
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.site-chat-panel iframe {
  display: block;
  width: 100%;
  height: calc(100% - 44px);
  border: 0;
}

@media (max-width: 480px) {
  .site-chat {
    right: 10px;
    bottom: 10px;
  }
  .site-chat-panel {
    width: min(360px, calc(100vw - 20px));
    height: min(520px, 75vh);
  }
}

@media (max-width: 767.98px) {
  .hero-section {
    padding: 56px 0 80px;
  }
  /* Điện thoại: chữ chiếm hết bề ngang nên phủ kín, không để hình xe lọt sau chữ */
  .hero-section::before {
    background: rgba(46, 70, 17, .55);
  }
  .article-header h1 {
    font-size: 1.5rem;
  }
  .tracking-card {
    padding: 1.25rem;
  }
  .bill-status-banner {
    padding: 1.25rem;
  }
  /* Timeline xếp dọc cho vừa màn hình điện thoại */
  .timeline-steps {
    flex-direction: column;
    gap: 1rem;
  }
  .timeline-steps::before {
    top: 0;
    bottom: 0;
    left: 20px;
    right: auto;
    width: 3px;
    height: auto;
  }
  .step-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-align: left;
  }
  .step-icon {
    margin: 0;
    flex-shrink: 0;
  }
}