/* ===== FONT CHÍNH THỨC: Muli (font web VinFast do khách cung cấp) =====
   Muli có sẵn các nét 600–900; nét 400/500 dùng Mulish (cùng thiết kế, đã đóng gói). */
@font-face{font-family:'Muli';src:url(../fonts/Mulish-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Mulish-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-ExtraBold.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-SemiBoldItalic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-BoldItalic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-ExtraBoldItalic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:'Muli';src:url(../fonts/Muli-BlackItalic.woff2) format('woff2');font-weight:900;font-style:italic;font-display:swap;}

/* =========================================================
   STYLE 01 — Corporate Clean (Duy Digital)
   Override cuối cùng: đổi font + màu nhấn theo moodboard.
   Bảng màu khoá: navy #00265B, electric blue #00ADEF, dark #0090C9
   ========================================================= */
:root{
  --s1-navy:#00265b;
  --s1-blue:#00adef;
  --s1-blue-dark:#0090c9;
  /* ghi đè biến thương hiệu của theme gốc */
  --blue-brand-color:#00adef;
  --blue:#00adef;
  --primary:#00adef;
  --swiper-theme-color:#00adef;
}

/* ---- Font: Be Vietnam Pro cho toàn bộ chữ (không đụng icon) ---- */
body, p, a, span, li, label, input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.btn, .button,
[class*="title"], [class*="text"], [class*="label"], [class*="name"],
[class*="menu"], [class*="nav"], [class*="spec"], [class*="price"]{
  font-family:'Muli','Mulish',system-ui,-apple-system,sans-serif !important;
}
/* giữ nguyên font icon */
[class*="fa-"], .fa, .fas, .far, .fab,
.swiper-button-next, .swiper-button-prev,
i[class*="icon"], [class*="icon"]::before{
  font-family:inherit;
}
.fa, .fas, .far, .fab, [class^="fa-"], [class*=" fa-"]{
  font-family:'FontAwesome','Font Awesome 6 Free','Font Awesome 5 Free' !important;
}

/* ---- Tiêu đề: navy ---- */
h1, h2, h3,
.promo-title, [class*="__title"], [class*="-title"]{
  color:var(--s1-navy) !important;
}

/* ---- Nút chính: electric blue, bo 6px ---- */
.btn--primary--blue,
.button--primary,
.button-register-drive,
.btn-primary, .btn-submit-form,
.promo-cta-btn,
input[type="submit"], button[type="submit"]{
  background:var(--s1-blue) !important;
  border-color:var(--s1-blue) !important;
  color:#fff !important;
  border-radius:6px !important;
}
.btn--primary--blue:hover,
.button--primary:hover,
.button-register-drive:hover,
.btn-primary:hover,
.promo-cta-btn:hover{
  background:var(--s1-blue-dark) !important;
  border-color:var(--s1-blue-dark) !important;
  color:#fff !important;
}

/* ---- Nút viền xanh (chỉ đặt viền + bo góc, KHÔNG ép màu chữ) ---- */
.btn--border--blue{
  border-color:var(--s1-blue) !important;
  border-radius:6px !important;
}
/* Nút outline (nền trắng, chữ xanh) */
.btn--primary--white{
  border-color:var(--s1-blue) !important;
  color:var(--s1-blue) !important;
  border-radius:6px !important;
}
/* Nút NỀN xanh: luôn chữ trắng, kể cả khi có thêm class btn--border--blue */
.btn--primary--blue,
.btn--border--blue.btn--primary--blue{
  background:var(--s1-blue) !important;
  border-color:var(--s1-blue) !important;
  color:#fff !important;
}
.btn--primary--blue:hover,
.btn--border--blue.btn--primary--blue:hover{
  background:var(--s1-blue-dark) !important;
  color:#fff !important;
}
.btn--primary--blue::before{ display:none !important; }

/* ---- Link nhấn & trạng thái active ---- */
a:hover,
.dvhm-mega-menu__vehicle-btn.is-active,
[class*="--active"],
.swiper-pagination-bullet-active{
  color:var(--s1-blue) !important;
}
.swiper-pagination-bullet-active{ background:var(--s1-blue) !important; }

/* ---- "Xem thêm" / link phụ ---- */
[class*="see-more"], [class*="xem-them"], .see-more, a.see-more{
  color:var(--s1-blue) !important;
}

/* ---- Nút mũi tên carousel ---- */
.swiper-button-next:hover, .swiper-button-prev:hover{
  color:var(--s1-blue) !important;
  border-color:var(--s1-blue) !important;
}

/* ---- Giá tiền nhấn xanh (đồng bộ style 01) ---- */
[class*="price"]:not(del):not([class*="old"]){
  color:var(--s1-blue) !important;
}


/* ---- Hotline nổi bật trên header ---- */
.header-hotline{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--s1-blue);color:#fff !important;
  height:34px;padding:0 14px;border-radius:6px;margin-right:12px;
  font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;
}
.header-hotline:hover{background:var(--s1-blue-dark);color:#fff !important;}
.header-hotline svg{flex:0 0 auto;}
@media(max-width:600px){ .header-hotline span{display:none;} .header-hotline{padding:0 10px;} }

/* ---- Nút gọi nổi (hiện trên mobile) ---- */
.floating-call{
  position:fixed;left:16px;bottom:18px;z-index:9999;
  display:none;align-items:center;gap:8px;
  background:var(--s1-blue);color:#fff !important;
  padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;
  box-shadow:0 6px 18px rgba(0,38,91,.35);
  animation:fc-pulse 2s infinite;
}
.floating-call svg{flex:0 0 auto}
@keyframes fc-pulse{0%,100%{box-shadow:0 6px 18px rgba(0,173,239,.45)}50%{box-shadow:0 6px 26px rgba(0,173,239,.85)}}
@media(max-width:1024px){ .floating-call{display:inline-flex} }

/* =====================================================================
   KSG DIFFERENTIATION — làm khác web gốc (Duy Digital)
   ===================================================================== */

/* ---- Top bar thông tin đại lý ---- */
.ksg-topbar{background:linear-gradient(90deg,#00265b,#0090c9);color:#eaf3fb;font-size:13px;}
.ksg-topbar__in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;
  padding:7px 20px;flex-wrap:wrap;}
.ksg-topbar__badge{background:rgba(255,255,255,.16);color:#fff;font-weight:700;
  padding:3px 12px;border-radius:999px;font-size:12px;letter-spacing:.3px;}
.ksg-topbar__item{display:inline-flex;align-items:center;gap:6px;color:#eaf3fb !important;
  text-decoration:none;white-space:nowrap;font-weight:500;}
.ksg-topbar__item svg{opacity:.9}
.ksg-topbar__item:hover{color:#fff !important;}
.ksg-topbar .ksg-topbar__item:first-of-type{font-weight:700;margin-left:auto;}
@media(max-width:820px){ .ksg-hide-sm{display:none !important;} .ksg-topbar__in{justify-content:space-between;} .ksg-topbar .ksg-topbar__item:first-of-type{margin-left:0;} }

/* ---- Dải USP "Vì sao chọn KSG" ---- */
.ksg-usp{background:#fff;border-bottom:1px solid #eef1f5;}
.ksg-usp__in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  gap:22px;padding:34px 20px;}
.ksg-usp__item{display:flex;gap:14px;align-items:flex-start;
  padding:18px;border:1px solid #eef1f5;border-radius:14px;background:#fbfdff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.ksg-usp__item:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,38,91,.10);border-color:#cfe8fb;}
.ksg-usp__ic{flex:0 0 46px;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#00adef,#0072b8);}
.ksg-usp__ic svg{width:24px;height:24px;}
.ksg-usp__item h4{margin:0 0 4px;font-size:15px;color:var(--s1-navy);font-weight:700;}
.ksg-usp__item p{margin:0;font-size:13px;color:#5a6675;line-height:1.5;}
@media(max-width:900px){ .ksg-usp__in{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .ksg-usp__in{grid-template-columns:1fr;} }

/* ---- Nút: phong cách bo tròn + nâng nhẹ (khác nút vuông web gốc) ---- */
.btn--animated, .button--primary, .button-register-drive,
.btn-primary, .btn-submit-form, .promo-cta-btn{
  border-radius:999px !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important;
  letter-spacing:.3px;
}
.btn--primary--blue{ box-shadow:0 6px 16px rgba(0,173,239,.28) !important; }
.btn--primary--blue:hover, .button--primary:hover, .button-register-drive:hover,
.btn-primary:hover, .promo-cta-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(0,173,239,.42) !important;
}
.btn--border--blue:hover{ transform:translateY(-2px); }
.header-hotline{ border-radius:999px !important; }

/* ---- Thẻ xe/phần showcase: bo mềm hơn, tương phản tinh tế ---- */
.vehicle-showcase, .swiper-slide, .card{ }
#block-service .card, #block-aftersales .card{ border-radius:16px; }

/* ---- Tiêu đề section: thêm gạch nhấn nhỏ dưới (nhận diện KSG) ---- */
.ksg-usp__in::before{content:none;}

/* ---- Lockup logo: VINFAST | KSG Đà Nẵng ---- */
.header-logo a{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.ksg-logo-sub{
  display:inline-flex; flex-direction:column; justify-content:center; line-height:1;
  padding-left:10px; border-left:2px solid var(--s1-blue);
  font-family:'Muli','Mulish',sans-serif;
}
.ksg-logo-sub b{ font-size:16px; font-weight:800; color:var(--s1-navy); letter-spacing:.5px; }
.ksg-logo-sub i{ font-size:11px; font-style:normal; font-weight:600; color:var(--s1-blue);
  letter-spacing:2px; text-transform:uppercase; margin-top:2px; }
/* Mobile: nhỏ gọn hơn */
@media(max-width:600px){
  .ksg-logo-sub{ padding-left:7px; gap:0; }
  .ksg-logo-sub b{ font-size:13px; }
  .ksg-logo-sub i{ font-size:8.5px; letter-spacing:1.3px; }
}

/* =====================================================================
   MENU & BUTTON REFINEMENT (KSG)
   ===================================================================== */
/* Ẩn burger/menu icon bên phải trên desktop (chỉ dùng cho mobile) */
@media(min-width:1025px){
  #nav-icon-region, #menu-side-right .close-menu { display:none !important; }
  #menu-side-right { width:0 !important; padding:0 !important; margin:0 !important; }
}

/* Menu items: khoảng cách đều, chữ rõ, gạch chân xanh khi hover/active */
.mega_menu_header .mega_main > a{
  font-weight:600 !important; font-size:15px !important; color:#152a44 !important;
  padding:10px 2px !important; position:relative;
}
.mega_menu_header .mega_main{ margin:0 14px !important; }
.mega_menu_header .mega_main > a:hover{ color:var(--s1-blue) !important; }
.mega_menu_header .mega_main > a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--s1-blue); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.mega_menu_header .mega_main > a:hover::after{ transform:scaleX(1); }

/* ---- Cụm nút header: cân đối, cùng chiều cao ---- */
.box-car-head{ gap:10px; }
/* Hotline: đổi sang OUTLINE cho nhẹ, tách vai trò với CTA chính */
.header-hotline{
  height:40px !important; padding:0 16px !important;
  background:#fff !important; color:var(--s1-blue) !important;
  border:1.5px solid var(--s1-blue) !important; border-radius:999px !important;
  font-size:14px !important; box-shadow:none !important; margin-right:0 !important;
}
.header-hotline:hover{ background:var(--s1-blue) !important; color:#fff !important; }
/* CTA chính: solid, cùng chiều cao 40px */
.button-register-drive{
  height:40px !important; line-height:1 !important; padding:0 22px !important;
  font-size:13px !important; font-weight:700 !important; border-radius:999px !important;
  background:var(--s1-blue) !important; border:1.5px solid var(--s1-blue) !important; color:#fff !important;
  display:inline-flex !important; align-items:center; margin-left:0 !important;
}
.button-register-drive:hover{ background:var(--s1-blue-dark) !important; border-color:var(--s1-blue-dark) !important; }

/* ---- Menu desktop: cho hiện đủ item, bỏ cuộn ngang ---- */
@media(min-width:1025px){
  .mega-menu-scroll-arrow{ display:none !important; }
  .mega-menu-scroll-container,
  .mega-menu-scroll-wrapper{
    overflow:visible !important; width:auto !important; max-width:none !important;
  }
  .mega_menu_header{ display:flex !important; flex-wrap:nowrap !important; white-space:nowrap; }
  .mega_menu_header .mega_main{ margin:0 12px !important; }
}

/* =====================================================================
   FORM ĐĂNG KÝ LÁI THỬ (KSG)
   ===================================================================== */
.ksg-td{ background:linear-gradient(135deg,#f2f7fc,#e7f1fb); padding:56px 20px; }
.ksg-td__in{ max-width:720px; margin:0 auto; background:#fff; border-radius:18px;
  box-shadow:0 20px 50px rgba(0,38,91,.10); padding:38px clamp(20px,4vw,44px); border:1px solid #e6eef7; }
.ksg-td__head{ text-align:center; margin-bottom:26px; }
.ksg-td__head h2{ margin:0 0 10px; font-size:28px; font-weight:800; color:var(--s1-navy) !important; }
.ksg-td__head p{ margin:0 auto; max-width:520px; color:#5a6675; font-size:15px; line-height:1.6; }
.ksg-td__form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.ksg-field{ display:flex; flex-direction:column; gap:7px; }
.ksg-field label{ font-size:13px; font-weight:600; color:#243b57; }
.ksg-field label span{ color:#e11; margin-left:2px; }
.ksg-field input, .ksg-field select{
  height:46px; border:1.5px solid #d7e0ea; border-radius:10px; padding:0 14px;
  font-size:15px; font-family:inherit; color:#1f2937; background:#fff; transition:border-color .2s, box-shadow .2s;
}
.ksg-field input:focus, .ksg-field select:focus{
  outline:none; border-color:var(--s1-blue); box-shadow:0 0 0 3px rgba(0,173,239,.15);
}
.ksg-td__note{ grid-column:1/-1; margin:2px 0 0; font-size:13px; color:#8a5a00;
  background:#fff8e6; border:1px solid #ffe3a3; border-radius:10px; padding:10px 14px; line-height:1.5; }
.ksg-td__btn{
  grid-column:1/-1; height:50px; border:none; border-radius:999px; cursor:pointer;
  background:var(--s1-blue); color:#fff; font-size:15px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(0,173,239,.32); transition:transform .18s, box-shadow .18s, background .18s;
}
.ksg-td__btn:hover{ background:var(--s1-blue-dark); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,173,239,.45); }
.ksg-td__ok{ grid-column:1/-1; margin:0; text-align:center; color:#0a7d3b;
  background:#e8f9ef; border:1px solid #b7ecc9; border-radius:10px; padding:12px 14px; font-size:14px; }
@media(max-width:560px){ .ksg-td__form{ grid-template-columns:1fr; } }

/* =====================================================================
   HERO BANNER — ảnh mới KSG (hiển thị đầy đủ, canh đẹp mobile)
   ===================================================================== */
.block-home-banner .swiper-slide .field-image{ line-height:0; }
/* Cố định chiều cao slide = tỉ lệ ảnh slide đầu (1400x600), ảnh lấp đầy khung */
.block-home-banner .swiper-slide .field-image,
.block-home-banner .swiper-slide picture{
  display:block !important; width:100% !important;
  aspect-ratio:1400/600 !important; overflow:hidden !important;
}
.block-home-banner .swiper-slide .field-image img,
.block-home-banner .swiper-slide picture img{
  width:100% !important; height:100% !important; display:block !important;
  object-fit:cover !important; object-position:center center !important; max-height:none !important;
}
/* các slide cùng chiều cao, không để swiper cắt đáy */
.block-home-banner .swiper-home-banner,
.block-home-banner .swiper-wrapper,
.block-home-banner .swiper-slide{ height:auto !important; overflow:visible !important; }
.block-home-banner .swiper-home-banner{ overflow:hidden !important; }

/* =====================================================================
   PIN & TRẠM SẠC + THIẾT BỊ SẠC (KSG) — dựng lại 2 thẻ đồng đều
   ===================================================================== */
.ksg-charge{ max-width:1200px; margin:0 auto; padding:44px 20px; }
.ksg-charge__in{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.ksg-ccard{ position:relative; display:flex; border-radius:18px; overflow:hidden; min-height:340px;
  text-decoration:none; box-shadow:0 12px 34px rgba(0,38,91,.10); transition:transform .2s, box-shadow .2s; }
.ksg-ccard:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,38,91,.16); }
.ksg-ccard h3{ margin:0 0 8px; font-size:21px; font-weight:800; }
.ksg-ccard p{ margin:0 0 14px; font-size:14px; line-height:1.55; }
.ksg-ccard__more{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase; }
.ksg-ccard__more::after{ content:"→"; font-size:15px; transition:transform .2s; }
.ksg-ccard:hover .ksg-ccard__more::after{ transform:translateX(4px); }
/* Thẻ ảnh (Pin & Trạm sạc) */
.ksg-ccard--photo{ align-items:flex-end; }
.ksg-ccard--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ksg-ccard--photo .ksg-ccard__ov{ position:relative; z-index:2; padding:28px; color:#fff;
  width:100%; background:linear-gradient(to top, rgba(0,20,45,.9) 0%, rgba(0,20,45,.35) 55%, rgba(0,20,45,0) 100%); }
.ksg-ccard--photo h3{ color:#fff !important; }
.ksg-ccard--photo p{ color:#dbe6f5; max-width:90%; }
.ksg-ccard--photo .ksg-ccard__more{ color:#7fd4f8; }
/* Thẻ sáng (Thiết bị sạc di động) */
.ksg-ccard--light{ flex-direction:column; justify-content:space-between; padding:28px;
  background:linear-gradient(135deg,#f2f8fd,#e7f1fb); }
.ksg-ccard--light h3{ color:var(--s1-navy) !important; }
.ksg-ccard--light p{ color:#5a6675; }
.ksg-ccard--light .ksg-ccard__more{ color:var(--s1-blue); }
.ksg-ccard__prod{ width:auto; max-width:62%; max-height:190px; object-fit:contain; align-self:center; margin-top:8px; }
@media(max-width:820px){
  .ksg-charge__in{ grid-template-columns:1fr; }
  .ksg-ccard{ min-height:280px; }
  .ksg-ccard__prod{ max-height:170px; }
}

/* =====================================================================
   BẢO HÀNH & DỊCH VỤ — responsive đẹp trên mobile
   ===================================================================== */
@media(max-width:820px){
  #block-service{ background-position:center right -120px !important; background-size:cover !important; }
  #block-service .row{ margin:0 !important; }
  #block-service .col-lg-4{ width:100% !important; max-width:100% !important; flex:0 0 100% !important;
    margin:0 !important; padding:0 !important; }
  #block-service .card{ background:rgba(255,255,255,.82); backdrop-filter:blur(2px);
    border-radius:16px; padding:22px !important; }
  #block-service .field-view-more{ display:flex; flex-wrap:wrap; gap:10px; }
  #block-service .field-view-more .btn{ flex:1 1 auto; text-align:center; justify-content:center; }
}

/* =====================================================================
   FOOTER KSG — dựng lại gọn đẹp (dark navy)
   ===================================================================== */
.ksg-footer{ background:linear-gradient(160deg,#0a1f3d,#00152b); color:#c7d3e2; }
.ksg-footer__in{ max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; padding:52px 20px 30px; }
.ksg-footer__col h4{ color:#fff; font-size:15px; font-weight:700; letter-spacing:.4px;
  margin:0 0 18px; position:relative; padding-bottom:10px; }
.ksg-footer__col h4::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--s1-blue); }
/* brand col */
.ksg-flogo{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ksg-flogo__img{ height:34px; filter:brightness(0) invert(1); }
.ksg-flogo__sub{ display:inline-flex; flex-direction:column; line-height:1; padding-left:10px; border-left:2px solid var(--s1-blue); }
.ksg-flogo__sub b{ font-size:16px; font-weight:800; color:#fff; letter-spacing:.5px; }
.ksg-flogo__sub i{ font-size:10px; font-style:normal; font-weight:600; color:var(--s1-blue); letter-spacing:2px; text-transform:uppercase; margin-top:2px; }
.ksg-footer__tag{ font-size:14px; line-height:1.6; color:#9fb2c9; max-width:380px; margin:0 0 18px; }
.ksg-footer__bct{ height:46px; }
/* links */
.ksg-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ksg-footer__links a{ color:#c7d3e2; text-decoration:none; font-size:14px; transition:color .2s, padding .2s; }
.ksg-footer__links a:hover{ color:#fff; padding-left:5px; }
/* contact */
.ksg-footer__contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.ksg-footer__contact li, .ksg-footer__contact li a{ display:flex; align-items:flex-start; gap:10px;
  color:#c7d3e2; text-decoration:none; font-size:14px; line-height:1.4; }
.ksg-footer__contact svg{ width:18px; height:18px; flex:0 0 18px; color:var(--s1-blue); margin-top:1px; }
.ksg-footer__contact li a:hover span{ color:#fff; }
.ksg-footer__social{ display:flex; gap:10px; margin-top:20px; }
.ksg-footer__social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:grid; place-items:center; color:#c7d3e2; transition:background .2s, color .2s; }
.ksg-footer__social svg{ width:18px; height:18px; }
.ksg-footer__social a:hover{ background:var(--s1-blue); color:#fff; }
/* bottom bar */
.ksg-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); text-align:center;
  padding:18px 20px; font-size:13px; color:#8296b0; }
@media(max-width:900px){ .ksg-footer__in{ grid-template-columns:1fr 1fr; gap:30px; }
  .ksg-footer__brand{ grid-column:1/-1; } }
@media(max-width:560px){ .ksg-footer__in{ grid-template-columns:1fr; text-align:left; padding:40px 20px 24px; } }

/* Ép nền tối cho footer (thắng selector ID gốc #footer-wrapper) */
#footer-wrapper.ksg-footer{ background:linear-gradient(160deg,#0a1f3d,#00152b) !important; padding:0 !important; }
#footer-wrapper.ksg-footer *{ box-sizing:border-box; }
#footer-wrapper.ksg-footer .ksg-flogo__img{ max-height:32px; width:auto; }
#footer-wrapper.ksg-footer .ksg-footer__col h4{ color:#fff !important; }
#footer-wrapper.ksg-footer .ksg-footer__links a,
#footer-wrapper.ksg-footer .ksg-footer__contact li,
#footer-wrapper.ksg-footer .ksg-footer__contact li a span{ color:#c7d3e2 !important; }
#footer-wrapper.ksg-footer .ksg-footer__links a:hover,
#footer-wrapper.ksg-footer .ksg-footer__contact li a:hover span{ color:#fff !important; }

/* =====================================================================
   USP — thêm tiêu đề + tinh chỉnh thẻ
   ===================================================================== */
.ksg-usp{ padding-top:8px; }
.ksg-usp__head{ max-width:760px; margin:0 auto; text-align:center; padding:46px 20px 6px; }
.ksg-usp__eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--s1-blue); background:#e7f6fe; padding:5px 14px; border-radius:999px; }
.ksg-usp__head h2{ margin:14px 0 10px; font-size:clamp(24px,3.2vw,32px); font-weight:800; color:var(--s1-navy) !important; }
.ksg-usp__head p{ margin:0; color:#5a6675; font-size:15px; line-height:1.6; }
.ksg-usp__ic{ width:52px; height:52px; box-shadow:0 8px 18px rgba(0,173,239,.28); }
.ksg-usp__item{ background:#fff; border-color:#eef1f5; }
.ksg-usp__item:hover{ border-color:var(--s1-blue); }

/* =====================================================================
   PHỤ KIỆN XE — thẻ sản phẩm đẹp hơn
   ===================================================================== */
.accessory-section .header-section .title{ font-size:24px; font-weight:800; color:var(--s1-navy) !important; }
.accessory-section .show-more{ color:var(--s1-blue) !important; font-weight:700; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase; }
.accessory-section .product-card{
  border:1px solid #eef1f5 !important; border-radius:16px !important; overflow:hidden; background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; height:100%;
}
.accessory-section a:hover .product-card{
  transform:translateY(-6px); box-shadow:0 16px 34px rgba(0,38,91,.12); border-color:#cfe8fb !important;
}
.accessory-section .product-card > div:first-child{
  background:linear-gradient(135deg,#f7fafd,#eef4fa) !important; padding:22px !important;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.accessory-section .product-card img{ max-height:170px; width:auto; object-fit:contain;
  transition:transform .3s ease; }
.accessory-section a:hover .product-card img{ transform:scale(1.06); }
.accessory-section .product-card > div:last-child{ padding:16px 18px 20px !important; }
.accessory-section .product-title{ color:var(--s1-navy) !important; font-weight:700 !important;
  font-size:15px; min-height:42px; line-height:1.35; }
.accessory-section .product-price{ color:var(--s1-blue) !important; font-weight:800 !important;
  font-size:16px; margin-top:6px; }

/* =====================================================================
   ĐĂNG KÝ NHẬN THÔNG TIN — form nổi bật hơn
   ===================================================================== */
#communication-preference-form-wrapper{
  max-width:620px; margin:0 auto; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:30px 28px;
  backdrop-filter:blur(6px); box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.communication-preference-form > p:first-child{
  font-size:26px !important; font-weight:800 !important; color:#fff !important; margin:0 0 8px !important; }
.communication-preference-form .desc-1{ color:#dbe6f5 !important; font-size:14px !important; line-height:1.55; margin-bottom:18px !important; }
.communication-preference-form .user-input{ display:flex; gap:10px; background:#fff; border-radius:999px; padding:6px; }
.communication-preference-form .form-item-email{ flex:1; margin:0 !important; }
.communication-preference-form .form-email{
  width:100%; height:46px; border:none !important; background:transparent !important;
  padding:0 18px !important; font-size:15px; box-shadow:none !important; }
.communication-preference-form .form-email:focus{ outline:none; }
.communication-preference-form .btn-submit-form{
  height:46px !important; border-radius:999px !important; padding:0 30px !important;
  background:var(--s1-blue) !important; border:none !important; font-weight:700 !important; white-space:nowrap; }
.communication-preference-form .btn-submit-form:hover{ background:var(--s1-blue-dark) !important; }
@media(max-width:560px){
  .communication-preference-form .user-input{ flex-direction:column; border-radius:14px; padding:10px; }
  .communication-preference-form .form-email{ height:44px; }
  .communication-preference-form .btn-submit-form{ width:100%; }
}

/* =====================================================================
   ĐỒNG BỘ ĐỘ RỘNG: topbar + header + sections = 1200px canh giữa
   ===================================================================== */
:root{ --ksg-maxw:1200px; }
/* Header desktop: nội dung canh giữa 1200 (nền vẫn full width) */
@media(min-width:1025px){
  #header .header-container.header-nav{
    max-width:var(--ksg-maxw) !important; margin:0 auto !important;
    padding-left:20px !important; padding-right:20px !important; box-sizing:border-box !important;
    width:100% !important;
  }
}
/* Top bar & các section dùng chung 1 khung 1200 */
.ksg-topbar__in,
.ksg-usp__in, .ksg-usp__head,
.ksg-charge, .ksg-footer__in{
  max-width:var(--ksg-maxw) !important; margin-left:auto !important; margin-right:auto !important;
  padding-left:20px !important; padding-right:20px !important; box-sizing:border-box !important;
}
/* Phụ kiện: khung container về 1200 */
.accessory-section .container{ max-width:var(--ksg-maxw) !important; padding-left:20px; padding-right:20px; }
/* ksg-charge grid không cần padding kép */
.ksg-charge{ padding-top:44px; padding-bottom:44px; }

/* Above-menu (top bar) chỉnh gọn đẹp hơn */
.ksg-topbar{ font-size:13px; }
.ksg-topbar__in{ min-height:38px; padding-top:0; padding-bottom:0; }
.ksg-topbar__item, .ksg-topbar__badge{ line-height:38px; }
.ksg-topbar__item svg, .ksg-topbar__item svg *{ vertical-align:middle; }

/* Top bar: bỏ badge, canh nội dung về phải khớp lề menu */
.ksg-topbar__in{ justify-content:flex-end !important; gap:22px !important; }
.ksg-topbar .ksg-topbar__item:first-of-type{ margin-left:0 !important; }

/* Header phải: chạm đúng mép phải khung 1200 (khớp topbar) */
@media(min-width:1025px){
  #header .pc-header, #header .header-nav-main{ width:100% !important; }
  #header .header-nav-main{ padding-right:0 !important; }
  #header .box-car-head{ margin-left:auto !important; padding-right:0 !important; }
}

/* Ép cụm header phải chạm mép 1300 (khớp topbar) */
@media(min-width:1025px){
  #header .header-container.header-nav > .pc-header,
  #header .pc-header{ flex:1 1 100% !important; width:100% !important; }
  #header .box-car-head{ width:auto !important; justify-content:flex-end !important; margin-left:auto !important; }
}

/* Canh mép phải topbar trùng mép phải nút menu (ĐĂNG KÝ LÁI THỬ) */
@media(min-width:1025px){
  .ksg-topbar__in{ padding-right:69px !important; }
}

/* =====================================================================
   TIN TỨC & BLOG (KSG)
   ===================================================================== */
.ksg-news{ background:#f6f9fc; }
.ksg-news__in{ max-width:var(--ksg-maxw); margin:0 auto; padding:56px 20px; }
.ksg-news__head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; gap:16px; }
.ksg-news__eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--s1-blue); }
.ksg-news__head h2{ margin:6px 0 0; font-size:clamp(24px,3vw,30px); font-weight:800; color:var(--s1-navy) !important; }
.ksg-news__all{ color:var(--s1-blue) !important; font-weight:700; font-size:13px; letter-spacing:.4px;
  text-transform:uppercase; white-space:nowrap; }
.ksg-news__all:hover{ text-decoration:underline; }
.ksg-news__grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; }
.ksg-post{ display:block; text-decoration:none; background:#fff; border:1px solid #e9eef4;
  border-radius:16px; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.ksg-post:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,38,91,.12); border-color:#cfe8fb; }
.ksg-post__img{ position:relative; overflow:hidden; background:#eef4fa; }
.ksg-post__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.ksg-post:hover .ksg-post__img img{ transform:scale(1.05); }
.ksg-post__cat{ position:absolute; top:14px; left:14px; background:var(--s1-blue); color:#fff;
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; }
.ksg-post__body{ padding:20px; }
.ksg-post__meta{ font-size:12px; color:#8090a3; margin-bottom:8px; }
.ksg-post__body h3{ margin:0 0 10px; color:var(--s1-navy) !important; font-weight:700; line-height:1.35; }
.ksg-post__body p{ margin:0 0 12px; color:#5a6675; font-size:14px; line-height:1.6; }
.ksg-post__more{ color:var(--s1-blue); font-weight:700; font-size:13px; }
.ksg-post__more::after{ content:" →"; }
/* Bài nổi bật */
.ksg-post--feature .ksg-post__img{ aspect-ratio:16/9; }
.ksg-post--feature .ksg-post__body h3{ font-size:20px; }
/* Cột bài phụ */
.ksg-news__side{ display:flex; flex-direction:column; gap:16px; }
.ksg-post--row{ display:grid; grid-template-columns:120px 1fr; }
.ksg-post--row .ksg-post__img{ aspect-ratio:1/1; }
.ksg-post--row .ksg-post__body{ padding:14px 16px; display:flex; flex-direction:column; justify-content:center; }
.ksg-post--row .ksg-post__body h3{ font-size:15px; margin-bottom:8px; }
@media(max-width:820px){
  .ksg-news__grid{ grid-template-columns:1fr; }
}
@media(max-width:480px){
  .ksg-post--row{ grid-template-columns:96px 1fr; }
}

/* =====================================================================
   XE BÁN CHẠY / DÒNG XE DỊCH VỤ (KSG) — thẻ sản phẩm kiểu bảng giá
   ===================================================================== */
.ksg-products{ background:#fff; }
.ksg-products--alt{ background:#f6f9fc; }
.ksg-products__in{ max-width:var(--ksg-maxw); margin:0 auto; padding:52px 20px; }
.ksg-products__title{ text-align:center; font-size:clamp(24px,3.4vw,34px); font-weight:800;
  color:var(--s1-navy) !important; margin:0 0 34px; }
.ksg-products__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ksg-pcard{ display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid #eef1f5; border-radius:12px; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.ksg-pcard:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(0,38,91,.12); border-color:#cfe8fb; }
.ksg-pcard__img{ aspect-ratio:4/3; background:#f4f6f8; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ksg-pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ksg-pcard:hover .ksg-pcard__img img{ transform:scale(1.05); }
.ksg-pcard__name{ background:#1f2229; color:#fff; text-align:center; font-weight:700;
  font-size:15px; padding:11px 10px; }
.ksg-pcard__price{ text-align:center; color:#e11b22; font-weight:800; font-size:18px; padding:16px 10px 12px; }
.ksg-pcard__btn{ align-self:center; margin:0 0 18px; background:#e11b22; color:#fff; font-weight:700;
  font-size:13px; padding:9px 20px; border-radius:6px; transition:background .2s; }
.ksg-pcard:hover .ksg-pcard__btn{ background:#c2151b; }
@media(max-width:960px){ .ksg-products__grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .ksg-products__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .ksg-products__grid{ grid-template-columns:1fr; } }

/* Top bar mới: địa chỉ + giờ sát trái, hotline sát phải */
@media(min-width:1025px){
  .ksg-topbar__in{ justify-content:flex-start !important; gap:26px !important; }
  .ksg-topbar__phone{ margin-left:auto !important; font-weight:700 !important; }
}
.ksg-topbar .ksg-topbar__item:first-of-type{ margin-left:0 !important; }

/* Menu items đẹp hơn (sau khi bỏ nút điện thoại) */
@media(min-width:1025px){
  .mega_menu_header .mega_main{ margin:0 6px !important; }
  .mega_menu_header .mega_main > a{
    font-weight:600 !important; font-size:15px !important; color:#1a2b45 !important;
    padding:10px 14px !important; border-radius:8px; transition:color .2s, background .2s;
  }
  .mega_menu_header .mega_main > a:hover{ color:var(--s1-blue) !important; background:#eaf7fe; }
  .mega_menu_header .mega_main > a::after{ display:none !important; }
}

/* Top bar: nhóm trái (địa chỉ+giờ) — phải (hotline) */
.ksg-topbar__in{ justify-content:space-between !important; }
.ksg-topbar__left{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.ksg-topbar__phone{ font-weight:700 !important; }

/* Giá sản phẩm: đỏ như mẫu (thắng rule giá xanh chung) */
.ksg-pcard .ksg-pcard__price{ color:#e11b22 !important; }

/* =====================================================================
   OVERRIDE: Xe bán chạy / Dịch vụ -> HÀNG CUỘN NGANG như Phụ kiện xe
   ===================================================================== */
.ksg-products__title{ text-align:left !important; margin:0 !important; font-size:24px !important; }
.ksg-products__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.ksg-products__more{ color:var(--s1-blue) !important; font-weight:700; font-size:13px;
  letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; }
.ksg-products__more:hover{ text-decoration:underline; }
/* Hàng cuộn ngang */
.ksg-products__grid{
  display:flex !important; grid-template-columns:none !important;
  gap:20px !important; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:10px; -webkit-overflow-scrolling:touch;
}
.ksg-products__grid::-webkit-scrollbar{ height:8px; }
.ksg-products__grid::-webkit-scrollbar-thumb{ background:#cfd9e6; border-radius:99px; }
.ksg-pcard{ flex:0 0 calc((100% - 60px)/4); scroll-snap-align:start; min-width:230px; }
/* Thẻ kiểu phụ kiện: ảnh nền sáng, tên navy, không dùng thanh đen */
.ksg-pcard{ border:1px solid #eef1f5 !important; border-radius:16px !important; }
.ksg-pcard__img{ aspect-ratio:4/3; background:linear-gradient(135deg,#f7fafd,#eef4fa) !important; }
.ksg-pcard__img img{ object-fit:cover; }
.ksg-pcard__name{ background:transparent !important; color:var(--s1-navy) !important;
  font-weight:700 !important; font-size:15px !important; text-align:center !important; padding:14px 12px 4px !important; }
.ksg-pcard__price{ padding:2px 12px 12px !important; font-size:17px !important; }
.ksg-pcard__btn{ margin:0 0 16px !important; }
@media(max-width:1024px){ .ksg-pcard{ flex-basis:calc((100% - 40px)/3); } }
@media(max-width:680px){ .ksg-pcard{ flex-basis:calc((100% - 20px)/2); } }
@media(max-width:460px){ .ksg-pcard{ flex-basis:78%; } }

/* =====================================================================
   Đồng bộ 2 section xe với section showcase phía trên
   ===================================================================== */
/* Giá: xanh electric giống bảng thông số xe ở trên */
.ksg-products .ksg-pcard .ksg-pcard__price{ color:var(--s1-blue) !important; font-weight:800 !important; }
/* Nút "Xem chi tiết": outline xanh, pill, in hoa — giống nút XEM CHI TIẾT ở showcase */
.ksg-pcard .ksg-pcard__btn{
  background:#fff !important; color:var(--s1-blue) !important;
  border:1.5px solid var(--s1-blue) !important; border-radius:999px !important;
  font-weight:700 !important; font-size:12px !important; letter-spacing:.6px !important;
  text-transform:uppercase !important; padding:9px 22px !important; transition:all .2s !important;
}
.ksg-pcard:hover .ksg-pcard__btn{ background:var(--s1-blue) !important; color:#fff !important; }

/* Ảnh xe: hiển thị trọn vẹn, không tràn khung */
.ksg-pcard .ksg-pcard__img{ overflow:hidden !important; padding:12px !important; }
.ksg-pcard .ksg-pcard__img img{ width:100% !important; height:100% !important;
  object-fit:contain !important; transform:none !important; }
.ksg-pcard:hover .ksg-pcard__img img{ transform:scale(1.04) !important; }

/* Canh logo thẳng lề trái với địa chỉ ở top bar */
@media(min-width:1025px){
  #header .header-nav-main{ padding-left:0 !important; }
  #header .pc-header .header-logo{ margin-left:0 !important; padding-left:0 !important; }
  #header .pc-header nav, #header .pc-header .header-column:first-child{ padding-left:0 !important; margin-left:0 !important; }
}

/* =========================================================
   SUB-PAGES (Giới thiệu / Bảng giá / Liên hệ / Tin tức)
   ========================================================= */
:root{ --s1-ink:#1f2a37; --s1-muted:#5b6672; --s1-bg:#f4f7fb; --s1-line:#e3e8ef; }

.ksg-eyebrow{display:inline-block;color:var(--s1-blue);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.ksg-btn-primary{display:inline-block;background:var(--s1-blue);color:#fff !important;font-weight:800;padding:13px 26px;border-radius:8px;text-decoration:none;transition:.2s}
.ksg-btn-primary:hover{background:var(--s1-blue-dark)}
.ksg-btn-ghost{display:inline-block;background:transparent;color:#fff !important;font-weight:800;padding:13px 26px;border-radius:8px;border:2px solid rgba(255,255,255,.7);text-decoration:none;transition:.2s}
.ksg-btn-ghost:hover{background:rgba(255,255,255,.14)}

/* breadcrumb + page head */
.ksg-crumb{background:var(--s1-bg);border-bottom:1px solid var(--s1-line)}
.ksg-crumb__in{max-width:var(--ksg-maxw);margin:0 auto;padding:12px 20px;font-size:14px;color:var(--s1-muted)}
.ksg-crumb__in a{color:var(--s1-muted);text-decoration:none}
.ksg-crumb__in a:hover{color:var(--s1-blue)}
.ksg-crumb__in span{margin:0 8px;opacity:.6}
.ksg-crumb__in b{color:var(--s1-navy)}
.ksg-phead{background:var(--s1-navy)}
.ksg-phead__in{max-width:var(--ksg-maxw);margin:0 auto;padding:40px 20px}
.ksg-phead h1{color:#fff !important;margin:0 !important;font-size:32px !important;font-weight:800 !important;line-height:1.2 !important;padding:0 !important}

/* generic section wrappers */
.ksg-about__in,.ksg-stats__in,.ksg-cta__in,.ksg-price__in,.ksg-contact__in,.ksg-newslist__in{max-width:var(--ksg-maxw);margin:0 auto;padding:56px 20px}

/* about */
.ksg-about__in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.ksg-about__media img{width:100%;border-radius:14px;display:block;box-shadow:0 14px 34px rgba(0,38,91,.14)}
.ksg-about__text h2{color:var(--s1-navy);font-size:27px;font-weight:800;margin:0 0 16px}
.ksg-about__text p{color:var(--s1-muted);line-height:1.75;margin:0 0 14px}
.ksg-about__text .ksg-btn-primary{margin-top:8px}

/* stats */
.ksg-stats{background:var(--s1-bg)}
.ksg-stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:40px;padding-bottom:40px}
.ksg-stat{text-align:center}
.ksg-stat b{display:block;font-size:34px;font-weight:800;color:var(--s1-blue);line-height:1}
.ksg-stat span{display:block;margin-top:8px;color:var(--s1-muted);font-weight:600;font-size:14px}

/* CTA band */
.ksg-cta{background:linear-gradient(135deg,var(--s1-navy),var(--s1-blue-dark))}
.ksg-cta__in{text-align:center}
.ksg-cta h2{color:#fff;font-size:26px;font-weight:800;margin:0 0 10px}
.ksg-cta p{color:rgba(255,255,255,.9);margin:0 0 22px}
.ksg-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* pricing table */
.ksg-price__lead{color:var(--s1-muted);line-height:1.7;margin:0 0 30px;font-size:15px}
.ksg-price__lead a{color:var(--s1-blue);font-weight:700;text-decoration:none}
.ksg-price__cat{color:var(--s1-navy);font-size:20px;font-weight:800;margin:28px 0 14px}
.ksg-tbwrap{overflow-x:auto;border:1px solid var(--s1-line);border-radius:12px}
.ksg-tb{width:100%;border-collapse:collapse;min-width:560px;background:#fff}
.ksg-tb thead th{background:var(--s1-navy);color:#fff;text-align:left;padding:14px 16px;font-size:14px;font-weight:700}
.ksg-tb td{padding:14px 16px;border-top:1px solid var(--s1-line);font-size:15px;color:var(--s1-ink)}
.ksg-tb tbody tr:hover,.ksg-tb tbody tr:hover{background:var(--s1-bg)}
.ksg-tb__name{font-weight:700;color:var(--s1-navy)}
.ksg-tb__price{font-weight:800;color:var(--s1-blue);white-space:nowrap}
.ksg-tb__btn{display:inline-block;border:2px solid var(--s1-blue);color:var(--s1-blue) !important;padding:6px 16px;border-radius:7px;text-decoration:none;font-weight:700;font-size:13px;transition:.2s}
.ksg-tb__btn:hover{background:var(--s1-blue);color:#fff !important}
.ksg-price__note{color:var(--s1-muted);font-size:13px;margin-top:20px;font-style:italic}

/* contact */
.ksg-contact__in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ksg-contact__info h2,.ksg-contact__form h2{color:var(--s1-navy);font-size:24px;font-weight:800;margin:0 0 20px}
.ksg-cinfo{list-style:none;padding:0;margin:0 0 26px}
.ksg-cinfo li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--s1-line)}
.ksg-cinfo__ic{flex:0 0 40px;height:40px;width:40px;border-radius:9px;background:var(--s1-bg);display:flex;align-items:center;justify-content:center}
.ksg-cinfo__ic svg{width:20px;height:20px;color:var(--s1-blue)}
.ksg-cinfo b{color:var(--s1-navy);display:block;font-size:14px}
.ksg-cinfo p{margin:2px 0 0;color:var(--s1-muted)}
.ksg-cinfo a{color:var(--s1-muted);text-decoration:none}
.ksg-cinfo a:hover{color:var(--s1-blue)}
.ksg-map{position:relative;border-radius:12px;overflow:hidden}
.ksg-map img{width:100%;height:220px;object-fit:cover;display:block;filter:saturate(1.05)}
.ksg-map__pin{position:absolute;left:14px;bottom:14px;background:#fff;color:var(--s1-navy) !important;font-weight:700;font-size:13px;padding:8px 12px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ksg-map__pin svg{width:16px;height:16px;color:var(--s1-blue)}
.ksg-contact__form{background:#fff;border:1px solid #e6eef7;border-radius:18px;padding:34px clamp(22px,3vw,38px);box-shadow:0 20px 50px rgba(0,38,91,.10)}
.ksg-contact__form .ksg-td__head{text-align:left;margin-bottom:22px}
.ksg-contact__form .ksg-td__head h2{margin:0 0 8px}
.ksg-contact__form .ksg-td__head p{margin:0;max-width:none;text-align:left}
.ksg-field--full{grid-column:1/-1}
.ksg-field textarea{
  border:1px solid #d5e0ec;border-radius:10px;padding:11px 13px;font-size:14px;color:#243b57;
  background:#fff;resize:vertical;font-family:inherit;}
.ksg-field textarea:focus{outline:none;border-color:var(--s1-blue);box-shadow:0 0 0 3px rgba(0,173,239,.15)}

/* news list */
.ksg-newslist__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ksg-newslist .ksg-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--s1-line);border-radius:14px;overflow:hidden;text-decoration:none;transition:.2s}
.ksg-newslist .ksg-post:hover{box-shadow:0 14px 30px rgba(0,38,91,.12);transform:translateY(-3px)}
.ksg-newslist .ksg-post__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.ksg-newslist .ksg-post__img img{width:100%;height:100%;object-fit:cover}
.ksg-newslist .ksg-post__cat{position:absolute;top:12px;left:12px;background:var(--s1-blue);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px}
.ksg-newslist .ksg-post__body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1}
.ksg-newslist .ksg-post__meta{color:var(--s1-blue);font-size:12px;font-weight:700;margin-bottom:8px}
.ksg-newslist .ksg-post__body h3{color:var(--s1-navy);font-size:17px;font-weight:800;line-height:1.35;margin:0 0 10px}
.ksg-newslist .ksg-post__body p{color:var(--s1-muted);font-size:14px;line-height:1.6;margin:0 0 14px;flex:1}
.ksg-newslist .ksg-post__more{color:var(--s1-blue);font-weight:700;font-size:14px}

/* responsive */
@media(max-width:900px){
  .ksg-about__in,.ksg-contact__in{grid-template-columns:1fr;gap:28px}
  .ksg-stats__in{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .ksg-newslist__grid{grid-template-columns:1fr 1fr}
  .ksg-phead h1{font-size:26px}
}
@media(max-width:560px){
  .ksg-newslist__grid{grid-template-columns:1fr}
  .ksg-about__in,.ksg-stats__in,.ksg-cta__in,.ksg-price__in,.ksg-contact__in,.ksg-newslist__in{padding:38px 18px}
}

/* =========================================================
   FIX (mobile responsive topbar + slider tối/độ cao)
   ========================================================= */
/* 1) Bỏ lớp phủ tối (gradient đen) đè lên ảnh slide */
.block-home-banner .swiper-slide a::after{ content:none !important; display:none !important; background:none !important; }

/* 2) PC giữ nguyên tỉ lệ gốc; chỉ mobile tăng cao (xem media query bên dưới) */
.block-home-banner .swiper-slide .field-image,
.block-home-banner .swiper-slide picture{ aspect-ratio:1400/600 !important; }
.block-home-banner .swiper-slide .field-image img,
.block-home-banner .swiper-slide picture img{
  width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; aspect-ratio:auto !important; }
@media(max-width:767px){
  .block-home-banner .swiper-slide .field-image,
  .block-home-banner .swiper-slide picture{ aspect-ratio:1080/1180 !important; }
}

/* 3) Topbar gọn gàng, không tràn ngang trên mobile */
html,body{ overflow-x:hidden !important; }
.block-home-banner .swiper-home-banner{ max-width:100% !important; }
@media(max-width:820px){
  .ksg-topbar__in{
    flex-direction:column !important; align-items:flex-start !important;
    gap:3px !important; padding:8px 16px !important; row-gap:3px !important; }
  .ksg-topbar__item{ line-height:1.5 !important; font-size:13px !important; white-space:normal !important; }
  .ksg-topbar__phone{ font-weight:700 !important; }
}

/* =========================================================
   MOBILE MENU (drawer) — dùng chung items với desktop
   ========================================================= */
/* Ẩn menu mobile cũ của theme */
@media(max-width:991px){
  #block-hamburgermenu, #mobile-nav, #mobile-menu-overlay,
  .header-mobile-menu .menu.mega-submenu .block-megamainmenu.desktop-hover .close-menu{ }
  #block-hamburgermenu{ display:none !important; }
}
/* Nút hamburger: đảm bảo bấm được */
.header-mobile-menu #nav-icon-region{ cursor:pointer; }

/* Drawer */
.ksg-mnav{ position:fixed; inset:0; z-index:100000; display:none; }
.ksg-mnav.is-open{ display:block; }
.ksg-mnav__backdrop{ position:absolute; inset:0; background:rgba(0,15,35,.55); backdrop-filter:blur(2px); }
.ksg-mnav__panel{
  position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
  background:#fff; box-shadow:-12px 0 40px rgba(0,20,45,.25);
  display:flex; flex-direction:column; padding:18px 20px 24px;
  transform:translateX(100%); transition:transform .28s ease;
}
.ksg-mnav.is-open .ksg-mnav__panel{ transform:translateX(0); }
.ksg-mnav__top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #eef1f5; margin-bottom:8px; }
.ksg-mnav__brand{ display:flex; flex-direction:column; line-height:1.05; }
.ksg-mnav__brand b{ color:var(--s1-navy); font-weight:800; font-size:17px; letter-spacing:.5px; }
.ksg-mnav__brand i{ color:var(--s1-blue); font-style:normal; font-weight:700; font-size:12px; }
.ksg-mnav__close{ background:none; border:0; color:var(--s1-navy); padding:6px; cursor:pointer; line-height:0; }
.ksg-mnav__links{ display:flex; flex-direction:column; padding:6px 0; }
.ksg-mnav__links a{
  padding:15px 6px; font-size:16px; font-weight:600; color:var(--s1-navy) !important;
  text-decoration:none; border-bottom:1px solid #f1f4f8; transition:color .15s, padding-left .15s;
}
.ksg-mnav__links a:hover{ color:var(--s1-blue) !important; padding-left:12px; }
.ksg-mnav__cta{
  margin-top:16px; text-align:center; background:var(--s1-blue); color:#fff !important;
  font-weight:800; padding:13px 18px; border-radius:8px; text-decoration:none;
}
.ksg-mnav__cta:hover{ background:var(--s1-blue-dark); }
.ksg-mnav__hotline{
  margin-top:14px; display:inline-flex; align-items:center; gap:8px; justify-content:center;
  color:var(--s1-navy) !important; font-weight:700; font-size:15px; text-decoration:none;
}
.ksg-mnav__hotline svg{ color:var(--s1-blue); }
/* Desktop: không bao giờ hiện drawer */
@media(min-width:992px){ .ksg-mnav{ display:none !important; } }

/* =========================================================
   CAR DETAIL (trang chi tiết xe)
   ========================================================= */
.ksg-cdt__in{max-width:var(--ksg-maxw);margin:0 auto;padding:44px 20px 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.ksg-cdt__main{background:#f4f7fb;border:1px solid #e6eef7;border-radius:16px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ksg-cdt__main img{width:100%;height:100%;object-fit:contain;padding:16px}
.ksg-cdt__thumbs{display:flex;gap:12px;margin-top:14px}
.ksg-cdt__thumb{flex:1;background:#f4f7fb;border:2px solid #e6eef7;border-radius:11px;padding:6px;cursor:pointer;aspect-ratio:4/3;overflow:hidden;transition:border-color .15s}
.ksg-cdt__thumb img{width:100%;height:100%;object-fit:contain}
.ksg-cdt__thumb.is-active{border-color:var(--s1-blue)}
.ksg-cdt__eyebrow{display:inline-block;color:var(--s1-blue);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.ksg-cdt__name{color:var(--s1-navy) !important;font-size:clamp(28px,4vw,40px);font-weight:800;margin:0 0 12px}
.ksg-cdt__desc{color:#5a6675;line-height:1.7;margin:0 0 18px}
.ksg-cdt__price{display:flex;flex-direction:column;gap:2px;margin:0 0 18px}
.ksg-cdt__price span{color:#8a97a6;font-size:13px;font-weight:600}
.ksg-cdt__price b{color:var(--s1-blue);font-size:30px;font-weight:800;line-height:1}
.ksg-cdt__hl{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.ksg-cdt__hl li{display:flex;align-items:flex-start;gap:10px;color:#243b57;font-weight:600;font-size:15px}
.ksg-cdt__hl li svg{width:20px !important;height:20px !important;max-width:20px !important;min-width:20px;color:var(--s1-blue);flex:0 0 20px;margin-top:2px}
.ksg-cdt__btns{display:flex;gap:12px;flex-wrap:wrap}
.ksg-cdt__btns .ksg-btn-primary{padding:14px 24px}
.ksg-btn-ghost--blue{border-color:var(--s1-blue) !important;color:var(--s1-blue) !important}
.ksg-btn-ghost--blue:hover{background:rgba(0,173,239,.08)}
/* spec */
.ksg-spec__in{max-width:var(--ksg-maxw);margin:0 auto;padding:52px 20px}
.ksg-spec__title{color:var(--s1-navy);font-size:24px;font-weight:800;margin:0 0 18px;text-align:center}
.ksg-tb--spec tbody tr td:first-child{width:42%;background:#f7fafd}
.ksg-tb--spec td{border-top:1px solid var(--s1-line)}
@media(max-width:860px){
  .ksg-cdt__in{grid-template-columns:1fr;gap:26px;padding-top:30px}
  .ksg-cdt__btns{flex-direction:column}
  .ksg-cdt__btns .ksg-btn-primary,.ksg-cdt__btns .ksg-btn-ghost{text-align:center}
}

/* Link tên xe trong bảng giá */
.ksg-tb__name a{color:var(--s1-navy) !important;text-decoration:none;font-weight:700}
.ksg-tb__name a:hover{color:var(--s1-blue) !important}

/* =========================================================
   ARTICLE (bài viết tin tức)
   ========================================================= */
.ksg-art__in{max-width:820px;margin:0 auto;padding:42px 20px 54px}
.ksg-art__cat{display:inline-block;background:var(--s1-blue);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:6px;margin-bottom:14px}
.ksg-art__title{color:var(--s1-navy) !important;font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.25;margin:0 0 12px}
.ksg-art__meta{color:#8a97a6;font-size:14px;font-weight:600;margin-bottom:22px}
.ksg-art__cover{border-radius:14px;overflow:hidden;margin-bottom:26px;background:#f4f7fb}
.ksg-art__cover img{width:100%;height:auto;display:block}
.ksg-art__body p{color:#374757;line-height:1.85;font-size:16px;margin:0 0 18px}
.ksg-art__body h2{color:var(--s1-navy) !important;font-size:21px;font-weight:800;margin:28px 0 12px}
.ksg-art__cta{margin-top:34px;background:linear-gradient(135deg,#f2f7fc,#e7f1fb);border:1px solid #e6eef7;border-radius:16px;padding:28px}
.ksg-art__cta h3{color:var(--s1-navy) !important;font-size:19px;font-weight:800;margin:0 0 8px}
.ksg-art__cta p{color:#5a6675;margin:0 0 18px}
.ksg-art__cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.ksg-art__back{display:inline-block;margin-top:26px;color:var(--s1-blue) !important;font-weight:700;text-decoration:none}
.ksg-art__back:hover{text-decoration:underline}
@media(max-width:560px){ .ksg-art__cta-btns{flex-direction:column} .ksg-art__cta-btns a{text-align:center} }

/* =========================================================
   MAP — section trang chủ (gọn) + mini map footer + contact
   ========================================================= */
.ksg-mapsec{background:#f4f7fb}
.ksg-mapsec__in{max-width:var(--ksg-maxw);margin:0 auto;padding:48px 20px}
.ksg-mapsec__card{display:grid;grid-template-columns:340px 1fr;background:#fff;border:1px solid #e6eef7;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(0,38,91,.10)}
.ksg-mapsec__info{padding:32px 30px;display:flex;flex-direction:column}
.ksg-mapsec__info h2{color:var(--s1-navy) !important;font-size:24px;font-weight:800;margin:8px 0 18px}
.ksg-mapsec__list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:14px}
.ksg-mapsec__list li{display:flex;gap:12px;align-items:flex-start}
.ksg-mapsec__ic{flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:#eef6fe;display:flex;align-items:center;justify-content:center}
.ksg-mapsec__ic svg{width:18px;height:18px;color:var(--s1-blue)}
.ksg-mapsec__list b{display:block;color:var(--s1-navy);font-size:13px;margin-bottom:2px}
.ksg-mapsec__list span{color:#5a6675;font-size:14px;line-height:1.4}
.ksg-mapsec__list a{color:var(--s1-blue) !important;font-weight:700;text-decoration:none}
.ksg-mapsec__btn{margin-top:auto;text-align:center}
.ksg-mapsec__map{min-height:300px;line-height:0}
.ksg-mapsec__map iframe{width:100%;height:100%;min-height:300px;border:0;display:block}
@media(max-width:820px){
  .ksg-mapsec__card{grid-template-columns:1fr}
  .ksg-mapsec__map{min-height:260px}
  .ksg-mapsec__map iframe{min-height:260px}
}

/* mini map trong footer */
.ksg-footer__map{max-width:var(--ksg-maxw);margin:0 auto;padding:0 24px 22px;line-height:0}
.ksg-footer__map iframe{width:100%;height:170px;border:0;border-radius:12px;display:block;filter:grayscale(.15)}
@media(max-width:768px){ .ksg-footer__map iframe{height:150px} }

/* contact page live map (giữ) */
.ksg-map--live{border-radius:12px;overflow:hidden;line-height:0}
.ksg-map--live iframe{width:100%;height:240px;border:0;display:block}
.ksg-map__dir{display:inline-block;margin-top:12px;color:var(--s1-blue) !important;font-weight:700;text-decoration:none}
.ksg-map__dir:hover{text-decoration:underline}

/* ===== Mobile: ẩn topbar, đưa nội dung vào burger menu ===== */
@media(max-width:991px){ .ksg-topbar{display:none !important;} }
.ksg-mnav__info{margin-top:auto;padding-top:18px;border-top:1px solid #eef1f5;display:flex;flex-direction:column;gap:12px}
.ksg-mnav__info-item{display:flex;align-items:center;gap:10px;color:#4a5765;font-size:14px;font-weight:500}
.ksg-mnav__info-ic{flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:#eef6fe;display:flex;align-items:center;justify-content:center}
.ksg-mnav__info-ic svg{width:16px;height:16px;color:var(--s1-blue)}
.ksg-mnav__hotline{margin-top:2px;display:inline-flex;align-items:center;gap:10px;color:var(--s1-navy) !important;font-weight:800;font-size:15px;text-decoration:none}
/* panel dạng cột để info đẩy xuống đáy */
.ksg-mnav__panel{overflow-y:auto}

/* =========================================================
   NEWSLETTER form "Đăng ký nhận thông tin" — nút đẹp hơn
   ========================================================= */
#communication-preference-form-wrapper .user-input{
  display:flex !important; gap:10px; align-items:stretch;
  background:#fff; border-radius:16px; padding:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.18); max-width:600px; margin:6px auto 0;
}
#communication-preference-form-wrapper .form-item-email,
#communication-preference-form-wrapper .js-form-type-email{ flex:1; margin:0 !important; }
#communication-preference-form-wrapper .form-control{
  width:100% !important; height:52px !important; border:0 !important; background:transparent !important;
  padding:0 18px !important; font-size:15px !important; color:#1f2a37 !important; box-shadow:none !important; border-radius:10px !important;
}
#communication-preference-form-wrapper .form-control:focus{ outline:none !important; box-shadow:none !important; }
#communication-preference-form-wrapper .btn-submit-form{
  position:static !important; top:auto !important; right:auto !important; transform:none !important;
  height:52px !important; padding:0 32px !important; border:0 !important; border-radius:11px !important;
  background:var(--s1-blue) !important; color:#fff !important; font-weight:800 !important; font-size:14px !important;
  letter-spacing:.4px; text-transform:uppercase; white-space:nowrap; cursor:pointer;
  box-shadow:0 8px 20px rgba(0,173,239,.40) !important; transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
#communication-preference-form-wrapper .btn-submit-form:hover{
  background:var(--s1-blue-dark) !important; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,173,239,.55) !important;
}
@media(max-width:560px){
  #communication-preference-form-wrapper .user-input{ flex-direction:column; padding:10px; }
  #communication-preference-form-wrapper .btn-submit-form{ width:100%; }
  #communication-preference-form-wrapper .form-control{ text-align:left; }
}

/* =========================================================
   TRANG Ô TÔ (grid xe) + TRANG DỊCH VỤ
   ========================================================= */
.ksg-carsgrid__in{max-width:var(--ksg-maxw);margin:0 auto;padding:44px 20px 20px}
.ksg-carsgrid__lead{color:#5a6675;line-height:1.7;margin:0 0 28px;font-size:15px;max-width:820px}
.ksg-carsgrid__lead b{color:var(--s1-navy)}
.ksg-carsgrid__head{margin:26px 0 16px}
.ksg-carsgrid__head h2{color:var(--s1-navy) !important;font-size:22px;font-weight:800;margin:0;position:relative;padding-left:14px}
.ksg-carsgrid__head h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:3px;background:var(--s1-blue)}
.ksg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ksg-grid .ksg-pcard{width:auto;min-width:0}
.ksg-carsgrid__more{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:38px 0 6px}
@media(max-width:1024px){ .ksg-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:720px){ .ksg-grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media(max-width:430px){ .ksg-grid{grid-template-columns:1fr} .ksg-carsgrid__more{flex-direction:column} .ksg-carsgrid__more a{text-align:center} }

/* dịch vụ: lưới 3 cột + quy trình */
.ksg-usp__in--3{grid-template-columns:repeat(3,1fr) !important}
@media(max-width:900px){ .ksg-usp__in--3{grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:560px){ .ksg-usp__in--3{grid-template-columns:1fr !important} }
.ksg-process{background:#f4f7fb}
.ksg-process__in{max-width:var(--ksg-maxw);margin:0 auto;padding:52px 20px}
.ksg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:6px}
.ksg-step{background:#fff;border:1px solid #e6eef7;border-radius:14px;padding:26px 22px;position:relative;transition:transform .2s,box-shadow .2s}
.ksg-step:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,38,91,.10)}
.ksg-step__no{display:inline-block;font-size:28px;font-weight:800;color:var(--s1-blue);line-height:1;margin-bottom:12px;letter-spacing:1px}
.ksg-step h4{color:var(--s1-navy) !important;font-size:16px;font-weight:800;margin:0 0 8px}
.ksg-step p{color:#5a6675;font-size:14px;line-height:1.6;margin:0}
@media(max-width:900px){ .ksg-steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .ksg-steps{grid-template-columns:1fr} }