/* =====================================================================
   FILE CSS — TRANG CON "SANG TÊN XE TRỌN GÓI TẠI NHÀ" (ANH BÁ PHÁT)
   Đồng bộ giao diện TỐI + VÀNG/ĐỎ theo đúng trang chủ mới (sangtenxe.vn).
   Cấu trúc file (tìm bằng Ctrl+F theo số mục):
   1. BIẾN DÙNG CHUNG — màu sắc, font chữ (SỬA Ở ĐÂY LÀ NHANH NHẤT)
   2. RESET & MẶC ĐỊNH
   3. KHUNG CHỨA (container)
   4. HEADER & MENU (logo, nút gọi, dropdown, menu mobile)
   5. HERO (banner đầu trang, ảnh minh họa)
   6. BỐ CỤC 2 CỘT (nội dung chính + sidebar)
   7. GIỚI THIỆU KHÓ KHĂN
   8. DANH SÁCH 7 KHÓ KHĂN (dạng thẻ tối, có số thứ tự)
   9. NÚT CTA (dạng viên thuốc đỏ, giống trang chủ)
   10. PHẦN GIỚI THIỆU CÔNG TY + KHUNG LIÊN HỆ (QR)
   11. SIDEBAR "DỊCH VỤ TƯ VẤN THỦ TỤC XE" (dạng thẻ tối)
   12. FOOTER / LIÊN HỆ (bản đồ, fanpage, dòng liên kết nhanh)
   13. DÒNG MIỄN TRỪ TRÁCH NHIỆM (dưới cùng)
   14. NÚT NỔI + NÚT LÊN ĐẦU TRANG + THANH DƯỚI (MOBILE)
   15. RESPONSIVE (điện thoại / máy tính bảng)
   ===================================================================== */


/* =====================================================================
   1. BIẾN DÙNG CHUNG — SỬA MÀU, FONT, BO GÓC Ở ĐÂY
   Toàn bộ trang lấy màu và font từ danh sách biến này.
   ===================================================================== */
:root{
  /* --- Nền tối (giống trang chủ: đen tuyền) --- */
  --bg-900:#0A0A0C;       /* nền chính của toàn trang */
  --bg-800:#151417;       /* nền thẻ / khối (card, dropdown, footer) */
  --bg-700:#1E1D22;       /* nền thẻ khi hover / viền sáng hơn */
  --line-color:#2A292F;   /* đường viền, đường kẻ phân cách */

  /* --- Màu vàng (thương hiệu chính, nút gọi, tiêu đề nổi bật) --- */
  --gold-500:#F6C544;
  --gold-400:#FFDB7A;

  /* --- Màu đỏ (nút CTA dạng viên thuốc, giống nút "Hướng dẫn..." ở trang chủ) --- */
  --red-600:#E5342B;
  --red-700:#C4241D;

  /* --- Màu chữ trên nền tối --- */
  --ink-0:#FFFFFF;
  --ink-300:#C9C7CE;      /* chữ phụ / mô tả, xám sáng */
  --ink-500:#8B8993;      /* chữ mờ hơn (ghi chú, disclaimer) */

  /* --- Font chữ (đổi font tại đây, nhớ đổi link Google Fonts trong index.html) --- */
  --font-heading:'Roboto Slab', serif;
  --font-body:'Be Vietnam Pro', sans-serif;

  /* --- Bo góc & khoảng cách chung --- */
  --radius-sm:8px;
  --radius-md:16px;
  --section-padding:64px;
}


/* =====================================================================
   2. RESET & MẶC ĐỊNH
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink-0);
  background:var(--bg-900);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-heading); line-height:1.25; color:var(--ink-0); }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
img{ max-width:100%; display:block; }


/* =====================================================================
   3. KHUNG CHỨA (container) — SỬA ĐỘ RỘNG TRANG TẠI ĐÂY
   ===================================================================== */
.wrap{ width:min(1140px, 92%); margin-inline:auto; }


/* =====================================================================
   4. HEADER & MENU — SỬA LOGO / SỐ HOTLINE TẠI ĐÂY
   ===================================================================== */
