
/* =========================================================
   V421 — Rescue-first visual system for choque.com.vn
   Mục tiêu: Cứu hộ xe 24/24, nhanh, rõ, tin cậy.
   Chỉ áp dụng public website, không đụng Admin.
   ========================================================= */

:root{
  --cq-primary:#08733F;
  --cq-primary-700:#065C33;
  --cq-primary-900:#174A31;
  --cq-danger:#E5252A;
  --cq-danger-700:#C91F24;
  --cq-warning:#F4B400;
  --cq-bg:#F5F8F6;
  --cq-surface:#FFFFFF;
  --cq-surface-soft:#EEF5F1;
  --cq-text:#2D4036;
  --cq-muted:#687A70;
  --cq-line:#DDE8E1;
  --cq-line-strong:#C7D9CF;
  --cq-shadow:0 10px 30px rgba(21,70,48,.08);
  --cq-shadow-sm:0 5px 16px rgba(21,70,48,.06);
  --cq-radius:12px;
  --cq-radius-lg:16px;
  --cq-shell:1600px;
  --cq-section:56px;
  --cq-section-mobile:32px;
}

/* base */
html{scroll-behavior:smooth}
body:not(.admin-body){
  background:var(--cq-bg);
  color:var(--cq-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:not(.admin-body) a{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
body:not(.admin-body) img{max-width:100%}
body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3,
body:not(.admin-body) h4{
  color:var(--cq-primary-900);
  letter-spacing:-.015em;
}

/* shared shells */
body:not(.admin-body) .v381-shell,
body:not(.admin-body) .v410-shell,
body:not(.admin-body) .v306-shell,
body:not(.admin-body) .v334-shell,
body:not(.admin-body) .v335-shell,
body:not(.admin-body) .v251-wrap{
  width:min(var(--cq-shell),calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
}

/* top bar + header */
body:not(.admin-body) .v381-topbar,
body:not(.admin-body) .v410-topbar{
  background:var(--cq-primary-900)!important;
  color:#fff!important;
  border:0!important;
}
body:not(.admin-body) .v381-topbar a,
body:not(.admin-body) .v410-topbar a{color:#EAF5EF!important}
body:not(.admin-body) .v381-header,
body:not(.admin-body) .v410-header{
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid var(--cq-line)!important;
  box-shadow:0 3px 14px rgba(23,74,49,.04)!important;
}
body:not(.admin-body) .v381-nav>a,
body:not(.admin-body) .v410-nav>a,
body:not(.admin-body) .v381-nav .v416-find-parent,
body:not(.admin-body) .v381-nav .v408-news-parent,
body:not(.admin-body) .v410-nav .v411-find-parent,
body:not(.admin-body) .v410-nav .v410-news-parent{
  color:#2F4338!important;
  font-weight:800!important;
}
body:not(.admin-body) .v381-nav>a:hover,
body:not(.admin-body) .v410-nav>a:hover,
body:not(.admin-body) .v381-nav>a.active,
body:not(.admin-body) .v410-nav>a.active,
body:not(.admin-body) .v381-nav .v416-find-parent:hover,
body:not(.admin-body) .v410-nav .v411-find-parent:hover{
  color:var(--cq-primary)!important;
}
body:not(.admin-body) .v381-hotline,
body:not(.admin-body) .v410-hotline{
  background:var(--cq-danger)!important;
  color:#fff!important;
  border-color:var(--cq-danger)!important;
  box-shadow:0 6px 16px rgba(229,37,42,.18)!important;
}
body:not(.admin-body) .v381-hotline:hover,
body:not(.admin-body) .v410-hotline:hover{
  background:var(--cq-danger-700)!important;
  transform:translateY(-1px);
}

/* dropdowns */
body:not(.admin-body) .v416-find-dropdown,
body:not(.admin-body) .v411-find-dropdown,
body:not(.admin-body) .v408-news-dropdown,
body:not(.admin-body) .v410-news-dropdown{
  border:1px solid var(--cq-line)!important;
  border-radius:14px!important;
  box-shadow:var(--cq-shadow)!important;
  background:#fff!important;
}
body:not(.admin-body) .v416-find-dropdown a:hover,
body:not(.admin-body) .v411-find-dropdown a:hover,
body:not(.admin-body) .v408-news-dropdown a:hover,
body:not(.admin-body) .v410-news-dropdown a:hover{
  background:var(--cq-surface-soft)!important;
  color:var(--cq-primary)!important;
}
body:not(.admin-body) .v416-emergency-link,
body:not(.admin-body) .v411-emergency-link{
  color:var(--cq-danger)!important;
}

/* banner/hero */
body:not(.admin-body) .v381-hero,
body:not(.admin-body) .v410-shared-hero,
body:not(.admin-body) .v363-hero{
  background:#E8F0EC!important;
}
body:not(.admin-body) .v381-hero-copy h1,
body:not(.admin-body) .v410-shared-copy h1,
body:not(.admin-body) .v363-hero h1{
  color:var(--cq-primary-900)!important;
}
body:not(.admin-body) .v381-hero-actions .primary,
body:not(.admin-body) .v381-hero-actions a:first-child{
  background:var(--cq-danger)!important;
  border-color:var(--cq-danger)!important;
  color:#fff!important;
}
body:not(.admin-body) .v381-hero-actions .primary:hover,
body:not(.admin-body) .v381-hero-actions a:first-child:hover{
  background:var(--cq-danger-700)!important;
}

/* search / find garage */
body:not(.admin-body) .v381-search-box,
body:not(.admin-body) .v410-findbox,
body:not(.admin-body) .v306-filter-card{
  background:#fff!important;
  border:1px solid var(--cq-line)!important;
  box-shadow:var(--cq-shadow)!important;
  border-radius:var(--cq-radius-lg)!important;
}
body:not(.admin-body) .v381-search-title b,
body:not(.admin-body) .v410-find-title b,
body:not(.admin-body) .v306-filter-card h2{
  color:var(--cq-primary-900)!important;
}
body:not(.admin-body) select,
body:not(.admin-body) input[type="text"],
body:not(.admin-body) input[type="search"],
body:not(.admin-body) input[type="email"]{
  border-color:var(--cq-line-strong)!important;
}
body:not(.admin-body) select:focus,
body:not(.admin-body) input:focus{
  border-color:var(--cq-primary)!important;
  box-shadow:0 0 0 3px rgba(8,115,63,.09)!important;
  outline:none!important;
}
body:not(.admin-body) .v381-search-panel .find,
body:not(.admin-body) .v410-findbox button,
body:not(.admin-body) #v306-search{
  background:var(--cq-primary)!important;
  border-color:var(--cq-primary)!important;
  color:#fff!important;
}
body:not(.admin-body) .v381-search-panel .gps,
body:not(.admin-body) .v410-findbox [data-v410-gps],
body:not(.admin-body) #v369-nearest{
  background:#FFF1F1!important;
  border:1px solid #F2B9BB!important;
  color:var(--cq-danger)!important;
  font-weight:800!important;
}

/* common cards */
body:not(.admin-body) .v381-service-card,
body:not(.admin-body) .v381-gara-card,
body:not(.admin-body) .v381-news-card,
body:not(.admin-body) .v306-garage-card,
body:not(.admin-body) .v334-card,
body:not(.admin-body) .v334-side-card,
body:not(.admin-body) .v335-cards article{
  background:var(--cq-surface)!important;
  border:1px solid var(--cq-line)!important;
  border-radius:var(--cq-radius)!important;
  box-shadow:var(--cq-shadow-sm)!important;
}
body:not(.admin-body) .v381-service-card:hover,
body:not(.admin-body) .v381-gara-card:hover,
body:not(.admin-body) .v381-news-card:hover,
body:not(.admin-body) .v306-garage-card:hover{
  border-color:#BBD7C7!important;
  box-shadow:0 10px 24px rgba(21,70,48,.10)!important;
  transform:translateY(-2px);
}
body:not(.admin-body) .v381-service-card .v385-service-icon{
  background:var(--cq-surface-soft)!important;
  color:var(--cq-primary)!important;
}
body:not(.admin-body) .v381-section-head h2,
body:not(.admin-body) .v306-section-head h2,
body:not(.admin-body) .v334-section-head h2{
  color:var(--cq-primary-900)!important;
}

/* primary / secondary action hierarchy */
body:not(.admin-body) .v381-gara-card .actions .call,
body:not(.admin-body) .v334-primary-actions .call,
body:not(.admin-body) .v335-actions .call,
body:not(.admin-body) a[href^="tel:"]{
  background:var(--cq-danger);
  color:#fff;
}
body:not(.admin-body) .v381-gara-card .actions .call:hover,
body:not(.admin-body) .v334-primary-actions .call:hover,
body:not(.admin-body) .v335-actions .call:hover{
  background:var(--cq-danger-700)!important;
}
body:not(.admin-body) .v381-gara-card .actions .route,
body:not(.admin-body) .v334-primary-actions .route{
  background:#fff!important;
  border:1px solid #9CC9AF!important;
  color:var(--cq-primary)!important;
}
body:not(.admin-body) .v334-open,
body:not(.admin-body) .v363-kicker{
  color:var(--cq-primary)!important;
}

/* rating */
body:not(.admin-body) .v381-stars,
body:not(.admin-body) .stars{color:var(--cq-warning)!important}

/* map */
body:not(.admin-body) .v381-map-wrap,
body:not(.admin-body) #v306-map,
body:not(.admin-body) #v334-map{
  background:#E9F1ED!important;
}
body:not(.admin-body) .v389-map-toolbar,
body:not(.admin-body) .v389-map-foot{
  color:var(--cq-text);
}
body:not(.admin-body) #v389-map-gps{
  background:#FFF1F1!important;
  border-color:#F1B8BA!important;
  color:var(--cq-danger)!important;
}

/* stats */
body:not(.admin-body) .v381-stats{
  background:#EAF5EF!important;
  border-color:#D7E8DE!important;
}
body:not(.admin-body) .v381-stats b{color:var(--cq-primary-900)!important}
body:not(.admin-body) .v394-stat-icon{color:var(--cq-primary)!important}

/* emergency section */
body:not(.admin-body) .v381-emergency{
  background:linear-gradient(100deg,var(--cq-primary-900),var(--cq-primary))!important;
}
body:not(.admin-body) .v381-emergency h2,
body:not(.admin-body) .v381-emergency p{color:#fff!important}
body:not(.admin-body) .v381-emergency .hotline{
  background:var(--cq-danger)!important;
  color:#fff!important;
}
body:not(.admin-body) .v381-emergency .near{
  background:#fff!important;
  color:var(--cq-primary-900)!important;
}

/* news */
body:not(.admin-body) .v381-news{background:#fff}
body:not(.admin-body) .v381-news-card h3 a{color:var(--cq-primary-900)!important}
body:not(.admin-body) .v381-news-card h3 a:hover{color:var(--cq-primary)!important}

/* breadcrumbs */
body:not(.admin-body) .v306-breadcrumb,
body:not(.admin-body) .v334-breadcrumb,
body:not(.admin-body) .v335-crumb{
  color:var(--cq-muted)!important;
}
body:not(.admin-body) .v306-breadcrumb a,
body:not(.admin-body) .v334-breadcrumb a,
body:not(.admin-body) .v335-crumb a{color:var(--cq-primary)!important}

/* footer follows same system */
body:not(.admin-body) .v417-dynamic-footer{
  background:#fff!important;
  border-top:1px solid var(--cq-line)!important;
}
body:not(.admin-body) .v417-dynamic-footer h3{color:var(--cq-primary-900)!important}
body:not(.admin-body) .v417-dynamic-footer .v251-copy{background:#26383D!important}

/* ---------- mobile ---------- */
@media(max-width:760px){
  :root{
    --cq-radius:12px;
    --cq-radius-lg:14px;
  }

  body:not(.admin-body){
    background:#F7F9F8;
  }

  body:not(.admin-body) .v381-shell,
  body:not(.admin-body) .v410-shell,
  body:not(.admin-body) .v306-shell,
  body:not(.admin-body) .v334-shell,
  body:not(.admin-body) .v335-shell,
  body:not(.admin-body) .v251-wrap{
    width:calc(100% - 24px);
  }

  body:not(.admin-body) .v381-header,
  body:not(.admin-body) .v410-header{
    position:sticky;
    top:0;
    z-index:1100;
  }

  body:not(.admin-body) .v381-menu-btn,
  body:not(.admin-body) .v410-menu-btn{
    background:var(--cq-primary)!important;
    border-radius:10px!important;
  }

  body:not(.admin-body) .v381-nav.mobile-open,
  body:not(.admin-body) .v410-nav.mobile-open{
    background:#fff!important;
    border-top:1px solid var(--cq-line)!important;
    box-shadow:0 12px 30px rgba(18,60,42,.10)!important;
  }

  body:not(.admin-body) .v381-hero{
    min-height:360px;
  }

  body:not(.admin-body) .v381-hero-copy h1{
    font-size:38px!important;
    line-height:1.02!important;
  }
  body:not(.admin-body) .v381-hero-copy h2{
    font-size:22px!important;
    line-height:1.2!important;
  }

  body:not(.admin-body) .v381-search-box,
  body:not(.admin-body) .v410-findbox,
  body:not(.admin-body) .v306-filter-card{
    border-radius:14px!important;
  }

  body:not(.admin-body) .v381-service-card,
  body:not(.admin-body) .v381-gara-card,
  body:not(.admin-body) .v381-news-card,
  body:not(.admin-body) .v306-garage-card,
  body:not(.admin-body) .v334-card,
  body:not(.admin-body) .v334-side-card{
    border-radius:12px!important;
    box-shadow:0 4px 14px rgba(21,70,48,.06)!important;
  }

  body:not(.admin-body) .v381-map-wrap{
    height:350px!important;
  }

  body:not(.admin-body) .v381-emergency .v381-shell{
    align-items:stretch!important;
    gap:14px!important;
  }
  body:not(.admin-body) .v381-emergency .v381-shell>div:last-child{
    width:100%;
  }
  body:not(.admin-body) .v381-emergency .hotline,
  body:not(.admin-body) .v381-emergency .near{
    min-height:46px;
    border-radius:10px!important;
  }
}

/* very small phones */
@media(max-width:480px){
  body:not(.admin-body) .v381-hero-copy h1{font-size:34px!important}
  body:not(.admin-body) .v381-hero-copy h2{font-size:20px!important}
  body:not(.admin-body) .v417-dynamic-footer .top{gap:24px}
}

/* accessibility */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body:not(.admin-body) *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   V423 — Definitive shared footer theme.
   Đặt trong stylesheet tải sau cùng để không bị V421 ghi đè.
   ========================================================= */
body:not(.admin-body) footer.v417-dynamic-footer{
  background:#174A31 !important;
  border-top:0 !important;
  color:#D5E3DB !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .top{
  background:#174A31 !important;
  padding-top:42px;
  padding-bottom:38px;
}
body:not(.admin-body) footer.v417-dynamic-footer h3,
body:not(.admin-body) footer.v417-dynamic-footer .v251-footer-logo strong,
body:not(.admin-body) footer.v417-dynamic-footer .v305-footer-brand p b{
  color:#FFFFFF !important;
}
body:not(.admin-body) footer.v417-dynamic-footer p,
body:not(.admin-body) footer.v417-dynamic-footer nav a,
body:not(.admin-body) footer.v417-dynamic-footer .v305-footer-contact a{
  color:#D5E3DB !important;
}
body:not(.admin-body) footer.v417-dynamic-footer nav a:hover{
  color:#FFFFFF !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v305-footer-hotline a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 12px;
  border-radius:9px;
  background:#E5252A !important;
  color:#FFFFFF !important;
  font-weight:900;
  box-shadow:0 8px 18px rgba(229,37,42,.20);
}
body:not(.admin-body) footer.v417-dynamic-footer .v305-footer-hotline a:hover{
  background:#C91F24 !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-social a{
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.08) !important;
  color:#FFFFFF !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-social a:hover{
  background:#FFFFFF !important;
  border-color:#FFFFFF !important;
  color:#08733F !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-subscribe{
  border-color:rgba(255,255,255,.20) !important;
  background:#FFFFFF !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-subscribe input{
  background:#FFFFFF !important;
  color:#263F33 !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-subscribe button{
  background:#08733F !important;
  color:#FFFFFF !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-copy{
  background:#102F22 !important;
  color:#C9D9D0 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-copy a{
  color:#C9D9D0 !important;
}
body:not(.admin-body) footer.v417-dynamic-footer .v251-copy a:hover{
  color:#FFFFFF !important;
}
@media(max-width:760px){
  body:not(.admin-body) footer.v417-dynamic-footer .top{
    padding-top:32px;
    padding-bottom:28px;
  }
  body:not(.admin-body) footer.v417-dynamic-footer .v305-footer-hotline a{
    width:100%;
    min-height:44px;
    justify-content:center;
  }
}
