/* V363 — reference layout for /gara-toan-quoc only. Every rule is scoped. */
.v306-gara-directory.v363-gara-reference{--v363-green:#05653f;--v363-green2:#00784b;--v363-red:#f31927;--v363-line:#dfe7ec;--v363-text:#102735;background:#f5f8fa;color:var(--v363-text)}
.v306-gara-directory.v363-gara-reference .v306-shell{width:min(1480px,calc(100% - 34px))}
.v363-gara-reference .v363-hero{min-height:156px;background:linear-gradient(100deg,#effbff 0%,#e8f7fb 50%,#d9eef4 100%);border-bottom:1px solid #dbe8ed;overflow:hidden}
.v363-gara-reference .v363-hero-inner{min-height:156px;display:grid;grid-template-columns:1.2fr 1fr 340px;align-items:center;gap:24px;position:relative}
.v363-gara-reference .v363-kicker{display:inline-flex;align-items:center;background:#dff3e5;color:#176c42;border-radius:18px;padding:5px 12px;font-size:12px;font-weight:900;letter-spacing:.02em}
.v363-gara-reference .v363-hero-copy h1{font-size:47px;line-height:1.05;margin:10px 0 6px;font-weight:950;color:#102630}.v363-gara-reference .v363-hero-copy h1 em{font-style:normal;color:#00623d}
.v363-gara-reference .v363-hero-copy p{margin:0;color:#516775;font-size:15px}
.v363-gara-reference .v363-hero-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.v363-gara-reference .v363-hero-benefits div{position:relative;padding:4px 8px}.v363-gara-reference .v363-hero-benefits div+div:before{content:"";position:absolute;left:-5px;top:16px;height:42px;border-left:1px solid #d8e7eb}.v363-gara-reference .v363-hero-benefits i{display:block;font-style:normal;color:#0b7b48;font-size:25px;line-height:1.1}.v363-gara-reference .v363-hero-benefits div:nth-child(2) i{color:#f51e28}.v363-gara-reference .v363-hero-benefits div:nth-child(3) i{color:#0968dd}.v363-gara-reference .v363-hero-benefits div:nth-child(4) i{color:#ff9200}.v363-gara-reference .v363-hero-benefits b{display:block;font-size:12px;margin-top:5px}.v363-gara-reference .v363-hero-benefits small{display:block;color:#5e7180;font-size:10px;margin-top:2px}
.v363-gara-reference .v363-hero-art{height:156px;position:relative;overflow:hidden}.v363-gara-reference .v363-hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e4f4f8 0%,rgba(228,244,248,.16) 44%,rgba(228,244,248,0) 100%);z-index:1}.v363-gara-reference .v363-hero-art img{width:100%;height:100%;object-fit:cover}.v363-gara-reference .v363-hero-art span{position:absolute;z-index:2;left:25px;bottom:22px;color:#075b38;font-weight:900;font-style:italic;font-size:18px;transform:rotate(-4deg);text-shadow:0 1px 0 #fff}
.v363-gara-reference .v306-breadcrumb{height:40px;font-size:11px}
.v306-gara-directory.v363-gara-reference .v306-top-grid{grid-template-columns:335px minmax(0,1fr) 330px;gap:14px;align-items:start}
.v363-gara-reference .v306-filter-card{border-radius:10px;border:1px solid var(--v363-line);padding:0 14px 14px;background:#fff;box-shadow:0 4px 16px rgba(13,52,73,.06);overflow:hidden}.v363-gara-reference .v306-filter-card h2{margin:0 -14px 14px;padding:14px 16px;background:linear-gradient(135deg,#00613c,#037b4c);color:#fff;font-size:17px}.v363-gara-reference .v306-filter-card label{display:block;margin-bottom:9px}.v363-gara-reference .v306-filter-card label>span{display:none}.v363-gara-reference .v306-filter-card input,.v363-gara-reference .v306-filter-card select{width:100%;height:40px;border:1px solid #d8e2e8;border-radius:7px;background:#fff;padding:0 12px;font-size:12px;color:#243c4b}.v363-gara-reference .v306-filter-card>button{width:100%;height:40px;border:0;border-radius:7px;background:var(--v363-red);color:#fff;font-weight:900;font-size:13px;cursor:pointer}
.v363-gara-reference .v306-service-list{margin-top:11px;padding-top:12px;border-top:1px solid #edf1f4}.v363-gara-reference .v306-service-list h3{font-size:14px;margin:0 0 10px;color:#122b39}.v363-gara-reference .v306-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.v363-gara-reference .v306-service-chip{min-height:76px!important;padding:8px 5px!important;display:flex!important;flex-direction:column;align-items:center!important;justify-content:center;text-align:center!important;gap:7px!important;background:#fff!important;border:1px solid #e7edf1!important;box-shadow:0 3px 11px rgba(16,39,53,.05);border-radius:8px!important}.v363-gara-reference .v306-service-chip i{width:auto!important;height:auto!important;border:0!important;background:transparent!important;font-size:23px!important}.v363-gara-reference .v306-service-chip span{font-size:10px!important;line-height:1.3!important;color:#17313e!important}.v363-gara-reference .v306-service-chip:hover,.v363-gara-reference .v306-service-chip.is-active{border-color:#0b8752!important;box-shadow:0 5px 16px rgba(8,104,63,.12)!important;transform:translateY(-1px)}
.v363-gara-reference .v306-support{margin-top:11px;border:1px solid #e2e8ec;border-radius:9px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}.v363-gara-reference .v306-support>b{font-size:13px}.v363-gara-reference .v306-support>span{font-size:10px;color:#677987}.v363-gara-reference .v306-support>a{grid-column:1/-1;margin-top:8px;height:42px;border-radius:7px;background:var(--v363-red);color:#fff;text-decoration:none;font-size:17px;font-weight:900;display:flex;justify-content:center;align-items:center;gap:8px}.v363-gara-reference .v306-support a small{display:none}
.v363-gara-reference .v363-map-panel{min-width:0;border:1px solid #dce7e9;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(13,52,73,.06)}.v363-gara-reference .v363-map-head{height:68px;padding:0 16px;background:linear-gradient(135deg,#066841,#00794b);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}.v363-gara-reference .v363-map-head strong{display:block;font-size:16px}.v363-gara-reference .v363-map-head span{display:block;font-size:11px;opacity:.9;margin-top:3px}.v363-gara-reference .v363-map-tabs{display:flex;border:1px solid rgba(255,255,255,.55);border-radius:7px;overflow:hidden}.v363-gara-reference .v363-map-tabs button{height:34px;padding:0 14px;border:0;background:transparent;color:#fff;font-size:11px;font-weight:800;cursor:pointer}.v363-gara-reference .v363-map-tabs button.active{background:#fff;color:#176b45}.v363-gara-reference .v306-map-wrap{min-height:650px!important;border-radius:0!important}.v363-gara-reference .v306-map-wrap #v306-map{min-height:650px!important;height:650px!important}.v363-gara-reference #v306-my-location{top:14px;right:14px;height:42px;border-radius:7px;background:#fff;color:#1e3948;font-weight:800;box-shadow:0 3px 12px rgba(0,0,0,.14)}.v363-gara-reference .v363-map-count{position:absolute;right:12px;bottom:12px;z-index:500;background:#fff;border-radius:7px;padding:9px 12px;font-size:10px;font-weight:800;box-shadow:0 3px 12px rgba(0,0,0,.16)}
.v363-gara-reference .v363-side{display:grid;gap:12px}.v363-gara-reference .v363-side-promo,.v363-gara-reference .v363-nearby,.v363-gara-reference .v363-join{background:#fff;border:1px solid #dfe7eb;border-radius:9px;overflow:hidden;box-shadow:0 4px 16px rgba(13,52,73,.06)}.v363-gara-reference .v363-side-promo-art{height:184px;position:relative;overflow:hidden;background:#0c4a39}.v363-gara-reference .v363-side-promo-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,60,43,.93),rgba(3,60,43,.58) 56%,rgba(3,60,43,0))}.v363-gara-reference .v363-side-promo-art img{width:100%;height:100%;object-fit:cover}.v363-gara-reference .v363-side-promo-art b,.v363-gara-reference .v363-side-promo-art span{position:absolute;left:18px;z-index:2;color:#fff}.v363-gara-reference .v363-side-promo-art b{top:24px;font-size:24px;line-height:1.18}.v363-gara-reference .v363-side-promo-art span{bottom:20px;font-size:11px;line-height:1.5}.v363-gara-reference .v363-side-promo ul{list-style:none;margin:0;padding:10px 14px 4px}.v363-gara-reference .v363-side-promo li{font-size:11px;padding:7px 0;border-bottom:1px solid #edf1f3}.v363-gara-reference .v363-side-promo>a{height:48px;margin:10px 14px 13px;border-radius:7px;background:var(--v363-red);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900}
.v363-gara-reference .v363-nearby{padding:12px}.v363-gara-reference .v363-nearby-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #edf1f3}.v363-gara-reference .v363-nearby-head b{font-size:13px}.v363-gara-reference .v363-nearby-head a{font-size:10px;color:#086fea;text-decoration:none;font-weight:800}.v363-gara-reference .v363-nearby-item{display:grid;grid-template-columns:82px 1fr 12px;gap:9px;align-items:center;padding:10px 0;text-decoration:none;color:#172f3d;border-bottom:1px solid #edf1f3}.v363-gara-reference .v363-nearby-item:last-child{border-bottom:0}.v363-gara-reference .v363-nearby-item img{width:82px;height:62px;object-fit:cover;border-radius:6px}.v363-gara-reference .v363-nearby-item span{min-width:0}.v363-gara-reference .v363-nearby-item b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v363-gara-reference .v363-nearby-item small,.v363-gara-reference .v363-nearby-item em{display:block;font-style:normal;font-size:9px;color:#6b7b87;margin-top:4px}.v363-gara-reference .v363-nearby-item em{color:#e19700}.v363-gara-reference .v363-nearby-item i{font-style:normal;font-size:20px;color:#4c6a7b}
.v363-gara-reference .v363-join{padding:15px;display:grid;grid-template-columns:38px 1fr 14px;gap:10px;align-items:center;text-decoration:none;background:linear-gradient(135deg,#edfdf5,#f8fffb);color:#095d3d}.v363-gara-reference .v363-join>i{font-size:28px;font-style:normal}.v363-gara-reference .v363-join b{display:block;font-size:11px}.v363-gara-reference .v363-join small{display:block;color:#70807c;font-size:9px;margin-top:3px}.v363-gara-reference .v363-join strong{font-size:20px}
.v363-gara-reference .v306-list-panel{margin-top:16px}.v363-gara-reference .v306-garage-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(max-width:1280px){.v306-gara-directory.v363-gara-reference .v306-top-grid{grid-template-columns:300px minmax(0,1fr)}.v363-gara-reference .v363-side{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr}.v363-gara-reference .v363-side-promo-art{height:150px}.v363-gara-reference .v363-side-promo ul{display:none}.v363-gara-reference .v363-side-promo>a{margin-top:8px}.v363-gara-reference .v363-hero-inner{grid-template-columns:1fr 1fr}.v363-gara-reference .v363-hero-art{display:none}}
@media(max-width:900px){.v363-gara-reference .v363-hero{min-height:auto}.v363-gara-reference .v363-hero-inner{display:block;padding:22px 0}.v363-gara-reference .v363-hero-copy h1{font-size:36px}.v363-gara-reference .v363-hero-benefits{margin-top:18px}.v306-gara-directory.v363-gara-reference .v306-top-grid{grid-template-columns:1fr}.v363-gara-reference .v306-filter-card{display:block!important}.v363-gara-reference .v363-side{grid-column:auto;grid-template-columns:1fr 1fr}.v363-gara-reference .v363-join{grid-column:1/-1}.v363-gara-reference .v306-map-wrap,.v363-gara-reference .v306-map-wrap #v306-map{min-height:470px!important;height:470px!important}.v363-gara-reference .v306-garage-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.v306-gara-directory.v363-gara-reference .v306-shell{width:calc(100% - 16px)}.v363-gara-reference .v363-hero-copy h1{font-size:31px}.v363-gara-reference .v363-hero-copy p{font-size:12px}.v363-gara-reference .v363-hero-benefits{grid-template-columns:repeat(2,1fr);gap:10px}.v363-gara-reference .v363-hero-benefits div:nth-child(3):before{display:none}.v363-gara-reference .v306-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.v363-gara-reference .v363-map-head{height:auto;padding:12px;align-items:flex-start}.v363-gara-reference .v363-map-head strong{font-size:13px}.v363-gara-reference .v363-map-tabs button{padding:0 9px;font-size:9px}.v363-gara-reference .v306-map-wrap,.v363-gara-reference .v306-map-wrap #v306-map{min-height:390px!important;height:390px!important}.v363-gara-reference .v363-side{grid-template-columns:1fr}.v363-gara-reference .v363-join{grid-column:auto}.v363-gara-reference .v306-garage-grid{grid-template-columns:1fr!important}}

/* V364 - marker/filter map sync, scoped only to /gara-toan-quoc */
.v306-gara-directory.v363-gara-reference .v306-red-pin{animation:v364PinPulse 2s ease-in-out infinite}
.v306-gara-directory.v363-gara-reference .v363-map-count{transition:transform .2s ease,box-shadow .2s ease}
.v306-gara-directory.v363-gara-reference .v363-map-count:not(:empty){box-shadow:0 4px 16px rgba(0,0,0,.18)}
@keyframes v364PinPulse{0%,100%{box-shadow:0 2px 7px #0005,0 0 0 0 rgba(237,17,28,.25)}50%{box-shadow:0 2px 7px #0005,0 0 0 7px rgba(237,17,28,0)}}
@media (prefers-reduced-motion:reduce){.v306-gara-directory.v363-gara-reference .v306-red-pin{animation:none}}

/* V366 - Garage directory: 5 cards/row, 20 cards/page on desktop only */
@media (min-width:1200px){
  .v306-gara-directory.v363-gara-reference .v306-garage-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-media{
    height:155px;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-body h3{
    font-size:13px;
    line-height:1.35;
  }
}

/* V369 scoped UX */
.v306-gara-directory.v363-gara-reference .v369-filter-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.v306-gara-directory.v363-gara-reference .v369-filter-actions button{min-height:38px;border:1px solid #dce5eb;border-radius:8px;background:#fff;color:#174a31;font:700 11px/1.25 "Be Vietnam Pro",Arial,sans-serif;cursor:pointer}.v306-gara-directory.v363-gara-reference .v369-filter-actions button:first-child{background:#eef8f3;border-color:#cce6d8}.v306-gara-directory.v363-gara-reference .v369-filter-actions button:hover{border-color:#05653f;box-shadow:0 3px 10px rgba(5,101,63,.10)}.v306-gara-directory.v363-gara-reference .v306-garage-card{cursor:pointer}.v306-gara-directory.v363-gara-reference .v306-garage-card.v369-map-hover{border-color:#f31927;box-shadow:0 10px 26px rgba(18,39,55,.14);transform:translateY(-3px)}.v306-gara-directory.v363-gara-reference .v369-marker-active .v306-red-pin{transform:scale(1.35);filter:drop-shadow(0 4px 7px rgba(243,25,39,.35))}@media(max-width:560px){.v306-gara-directory.v363-gara-reference .v369-filter-actions{grid-template-columns:1fr}}


/* V371 — đồng bộ toàn trang /gara-toan-quoc trên mobile, không ảnh hưởng trang khác */
@media (max-width:700px){
  body.v371-gara-page{overflow-x:hidden;background:#f5f8fa}
  body.v371-gara-page .v251-header{position:sticky!important;top:0;z-index:1500!important;border-bottom:1px solid #e8edf0!important;box-shadow:0 4px 16px rgba(15,35,47,.06)!important}
  body.v371-gara-page .v251-head-main{height:68px!important;min-height:68px!important;padding:7px 10px!important;grid-template-columns:minmax(0,1fr) 42px 46px!important;gap:7px!important}
  body.v371-gara-page .v251-logo img{max-width:148px!important;height:50px!important}
  body.v371-gara-page .v251-search{width:42px!important;height:42px!important}
  body.v371-gara-page .v251-search button{width:42px!important;height:42px!important}
  body.v371-gara-page .v280-menu-btn{width:46px!important;height:46px!important}
  body.v371-gara-page .v251-nav .v251-wrap{width:min(92vw,370px)!important;padding:96px 14px 178px!important}
  body.v371-gara-page .v251-nav a{min-height:52px!important;font-size:14px!important;padding-left:48px!important}

  .v306-gara-directory.v363-gara-reference{padding-bottom:12px}
  .v306-gara-directory.v363-gara-reference .v306-shell{width:calc(100% - 20px)!important}

  .v363-gara-reference .v363-hero{min-height:0!important;background:linear-gradient(155deg,#eefbff 0%,#e6f6f8 65%,#f7fbfc 100%)!important}
  .v363-gara-reference .v363-hero-inner{padding:18px 0 16px!important;display:block!important}
  .v363-gara-reference .v363-hero-copy{text-align:center}
  .v363-gara-reference .v363-kicker{font-size:10px!important;padding:5px 10px!important}
  .v363-gara-reference .v363-hero-copy h1{font-size:28px!important;line-height:1.08!important;margin:8px 0 6px!important;letter-spacing:-.6px}
  .v363-gara-reference .v363-hero-copy p{font-size:12px!important;line-height:1.55!important;max-width:340px;margin:0 auto!important;padding:0 4px}
  .v363-gara-reference .v363-hero-benefits{margin:15px auto 0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;max-width:360px}
  .v363-gara-reference .v363-hero-benefits div{min-height:70px;padding:9px 7px!important;border:1px solid #dce9ed;border-radius:10px;background:rgba(255,255,255,.86);box-shadow:0 3px 10px rgba(13,52,73,.04)}
  .v363-gara-reference .v363-hero-benefits div+div:before{display:none!important}
  .v363-gara-reference .v363-hero-benefits i{font-size:20px!important}
  .v363-gara-reference .v363-hero-benefits b{font-size:11px!important;margin-top:3px!important}
  .v363-gara-reference .v363-hero-benefits small{font-size:9px!important}
  .v363-gara-reference .v363-hero-art{display:none!important}

  .v363-gara-reference .v306-breadcrumb{height:auto!important;min-height:34px;padding:8px 0!important;font-size:10px!important;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .v306-gara-directory.v363-gara-reference .v306-top-grid{display:flex!important;flex-direction:column!important;gap:10px!important}
  .v363-gara-reference .v306-filter-card{order:1;width:100%;padding:0 12px 12px!important;border-radius:11px!important;box-shadow:0 3px 12px rgba(13,52,73,.05)!important}
  .v363-gara-reference .v306-filter-card h2{margin:0 -12px 11px!important;padding:12px 14px!important;font-size:15px!important}
  .v363-gara-reference .v306-filter-card label{margin-bottom:8px!important}
  .v363-gara-reference .v306-filter-card input,.v363-gara-reference .v306-filter-card select{height:42px!important;border-radius:8px!important;font-size:12px!important;padding:0 11px!important}
  .v363-gara-reference .v306-filter-card>button{height:43px!important;font-size:12px!important;border-radius:8px!important}
  .v306-gara-directory.v363-gara-reference .v369-filter-actions{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .v306-gara-directory.v363-gara-reference .v369-filter-actions button{min-height:38px!important;font-size:10px!important;padding:0 8px}
  .v363-gara-reference .v306-service-list{margin-top:10px!important;padding-top:10px!important}
  .v363-gara-reference .v306-service-list h3{font-size:13px!important;margin-bottom:8px!important}
  .v363-gara-reference .v306-service-grid{display:flex!important;overflow-x:auto!important;gap:8px!important;padding:1px 1px 7px!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .v363-gara-reference .v306-service-grid::-webkit-scrollbar{display:none}
  .v363-gara-reference .v306-service-chip{flex:0 0 92px!important;min-width:92px!important;min-height:72px!important;scroll-snap-align:start;padding:7px 5px!important}
  .v363-gara-reference .v306-service-chip i{font-size:21px!important}
  .v363-gara-reference .v306-service-chip span{font-size:9.5px!important}
  .v363-gara-reference .v306-support{margin-top:9px!important;padding:9px 10px!important}
  .v363-gara-reference .v306-support>a{height:40px!important;font-size:15px!important}

  .v363-gara-reference .v363-map-panel{order:2;width:100%;border-radius:11px!important}
  .v363-gara-reference .v363-map-head{height:auto!important;min-height:58px!important;padding:10px 11px!important;align-items:center!important}
  .v363-gara-reference .v363-map-head strong{font-size:12px!important}
  .v363-gara-reference .v363-map-head span{font-size:9px!important;line-height:1.35!important;max-width:185px}
  .v363-gara-reference .v363-map-tabs{flex:0 0 auto}
  .v363-gara-reference .v363-map-tabs button{height:31px!important;padding:0 8px!important;font-size:8.5px!important}
  .v363-gara-reference .v306-map-wrap,.v363-gara-reference .v306-map-wrap #v306-map{height:355px!important;min-height:355px!important}
  .v363-gara-reference #v306-my-location{top:10px!important;right:10px!important;height:36px!important;padding:0 10px!important;font-size:10px!important}
  .v363-gara-reference .v363-map-count{right:9px!important;bottom:9px!important;padding:7px 9px!important;font-size:9px!important}

  .v363-gara-reference .v363-side{order:3!important;display:grid!important;grid-template-columns:1fr!important;gap:9px!important;width:100%}
  .v363-gara-reference .v363-side-promo,.v363-gara-reference .v363-nearby,.v363-gara-reference .v363-join{border-radius:11px!important;box-shadow:0 3px 12px rgba(13,52,73,.05)!important}
  .v363-gara-reference .v363-side-promo-art{height:145px!important}
  .v363-gara-reference .v363-side-promo ul{display:grid!important;grid-template-columns:1fr 1fr;gap:5px 8px;padding:9px 11px!important;margin:0!important}
  .v363-gara-reference .v363-side-promo li{font-size:9.5px!important;line-height:1.35!important}
  .v363-gara-reference .v363-side-promo>a{height:40px!important;margin:0 10px 10px!important;font-size:15px!important}
  .v363-gara-reference .v363-nearby-head{padding:11px 12px!important}
  .v363-gara-reference .v363-nearby-head b{font-size:13px!important}
  .v363-gara-reference .v363-nearby-head a{font-size:9.5px!important}
  .v363-gara-reference .v363-nearby-item{padding:9px 10px!important;gap:9px!important}
  .v363-gara-reference .v363-nearby-item img{width:68px!important;height:58px!important;border-radius:7px!important}
  .v363-gara-reference .v363-nearby-item span b{font-size:11px!important;line-height:1.35!important}
  .v363-gara-reference .v363-nearby-item span small{font-size:9px!important;line-height:1.4!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .v363-gara-reference .v363-nearby-item span em{font-size:8.5px!important}
  .v363-gara-reference .v363-join{min-height:68px!important;padding:10px 12px!important}
  .v363-gara-reference .v363-join i{font-size:24px!important}
  .v363-gara-reference .v363-join span b{font-size:11px!important}
  .v363-gara-reference .v363-join span small{font-size:9px!important}

  .v306-gara-directory.v363-gara-reference .v306-list-panel{margin-top:12px!important;padding-top:0!important}
  .v363-gara-reference .v306-list-head{min-height:0!important;padding:11px 0!important;display:flex!important;align-items:center!important;gap:8px!important}
  .v363-gara-reference .v306-list-head>div:first-child{min-width:0;flex:1}
  .v363-gara-reference .v306-list-head h2{font-size:15px!important;line-height:1.35!important;margin:0!important}
  .v363-gara-reference .v306-list-head span{font-size:9px!important;margin-top:3px!important}
  .v363-gara-reference .v306-view-actions{display:flex!important;flex:0 0 auto}
  .v363-gara-reference .v306-view-actions button{height:32px!important;padding:0 8px!important;font-size:8.5px!important}
  .v363-gara-reference .v306-garage-grid{grid-template-columns:1fr!important;gap:10px!important}
  .v306-gara-directory.v363-gara-reference .v306-garage-card{display:grid!important;grid-template-columns:128px minmax(0,1fr)!important;min-height:156px!important;border-radius:11px!important;overflow:hidden!important;transform:none!important}
  .v306-gara-directory.v363-gara-reference .v306-card-media{height:100%!important;min-height:156px!important;border-radius:0!important}
  .v306-gara-directory.v363-gara-reference .v306-card-media img{width:100%!important;height:100%!important;object-fit:cover!important}
  .v306-gara-directory.v363-gara-reference .v306-card-media>span{top:7px!important;left:7px!important;font-size:8px!important;padding:4px 6px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-distance{right:7px!important;bottom:7px!important;font-size:8.5px!important;padding:4px 6px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-body{padding:10px!important;min-width:0}
  .v306-gara-directory.v363-gara-reference .v306-card-body h3{font-size:12.5px!important;line-height:1.35!important;margin:0 0 5px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .v306-gara-directory.v363-gara-reference .v306-card-body p{font-size:9.5px!important;line-height:1.45!important;margin:0 0 5px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .v306-gara-directory.v363-gara-reference .v306-rating{font-size:9px!important;margin-bottom:4px!important}
  .v306-gara-directory.v363-gara-reference .v306-rating small{font-size:8.5px!important}
  .v306-gara-directory.v363-gara-reference .v306-open{font-size:8.5px!important;margin-bottom:6px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:7px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-actions a,.v306-gara-directory.v363-gara-reference .v306-card-actions button{min-width:0!important;height:31px!important;padding:0 5px!important;border-radius:6px!important;font-size:8.5px!important;white-space:nowrap!important}
  .v306-gara-directory.v363-gara-reference .v306-card-actions .v306-route{grid-column:1/-1!important}
  .v363-gara-reference .v306-pagination{padding:14px 0 4px!important;gap:5px!important;flex-wrap:wrap!important}
  .v363-gara-reference .v306-pagination button{min-width:34px!important;height:34px!important;padding:0 8px!important;font-size:10px!important}

  body.v371-gara-page .v251-footer{margin-top:10px!important}
  body.v371-gara-page .v251-footer .top{grid-template-columns:1fr!important;gap:14px!important;padding-top:22px!important;padding-bottom:22px!important}
  body.v371-gara-page .v251-footer .top>div:first-child{grid-column:auto!important}
  body.v371-gara-page .v251-footer h3{font-size:13px!important;margin-bottom:8px!important}
  body.v371-gara-page .v251-footer p,body.v371-gara-page .v251-footer a,body.v371-gara-page .v251-footer li{font-size:10px!important;line-height:1.55!important}
  body.v371-gara-page .v251-copy .v251-wrap{padding:10px 0!important;font-size:9px!important;text-align:center}
}

@media (max-width:430px){
  .v306-gara-directory.v363-gara-reference .v306-shell{width:calc(100% - 16px)!important}
  .v363-gara-reference .v363-hero-inner{padding:15px 0 14px!important}
  .v363-gara-reference .v363-hero-copy h1{font-size:25px!important}
  .v363-gara-reference .v363-hero-benefits div{min-height:66px!important}
  .v306-gara-directory.v363-gara-reference .v306-garage-card{grid-template-columns:112px minmax(0,1fr)!important;min-height:150px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-media{min-height:150px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-body{padding:9px!important}
  .v306-gara-directory.v363-gara-reference .v306-card-actions a,.v306-gara-directory.v363-gara-reference .v306-card-actions button{font-size:8px!important}
}


/* V426 - Gara directory pagination + responsive grid
   Chỉ áp dụng cho trang .v306-gara-directory.v363-gara-reference. */
.v306-gara-directory.v363-gara-reference .v306-list-panel{
  overflow:visible;
}
.v306-gara-directory.v363-gara-reference .v306-garage-grid{
  align-items:stretch;
}
.v306-gara-directory.v363-gara-reference .v306-garage-card{
  height:100%;
}
.v306-gara-directory.v363-gara-reference .v306-card-body{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.v306-gara-directory.v363-gara-reference .v306-card-actions{
  margin-top:auto;
}
.v306-gara-directory.v363-gara-reference .v306-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:22px 0 2px;
  padding:2px 0;
}
.v306-gara-directory.v363-gara-reference .v306-pagination[hidden]{display:none!important}
.v306-gara-directory.v363-gara-reference .v306-pagination button{
  min-width:38px;
  width:auto;
  height:38px;
  padding:0 11px;
  border:1px solid #dbe4e9;
  border-radius:9px;
  background:#fff;
  color:#174a31;
  font:800 11px/1 "Be Vietnam Pro",Arial,sans-serif;
  box-shadow:0 2px 7px rgba(16,39,53,.04);
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.v306-gara-directory.v363-gara-reference .v306-pagination button:hover:not(:disabled){
  border-color:#05653f;
  color:#05653f;
  transform:translateY(-1px);
}
.v306-gara-directory.v363-gara-reference .v306-pagination button.active{
  background:#05653f;
  border-color:#05653f;
  color:#fff;
  box-shadow:0 5px 14px rgba(5,101,63,.18);
}
.v306-gara-directory.v363-gara-reference .v306-pagination button:disabled{
  opacity:.36;
  cursor:not-allowed;
  transform:none;
}
.v306-gara-directory.v363-gara-reference .v306-pagination span{
  min-width:24px;
  text-align:center;
  color:#718092;
  font-weight:800;
}

/* Desktop: 4 gara / hàng, 16 gara = 4 hàng / trang. */
@media (min-width:1101px){
  .v306-gara-directory.v363-gara-reference .v306-garage-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-media{
    height:188px!important;
  }
}

/* Tablet / màn hình nhỏ: 2 gara / hàng để card không bị ép chữ. */
@media (min-width:761px) and (max-width:1100px){
  .v306-gara-directory.v363-gara-reference .v306-garage-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-media{
    height:190px!important;
  }
}

/* Mobile: 1 gara / hàng, card ngang gọn, nút đủ lớn để chạm. */
@media (max-width:760px){
  .v306-gara-directory.v363-gara-reference .v306-list-panel{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-garage-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-garage-card{
    display:grid!important;
    grid-template-columns:128px minmax(0,1fr)!important;
    min-height:158px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    box-shadow:0 3px 12px rgba(16,39,53,.05);
  }
  .v306-gara-directory.v363-gara-reference .v306-card-media{
    height:100%!important;
    min-height:158px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-body{
    padding:10px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-body h3{
    min-height:0!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-pagination{
    gap:5px!important;
    margin-top:16px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-pagination button{
    min-width:36px!important;
    height:36px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
}

@media (max-width:430px){
  .v306-gara-directory.v363-gara-reference .v306-garage-card{
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:150px!important;
  }
  .v306-gara-directory.v363-gara-reference .v306-card-media{
    min-height:150px!important;
  }
}

/* V427 — Gara gần bạn: danh sách động theo khoảng cách GPS */
.v363-gara-reference .v306-nearby-note{font-size:9px;line-height:1.45;color:#667985;background:#f6f9fa;border-bottom:1px solid #edf1f3;padding:8px 10px}
.v363-gara-reference .v306-nearby-note.is-ready{color:#17603d;background:#f2faf5}
.v363-gara-reference .v306-nearby-locate{width:100%;min-height:38px;margin-top:9px;border:1px solid #d7e4de;border-radius:7px;background:#f3faf6;color:#174a31;font-size:10px;font-weight:800;cursor:pointer}
.v363-gara-reference .v306-nearby-locate:hover{background:#174a31;color:#fff;border-color:#174a31}
.v363-gara-reference .v306-nearby-empty{padding:14px 8px;font-size:10px;color:#71818a;text-align:center}
.v363-gara-reference #v306-nearby-list .v363-nearby-item em{color:#174a31;font-weight:800}
@media(max-width:768px){.v363-gara-reference .v306-nearby-note{font-size:10px;padding:9px 12px}.v363-gara-reference .v306-nearby-locate{min-height:42px;font-size:11px}}