.site-header{
  background:var(--bg-900);
  border-bottom:1px solid var(--line-color);
  position:sticky; top:0; z-index:50;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:48px; width:48px; border-radius:50%; object-fit:cover; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-name{ font-family:var(--font-heading); font-weight:700; font-size:16px; color:var(--gold-500); letter-spacing:.02em; }
.brand-sub{ font-size:12px; color:var(--ink-300); }

.main-nav{ display:flex; align-items:center; gap:26px; }
.main-nav > a, .nav-dropdown-toggle{
  font-size:15px; font-weight:500; color:var(--ink-0);
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
  display:inline-flex; align-items:center; gap:4px;
}
.main-nav > a:hover, .nav-dropdown-toggle:hover{ color:var(--gold-500); border-color:var(--gold-500); }
.main-nav > a.active{ color:var(--gold-500); border-color:var(--gold-500); }

/* --- Menu con (Dịch vụ / Liên hệ) --- */
.nav-dropdown-item{ position:relative; }
.nav-arrow{ font-size:11px; transition:transform .2s; }
.nav-dropdown-item:hover .nav-arrow{ transform:rotate(180deg); }

.nav-dropdown-menu{
  display:none;
  position:absolute; left:0; top:100%;
  background:var(--bg-800);
  border:1px solid var(--line-color);
  border-radius:var(--radius-sm);
  box-shadow:0 16px 32px rgba(0,0,0,.5);
  padding:10px 0;
  z-index:80;
}
.nav-dropdown-item:hover .nav-dropdown-menu{ display:block; }

.nav-dropdown-item:not(.nav-dropdown-contact) .nav-dropdown-menu{
  width:560px; columns:2; column-gap:0; padding:14px 6px;
}
.nav-dropdown-contact .nav-dropdown-menu{ width:260px; }

.nav-dropdown-menu a{
  display:block; padding:8px 16px; font-size:13.5px; line-height:1.4;
  color:var(--ink-300); break-inside:avoid; white-space:normal;
}
.nav-dropdown-menu a:hover{ color:var(--gold-500); background:var(--bg-700); }

.header-call{
  display:flex; align-items:center; gap:8px;
  background:var(--gold-500); color:#231a00; font-weight:700;
  padding:10px 18px; border-radius:999px; white-space:nowrap;
  transition:background .2s, transform .15s;
}
.header-call:hover{ background:var(--gold-400); transform:translateY(-1px); }
.header-call svg{ width:16px; height:16px; fill:#231a00; }

/* --- Ẩn checkbox điều khiển, chỉ hiện nút hamburger trên điện thoại --- */
.nav-toggle{ display:none; }
.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:30px; cursor:pointer; flex-shrink:0;
}
.hamburger span{ display:block; width:100%; height:2px; background:var(--ink-0); border-radius:2px; }

/* --- Menu riêng cho điện thoại (ẩn hoàn toàn trên desktop) --- */
.mobile-nav{ display:none; }


/* =====================================================================
   5. HERO (banner đầu trang) — SỬA TIÊU ĐỀ / ẢNH MINH HỌA TẠI ĐÂY
   ===================================================================== */
.hero{
  background:linear-gradient(180deg, var(--bg-800), var(--bg-900));
  padding:var(--section-padding) 0;
  border-bottom:1px solid var(--line-color);
}
.hero-inner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; }
.hero-eyebrow{ color:var(--gold-500); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:13px; margin-bottom:10px; }
.hero h1{ font-size:clamp(28px, 3.6vw, 42px); margin-bottom:14px; }
.hero-tagline{ font-size:18px; color:var(--ink-300); margin-bottom:22px; }
.hero-checklist{ display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
.hero-checklist li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink-0); }
.hero-checklist li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  width:20px; height:20px; background:var(--gold-500); color:#231a00;
  border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{ display:inline-block; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; transition:transform .15s, background .2s, color .2s; }
.btn-primary{ background:var(--gold-500); color:#231a00; }
.btn-primary:hover{ background:var(--gold-400); transform:translateY(-1px); }
.btn-outline{ border:2px solid var(--ink-0); color:var(--ink-0); }
.btn-outline:hover{ background:var(--ink-0); color:#111; }

.hero-visual img{
  border-radius:var(--radius-md);
  border:1px solid var(--line-color);
  box-shadow:0 20px 40px rgba(0,0,0,.55);
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* =====================================================================
   6. BỐ CỤC 2 CỘT (nội dung chính + sidebar)
   ===================================================================== */
.page-columns{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:56px;
  padding:var(--section-padding) 0;
}
.breadcrumb{ font-size:13px; color:var(--ink-500); margin-bottom:24px; }
.breadcrumb a:hover{ color:var(--gold-500); }


/* =====================================================================
   7. GIỚI THIỆU KHÓ KHĂN
   ===================================================================== */
.intro h2{ font-size:clamp(22px, 2.6vw, 30px); margin-bottom:18px; color:var(--gold-500); }
.intro p{ color:var(--ink-300); margin-bottom:14px; }


/* =====================================================================
   8. DANH SÁCH 7 KHÓ KHĂN — dạng thẻ tối, có số thứ tự vàng
   ===================================================================== */
.clauses{ padding-top:8px; }
.clause-list{ display:flex; flex-direction:column; gap:14px; }
.clause-list li{
  display:grid; grid-template-columns:40px 1fr; gap:18px;
  padding:20px; background:var(--bg-800);
  border:1px solid var(--line-color); border-radius:var(--radius-sm);
  transition:border-color .2s, box-shadow .2s;
}
.clause-list li:hover{ border-color:var(--gold-500); box-shadow:0 0 0 1px var(--gold-500); }
.clause-no{ font-family:var(--font-heading); font-size:20px; font-weight:700; color:var(--gold-500); }
.clause-list h3{ font-size:18px; margin-bottom:6px; color:var(--ink-0); }
.clause-list p{ color:var(--ink-300); font-size:15px; }
.conclusion-title{ margin-top:28px; margin-bottom:10px; font-size:19px; color:var(--gold-500); }


/* =====================================================================
   9. NÚT CTA — dạng viên thuốc đỏ, giống nút ở trang chủ
   ===================================================================== */
.cta-banner{ text-align:center; padding:36px 0; }
.cta-line{
  display:inline-block; font-weight:700;
  font-size:clamp(15px, 1.8vw, 18px); color:#fff;
  background:var(--red-600);
  border-radius:999px; padding:16px 28px;
  box-shadow:0 10px 24px rgba(229,52,43,.35);
  transition:background .2s, transform .15s;
}
.cta-line:hover{ background:var(--red-700); transform:translateY(-1px); }


/* =====================================================================
   10. GIỚI THIỆU CÔNG TY + KHUNG LIÊN HỆ (QR) — SỬA THÔNG TIN LIÊN HỆ TẠI ĐÂY
   ===================================================================== */
.about p{ color:var(--ink-300); margin-bottom:16px; }
.about p.about-gold {
    font-family: var(--font-heading);
    color: rgba(255, 255, 1, 0.738);
    text-shadow: 1px 1px 1px rgb(255, 187, 1);
    font-size: clamp(20px, 2.6vw, 26px);
    text-align: center;
    margin: 10px 0 20px;
}
.contact-recap{
  text-align:center; background:var(--bg-800);
  border:1px solid var(--line-color); border-radius:var(--radius-md);
  padding:32px 20px; margin:24px 0;
}
.contact-recap p{ color:var(--ink-0); margin-bottom:8px; }
.contact-recap p.recap-name {
    color: var(--gold-500);
    font-weight: 700;
    font-size:20px;
} 
.recap-hotline a {
    color: #ff0000;
    font-weight: 700;
    font-size: 18px;
}
.recap-qr{ display:inline-block; margin:14px 0; }
.recap-qr img{ width:120px; height:120px; margin-inline:auto; border-radius:var(--radius-sm); }

.about .disclaimer{ font-size:13px; color:var(--ink-500); border-top:1px solid var(--line-color); padding-top:16px; margin-top:8px; }


/* =====================================================================
   11. SIDEBAR "DỊCH VỤ TƯ VẤN THỦ TỤC XE" — dạng thẻ tối, viền sáng khi hover
   ===================================================================== */
/* Tiêu đề danh sách dịch vụ */
.sidebar-title {
    font-size: 17px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold-500);
    color: var(--gold-500);
}

/* Danh sách dịch vụ liên quan */
.related-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Từng mục dịch vụ */
.related-list li {
    margin: 0;
    padding: 0;
}

/* Thẻ liên kết */
.related-list a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg-800);
    border: 1px solid var(--line-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hiệu ứng khi di chuột */
.related-list a:hover {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 1px var(--gold-500);
}

/* Ảnh dịch vụ */
.related-list img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--bg-700);
}

/* Tên dịch vụ */
.related-list span {
    font-size: 13px;
    color: var(--ink-0);
    line-height: 1.4;
    align-self: center;
}

/* Đổi màu chữ khi di chuột */
.related-list a:hover span {
    color: var(--gold-500);
}

/* =====================================================================
   12. FOOTER / LIÊN HỆ — SỬA THÔNG TIN CÔNG TY, MAP, FANPAGE TẠI ĐÂY
   ===================================================================== */
.site-footer{ background:var(--bg-800); border-top:1px solid var(--line-color); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; padding:40px 0 24px; }
.footer-col h4{ font-family:var(--font-heading); color:var(--gold-500); font-size:15px; margin-bottom:10px; }
.footer-col a, .footer-col p{ display:block; font-size:13.5px; color:var(--ink-300); margin-bottom:6px; }
.footer-col a:hover{ color:var(--gold-500); }
.footer-col .link-red{ color:var(--red-600); font-weight:600; }
.footer-company a{ color:var(--gold-500); font-weight:500; }

.footer-socials{ display:flex; gap:8px; margin-top:10px; }
.footer-socials a{
  width:28px; height:28px; border-radius:50%; background:var(--gold-500); color:#231a00;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-bottom:0;
}
.footer-socials a:hover{ background:var(--gold-400); }

.map-embed{ width:100%; height:140px; border:1px solid var(--line-color); border-radius:var(--radius-sm); filter:grayscale(.15); }
.fanpage-img{ width:100%; height:140px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line-color); }

.footer-bottom{ background:var(--bg-900); color:var(--ink-500); text-align:center; font-size:12.5px; padding:16px 0; }
.footer-links{ margin-bottom:8px; color:var(--ink-300); }
.footer-links a{ display:inline; color:var(--ink-300); }
.footer-links a:hover{ color:var(--gold-500); }


/* =====================================================================
   13. DÒNG MIỄN TRỪ TRÁCH NHIỆM (dưới cùng, theo mẫu trang chủ)
   ===================================================================== */
.site-notice{ background:var(--bg-900); padding:16px 0 96px; }
.site-notice p{ font-size:12px; color:var(--ink-500); line-height:1.6; }


/* =====================================================================
   14. NÚT NỔI + NÚT LÊN ĐẦU TRANG + THANH DƯỚI (mobile)
   SỬA LIÊN KẾT LIÊN HỆ TẠI ĐÂY
   ===================================================================== */
.floating-icons{ position:fixed; right:20px; bottom:100px; display:flex; flex-direction:column; gap:10px; z-index:60; }
.floating-icons a{
  width:48px; height:48px; border-radius:50%; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.45); background:#fff;
}
.floating-icons img{ width:100%; height:100%; object-fit:cover; }

/* Nút lên đầu trang — góc dưới trái, vàng tròn, giống bản trang chủ */
.back-to-top{
  position:fixed; left:20px; bottom:24px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-500); color:#231a00; font-size:20px; font-weight:700;
  box-shadow:0 6px 18px rgba(246,197,68,.4);
}
.back-to-top:hover{ background:var(--gold-400); }

.mobile-bar{ display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg-800); border-top:1px solid var(--line-color); z-index:70; }





/* rung lắc call */

/* ================================
   CỤM NÚT LIÊN HỆ CỐ ĐỊNH
================================ */

.zalo-chat-widget {
    position: fixed;
    right: 5px;
    top: 55%;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Vòng tròn từng nút */
.zalo-chat-widget a,
.zalo-chat-widget .button-contact {
    width: 45px;
    height: 45px;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(40, 184, 251, 0.577);

    animation: devvn_zoom 1.8s infinite linear;
    transition: transform 0.3s ease;
}

/* Kích thước biểu tượng bên trong */
.zalo-chat-widget img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;

    animation: calltrap_spin 3s infinite linear;
}

/* Hiệu ứng khi di chuột */
.zalo-chat-widget a:hover,
.zalo-chat-widget .button-contact:hover {
    transform: scale(1.15);
}

/* Hiệu ứng vòng sáng */
@keyframes devvn_zoom {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 184, 251, 0.577);
    }

    70% {
        box-shadow: 0 0 0 12px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* Hiệu ứng lắc nhẹ biểu tượng */
@keyframes calltrap_spin {
    0%, 30% {
        transform: rotate(0deg);
    }

    33% {
        transform: rotate(-10deg);
    }

    36% {
        transform: rotate(10deg);
    }

    39% {
        transform: rotate(-10deg);
    }

    42% {
        transform: rotate(10deg);
    }

    45% {
        transform: rotate(-10deg);
    }

    48% {
        transform: rotate(10deg);
    }

    51% {
        transform: rotate(-10deg);
    }

    54% {
        transform: rotate(10deg);
    }

    57% {
        transform: rotate(0deg);
    }
}



/* =====================================================================
   15. RESPONSIVE — ĐIỆN THOẠI / MÁY TÍNH BẢNG
   ===================================================================== */
@media (max-width:900px){
  .main-nav{ display:none; }
  .header-inner{ position:relative; }
  .hamburger{ display:flex; }

  .mobile-nav{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg-800); border-top:1px solid var(--line-color);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s ease, opacity .25s ease;
    z-index:90;
  }
  .nav-toggle:checked ~ .mobile-nav{ max-height:80vh; opacity:1; overflow-y:auto; }

  .mobile-nav > a{
    padding:15px 20px; border-bottom:1px solid var(--line-color);
    font-weight:500; color:var(--ink-0);
  }
  .mobile-nav details{ border-bottom:1px solid var(--line-color); }
  .mobile-nav summary{
    padding:15px 20px; font-weight:500; color:var(--ink-0);
    cursor:pointer; list-style:none;
  }
  .mobile-nav summary::-webkit-details-marker{ display:none; }
  .mobile-nav summary::after{ content:"⌄"; float:right; }
  .mobile-nav details[open] summary::after{ content:"⌃"; }
  .mobile-submenu{ display:flex; flex-direction:column; background:var(--bg-900); }
  .mobile-submenu a{
    padding:11px 32px; font-size:13.5px; color:var(--ink-300);
    border-top:1px solid var(--line-color);
  }
  .mobile-nav-call{
    margin:14px 20px 18px; padding:13px; text-align:center;
    background:var(--gold-500); color:#231a00; font-weight:700; border-radius:var(--radius-sm);
  }

  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .page-columns{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:600px){
  :root{ --section-padding:40px; }
  .footer-grid{ grid-template-columns:1fr; }
  .header-call{ display:none; }
  .floating-icons{ bottom:110px; right:14px; }
  .floating-icons a{ width:40px; height:40px; }
  .back-to-top{ display:none; } /* trên điện thoại đã có nút Top ở thanh dưới */
  .site-notice{ padding-bottom:84px; }
.mobile-bar {
    display: flex;
    justify-content: space-between;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}

.mobile-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    color: var(--ink-300);
    text-align: center;
}

.mobile-bar img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
}



/* Thu nhỏ cụm nút liên hệ 30% trên điện thoại */
@media (max-width: 767px) {
    .zalo-chat-widget {
        gap: 7px;
        right: 5px;
    }

    .zalo-chat-widget a,
    .zalo-chat-widget .button-contact {
        width: 32px;
        height: 32px;
    }

    .zalo-chat-widget img {
        width: 90%;
        height: 90%;
    }
}

/* Hotline, Email, Website: hiển thị trên một dòng */
.footer-company .footer-info {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 5px;
    white-space: nowrap;
}

.footer-company .footer-info strong {
    flex-shrink: 0;
}

.footer-company .footer-info a {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}