/* =========================================================================
   Ô TÔ CẦN THƠ — Hệ thống giao diện
   Bảng màu: navy sâu làm nền sang, đỏ crimson cho hành động, vàng đồng cho
   điểm nhấn cao cấp. Đây là bộ màu các hãng xe hay dùng vì nó gợi cảm giác
   tin cậy mà không lạnh.
   ========================================================================= */

:root{
  --oto-navy:        #0B1A2E;
  --oto-navy-2:      #122744;
  --oto-navy-3:      #1B3557;
  --oto-do:          #D32027;
  --oto-do-dam:      #AE1A20;
  --oto-vang:        #C8A961;
  --oto-vang-nhat:   #E4D2A3;
  --oto-nen:         #FFFFFF;
  --oto-nen-2:       #F6F8FB;
  --oto-nen-3:       #EDF1F7;
  --oto-vien:        #E2E8F0;
  --oto-chu:         #0B1A2E;
  --oto-chu-nhat:    #5A6676;
  --oto-chu-mo:      #8B96A5;
  --oto-trang-mo:    rgba(255,255,255,.72);

  --oto-rong:        1240px;
  --oto-bo:          14px;
  --oto-bo-nho:      10px;
  --oto-bong:        0 1px 2px rgba(11,26,46,.05), 0 8px 24px rgba(11,26,46,.06);
  --oto-bong-cao:    0 2px 6px rgba(11,26,46,.07), 0 18px 48px rgba(11,26,46,.12);
  --oto-chuyen:      .22s cubic-bezier(.4,0,.2,1);

  --oto-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- Nền tảng ----------------------------------------------------------- */

body.oto-site{
  margin:0; font-family:var(--oto-font); color:var(--oto-chu);
  background:var(--oto-nen); line-height:1.6; -webkit-font-smoothing:antialiased;
}
body.oto-site *,body.oto-site *::before,body.oto-site *::after{box-sizing:border-box}
.oto-site img{max-width:100%;height:auto;display:block}
.oto-site a{color:inherit;text-decoration:none}
.oto-site h1,.oto-site h2,.oto-site h3,.oto-site h4{
  font-family:var(--oto-font); line-height:1.18; letter-spacing:-.015em;
  margin:0; font-weight:800; color:var(--oto-navy);
}
.oto-site p{margin:0 0 1em}
.oto-site p:last-child{margin-bottom:0}

.oto-wrap{max-width:var(--oto-rong);margin:0 auto;padding:0 24px;width:100%}
.oto-wrap-hep{max-width:880px;margin:0 auto;padding:0 24px;width:100%}

.oto-an-nho{display:block}
/* Ẩn khỏi mắt thường nhưng trình đọc màn hình vẫn đọc. Khác .oto-an-nho
   ở trên — lớp đó nghĩa là ẩn trên màn hình nhỏ. */
.oto-cc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.oto-chi-nho{display:none}

/* --- Nút ---------------------------------------------------------------- */

.oto-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--oto-bo-nho);font-weight:700;font-size:15.5px;
  border:1.5px solid transparent;cursor:pointer;transition:var(--oto-chuyen);
  font-family:inherit;white-space:nowrap;line-height:1.2;
}
.oto-btn-chinh{background:var(--oto-do);color:#fff;box-shadow:0 6px 18px rgba(211,32,39,.26)}
.oto-btn-chinh:hover{background:var(--oto-do-dam);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(211,32,39,.32)}
.oto-btn-zalo{background:#0068FF;color:#fff}
.oto-btn-zalo:hover{background:#0055d4;color:#fff;transform:translateY(-1px)}
.oto-btn-vien{background:transparent;color:var(--oto-navy);border-color:var(--oto-vien)}
.oto-btn-vien:hover{border-color:var(--oto-navy);background:var(--oto-navy);color:#fff}
.oto-btn-sang{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.oto-btn-sang:hover{background:#fff;color:var(--oto-navy);border-color:#fff}
.oto-btn-nho{padding:10px 20px;font-size:14px}

/* --- Thanh trên cùng ---------------------------------------------------- */

.oto-topbar{background:var(--oto-navy);color:var(--oto-trang-mo);font-size:13.5px;padding:9px 0}
.oto-topbar .oto-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.oto-topbar-trai{display:flex;align-items:center;gap:22px}
.oto-topbar-muc{display:flex;align-items:center;gap:7px}
.oto-topbar svg{width:14px;height:14px;flex:none;opacity:.8}
.oto-topbar a{color:var(--oto-trang-mo);transition:var(--oto-chuyen)}
.oto-topbar a:hover{color:#fff}
.oto-topbar-nhan{color:var(--oto-vang);font-weight:600}

/* --- Header ------------------------------------------------------------- */

.oto-header{
  background:#fff;border-bottom:1px solid var(--oto-vien);
  position:sticky;top:0;z-index:900;transition:box-shadow var(--oto-chuyen);
}
.oto-header.oto-dinh{box-shadow:0 4px 20px rgba(11,26,46,.09)}
.oto-header-in{display:flex;align-items:center;gap:30px;height:78px}

.oto-logo{display:flex;flex-direction:column;line-height:1.05;flex:none}
.oto-logo-ten{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--oto-navy)}
.oto-logo-ten em{color:var(--oto-do);font-style:normal}
.oto-logo-phu{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oto-chu-mo);font-weight:600;margin-top:3px}

.oto-nav{flex:1;display:flex;justify-content:center}
.oto-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.oto-nav li{position:relative}
.oto-nav>ul>li>a{
  display:flex;align-items:center;gap:5px;padding:11px 14px;border-radius:8px;
  font-size:15.5px;font-weight:600;color:var(--oto-navy);transition:var(--oto-chuyen);
}
.oto-nav>ul>li>a:hover{background:var(--oto-nen-2);color:var(--oto-do)}
.oto-nav>ul>li.current-menu-item>a,
.oto-nav>ul>li.current-menu-ancestor>a{color:var(--oto-do)}
.oto-nav li.menu-item-has-children>a::after{
  content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.5;
}
.oto-nav .sub-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:248px;background:#fff;
  border:1px solid var(--oto-vien);border-radius:var(--oto-bo);box-shadow:var(--oto-bong-cao);
  padding:8px;list-style:none;margin:0;display:block;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--oto-chuyen);
}
.oto-nav li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.oto-nav .sub-menu a{
  display:block;padding:10px 14px;border-radius:8px;font-size:14.5px;
  font-weight:500;color:var(--oto-chu-nhat);transition:var(--oto-chuyen);
}
.oto-nav .sub-menu a:hover{background:var(--oto-nen-2);color:var(--oto-do)}

.oto-header-cta{display:flex;align-items:center;gap:10px;flex:none}
.oto-header-sdt{display:flex;flex-direction:column;line-height:1.15;text-align:right;margin-right:4px}
.oto-header-sdt small{font-size:11px;color:var(--oto-chu-mo);font-weight:500}
.oto-header-sdt strong{font-size:18px;color:var(--oto-do);font-weight:800;letter-spacing:-.01em}

.oto-burger{
  display:none;width:46px;height:46px;border:1px solid var(--oto-vien);background:#fff;
  border-radius:10px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none;
}
.oto-burger span{display:block;width:20px;height:2px;background:var(--oto-navy);position:relative}
.oto-burger span::before,.oto-burger span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:var(--oto-navy);
}
.oto-burger span::before{top:-6px} .oto-burger span::after{top:6px}

/* Ngăn kéo menu trên điện thoại */
.oto-keo{
  position:fixed;inset:0;z-index:1000;background:rgba(11,26,46,.5);
  opacity:0;visibility:hidden;transition:var(--oto-chuyen);
}
.oto-keo.mo{opacity:1;visibility:visible}
.oto-keo-trong{
  position:absolute;top:0;right:0;bottom:0;width:min(86vw,370px);background:#fff;
  padding:22px;overflow-y:auto;transform:translateX(100%);transition:transform var(--oto-chuyen);
}
.oto-keo.mo .oto-keo-trong{transform:translateX(0)}
.oto-keo-dau{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.oto-keo-dong{width:40px;height:40px;border:1px solid var(--oto-vien);background:#fff;border-radius:9px;
  font-size:22px;line-height:1;cursor:pointer;color:var(--oto-navy)}
.oto-keo ul{list-style:none;margin:0;padding:0}
.oto-keo>.oto-keo-trong>ul>li{border-bottom:1px solid var(--oto-nen-3)}
.oto-keo a{display:block;padding:13px 2px;font-weight:600;font-size:16px;color:var(--oto-navy)}
.oto-keo .sub-menu{padding:0 0 10px 14px}
.oto-keo .sub-menu a{padding:8px 2px;font-weight:500;font-size:14.5px;color:var(--oto-chu-nhat)}
.oto-keo-nut{display:grid;gap:10px;margin-top:22px}

/* --- Khối chung của section --------------------------------------------- */

.oto-sec{padding:84px 0}
.oto-sec-nen{background:var(--oto-nen-2)}
.oto-sec-toi{background:var(--oto-navy);color:#fff}
.oto-sec-toi h2,.oto-sec-toi h3{color:#fff}

.oto-sec-dau{margin-bottom:42px;max-width:720px}
.oto-sec-dau.giua{margin-left:auto;margin-right:auto;text-align:center}
.oto-nhan{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--oto-do);margin-bottom:14px;
}
.oto-nhan::before{content:'';width:26px;height:2px;background:var(--oto-do)}
.oto-sec-toi .oto-nhan{color:var(--oto-vang)}
.oto-sec-toi .oto-nhan::before{background:var(--oto-vang)}
.oto-sec-dau h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.oto-sec-dau p{font-size:17px;color:var(--oto-chu-nhat);margin:0}
.oto-sec-toi .oto-sec-dau p{color:var(--oto-trang-mo)}

.oto-sec-chan{margin-top:38px;display:flex;justify-content:center}

/* --- Hero --------------------------------------------------------------- */

.oto-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1100px 520px at 76% -8%, rgba(211,32,39,.3), transparent 62%),
    radial-gradient(760px 420px at 6% 104%, rgba(200,169,97,.17), transparent 60%),
    linear-gradient(152deg, #0B1A2E 0%, #122744 46%, #1B3557 100%);
}
.oto-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.oto-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:56px;align-items:center;padding:86px 0 78px}
.oto-hero-nhan{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;
  background:rgba(200,169,97,.14);border:1px solid rgba(200,169,97,.36);
  color:var(--oto-vang-nhat);font-size:13.5px;font-weight:600;margin-bottom:22px;
}
.oto-hero-nhan b{color:var(--oto-vang)}
.oto-hero h1{
  font-size:clamp(34px,4.6vw,56px);color:#fff;margin-bottom:20px;letter-spacing:-.025em;
}
.oto-hero h1 em{font-style:normal;color:var(--oto-vang);position:relative;white-space:nowrap}
.oto-hero-mo{font-size:18px;color:var(--oto-trang-mo);max-width:580px;margin-bottom:30px;line-height:1.66}
.oto-hero-nut{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.oto-hero-tin{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14.5px;color:var(--oto-trang-mo)}
.oto-hero-tin span{display:flex;align-items:center;gap:8px}
.oto-hero-tin svg{width:17px;height:17px;color:var(--oto-vang);flex:none}

.oto-hero-art{position:relative}
.oto-hero-art img,.oto-hero-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 60px rgba(0,0,0,.42))}

/* Dải số liệu dưới hero */
.oto-solieu{background:rgba(255,255,255,.055);border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:2}
.oto-solieu-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.oto-solieu-o{background:transparent;padding:28px 22px;text-align:center}
.oto-solieu-so{font-size:34px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em}
.oto-solieu-so em{font-style:normal;color:var(--oto-vang)}
.oto-solieu-ten{font-size:13.5px;color:var(--oto-trang-mo);margin-top:6px}

/* --- Thẻ xe ------------------------------------------------------------- */

.oto-luoi{display:grid;gap:24px}
.oto-luoi-4{grid-template-columns:repeat(4,1fr)}
.oto-luoi-3{grid-template-columns:repeat(3,1fr)}
.oto-luoi-2{grid-template-columns:repeat(2,1fr)}

.oto-xe{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo);overflow:hidden;transition:var(--oto-chuyen);
}
.oto-xe:hover{transform:translateY(-4px);box-shadow:var(--oto-bong-cao);border-color:transparent}
.oto-xe-hinh{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--oto-nen-3);display:block}
.oto-xe-hinh img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.oto-xe:hover .oto-xe-hinh img{transform:scale(1.05)}

/* Ảnh thay thế khi chưa có ảnh thật.
   Bóng xe vẽ đúng kiểu dáng của từng xe — sedan khác SUV, bán tải khác xe tải —
   nên khung trông có chủ ý chứ không như ảnh hỏng. */
.oto-xe-tam{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:14px;
  background:
    radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
    linear-gradient(150deg,#EEF2F7 0%,#E0E7F0 55%,#D3DCE8 100%);
}
.oto-xe-tam::after{
  content:'';position:absolute;left:14%;right:14%;bottom:21%;height:9px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,26,46,.22),transparent);
}
.oto-xe-tam svg{
  position:relative;z-index:1;width:78%;max-width:215px;height:auto;
  color:var(--oto-navy);opacity:.26;
}
.oto-xe-tam b{
  position:relative;z-index:1;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oto-chu-mo);text-align:center;line-height:1.3;
}
/* Xe tải, bus và van thân dài hơn nên thu nhỏ lại cho cân khung */
.oto-xe-tam.oto-tam-tai svg,
.oto-xe-tam.oto-tam-bus svg{width:86%;max-width:230px;opacity:.23}

.oto-xe-co{
  position:absolute;top:12px;left:12px;z-index:2;padding:5px 11px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--oto-navy);color:#fff;
}
.oto-xe-co.dien{background:#0F7B4F}
.oto-xe-co.hot{background:var(--oto-do)}

.oto-xe-than{padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.oto-xe-hang{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oto-do)}
.oto-xe-ten{font-size:17.5px;font-weight:700;line-height:1.28}
.oto-xe-ten a{color:var(--oto-navy);transition:var(--oto-chuyen)}
.oto-xe:hover .oto-xe-ten a{color:var(--oto-do)}
.oto-xe-pk{font-size:13.5px;color:var(--oto-chu-mo)}
.oto-xe-gia{font-size:15px;color:var(--oto-chu-nhat);margin-top:2px}
.oto-xe-gia strong{color:var(--oto-navy);font-size:17px;font-weight:800}
.oto-xe-gia em{font-style:normal;color:var(--oto-chu-mo)}
.oto-xe-nut{
  margin-top:auto;padding-top:14px;display:grid;grid-template-columns:1fr auto;gap:8px;
}
.oto-xe-nut a{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;
  border-radius:9px;font-size:14px;font-weight:700;transition:var(--oto-chuyen);
}
.oto-xe-bao{background:var(--oto-navy);color:#fff}
.oto-xe-bao:hover{background:var(--oto-do);color:#fff}
.oto-xe-zalo{background:var(--oto-nen-3);color:var(--oto-navy);padding:10px 13px}
.oto-xe-zalo:hover{background:#0068FF;color:#fff}
.oto-xe-zalo svg{width:17px;height:17px}

/* --- Thẻ hãng xe -------------------------------------------------------- */

.oto-hang-luoi2{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.oto-hang-o{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:24px 14px;background:#fff;border:1px solid var(--oto-vien);border-radius:var(--oto-bo);
  transition:var(--oto-chuyen);text-align:center;min-height:116px;
}
.oto-hang-o:hover{border-color:var(--oto-do);transform:translateY(-3px);box-shadow:var(--oto-bong)}
.oto-hang-o b{font-size:16px;font-weight:700;color:var(--oto-navy);letter-spacing:-.01em}
.oto-hang-o span{font-size:12.5px;color:var(--oto-chu-mo)}
.oto-hang-o:hover b{color:var(--oto-do)}

/* --- Section dịch vụ chia đôi ------------------------------------------- */

.oto-chia{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.oto-chia.dao .oto-chia-anh{order:-1}
.oto-chia-anh{border-radius:18px;overflow:hidden;box-shadow:var(--oto-bong-cao)}
.oto-chia-anh svg,.oto-chia-anh img{width:100%;height:auto;display:block}
.oto-chia h2{font-size:clamp(26px,3vw,38px);margin-bottom:16px}
.oto-chia>div>p{font-size:16.5px;color:var(--oto-chu-nhat);margin-bottom:22px;line-height:1.7}
.oto-liet{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:13px}
.oto-liet li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--oto-chu-nhat);line-height:1.55}
.oto-liet svg{width:21px;height:21px;flex:none;color:var(--oto-do);margin-top:1px}
.oto-liet b{color:var(--oto-navy);font-weight:700}
.oto-chia-nut{display:flex;flex-wrap:wrap;gap:11px}

/* --- Bảng thông tin cạnh section chia đôi -------------------------------- */

.oto-bang-the{
  background:#fff;border:1px solid var(--oto-vien);border-radius:18px;
  box-shadow:var(--oto-bong-cao);overflow:hidden;
}
.oto-sec-nen .oto-bang-the{background:#fff}
.oto-bang-the-dau{
  padding:22px 26px;background:linear-gradient(140deg,var(--oto-navy),var(--oto-navy-3));color:#fff;
}
.oto-bang-the-dau span{display:block;font-size:17px;font-weight:700}
.oto-bang-the-dau small{display:block;font-size:13.5px;color:var(--oto-trang-mo);margin-top:3px}
.oto-bang-the-hang{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:17px 26px;border-bottom:1px solid var(--oto-nen-3);
}
.oto-bang-the-ten{font-size:15.5px;color:var(--oto-chu);font-weight:600}
.oto-bang-the-gia{text-align:right;flex:none}
.oto-bang-the-gia b{display:block;font-size:17px;font-weight:800;color:var(--oto-do);letter-spacing:-.01em}
.oto-bang-the-gia small{font-size:12.5px;color:var(--oto-chu-mo)}
.oto-ck-so{
  width:30px;height:30px;border-radius:9px;background:var(--oto-nen-3);color:var(--oto-navy);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none;
}
.oto-ck-noi{flex:1}
.oto-ck-noi b{display:block;font-size:15.5px;color:var(--oto-chu);font-weight:700;margin-bottom:2px}
.oto-ck-noi small{display:block;font-size:13.5px;color:var(--oto-chu-nhat);line-height:1.5}
.oto-bang-the-chan{
  display:flex;align-items:center;gap:12px;padding:18px 26px;background:var(--oto-nen-2);
  font-size:14.5px;color:var(--oto-chu-nhat);line-height:1.5;
}
.oto-bang-the-chan svg{width:20px;height:20px;color:var(--oto-do);flex:none}
.oto-bang-the-chan a{color:var(--oto-navy);text-decoration:underline;text-underline-offset:3px}
.oto-bang-the-chan a:hover{color:var(--oto-do)}

/* Đảo thứ tự hai cột ở section "dao" */
.oto-chia.dao>*:last-child{order:-1}
@media (max-width:980px){ .oto-chia.dao>*:last-child{order:0} }

/* Form nằm trong khối liên hệ trang chủ thì bỏ khung riêng của nó */
.oto-lh-phai .oto-form-khung{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.oto-lh-phai .oto-form-tieu-de{font-size:23px}

/* --- Quy trình ---------------------------------------------------------- */

.oto-buoc{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:b}
.oto-buoc-o{position:relative;padding-top:8px}
.oto-buoc-so{
  width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;background:rgba(200,169,97,.14);color:var(--oto-vang);
  border:1px solid rgba(200,169,97,.32);margin-bottom:18px;
}
.oto-buoc-o h3{font-size:19px;margin-bottom:9px}
.oto-buoc-o p{font-size:15px;color:var(--oto-trang-mo);line-height:1.62;margin:0}

/* --- Banner xe điện ----------------------------------------------------- */

.oto-bang-dien{
  display:flex;align-items:center;gap:22px;padding:22px 26px;border-radius:var(--oto-bo);
  background:linear-gradient(100deg,#0F7B4F 0%,#13A066 100%);color:#fff;margin-bottom:34px;
}
.oto-bang-dien svg{width:38px;height:38px;flex:none}
.oto-bang-dien b{display:block;font-size:18px;font-weight:800;margin-bottom:3px}
.oto-bang-dien span{font-size:15px;color:rgba(255,255,255,.86)}

/* --- Footer ------------------------------------------------------------- */

.oto-footer{background:var(--oto-navy);color:var(--oto-trang-mo);padding:68px 0 0;font-size:15px}
.oto-footer-luoi{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:50px}
.oto-footer h4{color:#fff;font-size:15.5px;font-weight:700;margin-bottom:18px;letter-spacing:.01em}
.oto-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.oto-footer a{color:var(--oto-trang-mo);transition:var(--oto-chuyen)}
.oto-footer a:hover{color:var(--oto-vang)}
.oto-footer-gt{max-width:330px;line-height:1.72;margin-bottom:22px}
.oto-footer .oto-logo-ten{color:#fff;font-size:22px}
.oto-footer .oto-logo-phu{color:var(--oto-vang)}
.oto-footer-logo{margin-bottom:18px;display:flex;flex-direction:column;align-items:flex-start}
.oto-footer-mxh{display:flex;gap:10px}
.oto-footer-mxh a{
  width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);
}
.oto-footer-mxh a:hover{background:var(--oto-do);border-color:var(--oto-do)}
.oto-footer-mxh svg{width:19px;height:19px;color:#fff}
.oto-footer-lh{display:grid;gap:15px}
.oto-footer-lh-o{display:flex;gap:12px;align-items:flex-start}
.oto-footer-lh-o svg{width:18px;height:18px;color:var(--oto-vang);flex:none;margin-top:3px}
.oto-footer-lh-o b{display:block;color:#fff;font-weight:700;font-size:16px}
.oto-footer-lh-o small{font-size:13.5px;color:var(--oto-chu-mo)}
.oto-footer-day{
  border-top:1px solid rgba(255,255,255,.1);padding:24px 0 30px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--oto-chu-mo);
}
.oto-footer-mt{
  border-top:1px solid rgba(255,255,255,.07);padding:20px 0 26px;
  font-size:13px;line-height:1.7;color:rgba(255,255,255,.45);max-width:1000px;
}

/* --- Form liên hệ trên trang chủ ---------------------------------------- */

.oto-lh-khung{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:0;border-radius:20px;overflow:hidden;
  box-shadow:var(--oto-bong-cao);background:#fff;
}
.oto-lh-trai{
  padding:48px 44px;color:#fff;
  background:radial-gradient(620px 340px at 110% 0%,rgba(211,32,39,.34),transparent 60%),
             linear-gradient(160deg,#0B1A2E,#1B3557);
}
.oto-lh-trai h2{color:#fff;font-size:clamp(26px,2.7vw,34px);margin-bottom:16px}
.oto-lh-trai>p{color:var(--oto-trang-mo);font-size:16.5px;line-height:1.7;margin-bottom:30px}
.oto-lh-kenh{display:grid;gap:16px;margin-bottom:32px}
.oto-lh-kenh a{display:flex;gap:14px;align-items:center}
.oto-lh-kenh-ic{
  width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none;
}
.oto-lh-kenh-ic svg{width:21px;height:21px;color:var(--oto-vang)}
.oto-lh-kenh b{display:block;color:#fff;font-size:17px;font-weight:700;line-height:1.3}
.oto-lh-kenh small{font-size:13.5px;color:var(--oto-trang-mo)}
.oto-lh-ghi{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.65;margin:0}
.oto-lh-phai{padding:48px 44px;background:#fff}

/* --- Điểm dừng đáp ứng -------------------------------------------------- */

@media (max-width:1100px){
  .oto-luoi-4{grid-template-columns:repeat(3,1fr)}
  .oto-hang-luoi2{grid-template-columns:repeat(4,1fr)}
  .oto-footer-luoi{grid-template-columns:1fr 1fr;gap:38px}
  .oto-header-sdt{display:none}
}

/* Nâng từ 1060 lên 1100: ở 1065px menu ngang cần 821px mà chỉ còn 780px,
   thiếu 41px nên mục cuối bị cắt. Đổi sang nút menu sớm hơn một nhịp. */
@media (max-width:1100px){
  .oto-nav,.oto-header-cta .oto-btn-vien{display:none}
  .oto-burger{display:flex}
}

@media (max-width:980px){
  .oto-hero-in{grid-template-columns:1fr;gap:40px;padding:60px 0 56px}
  .oto-hero-art{max-width:520px;margin:0 auto}
  .oto-chia{grid-template-columns:1fr;gap:34px}
  .oto-chia.dao .oto-chia-anh{order:0}
  .oto-buoc{grid-template-columns:repeat(2,1fr);gap:30px}
  .oto-lh-khung{grid-template-columns:1fr}
  .oto-solieu-in{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .oto-sec{padding:58px 0}
  .oto-wrap{padding:0 18px}
  .oto-luoi-4,.oto-luoi-3,.oto-luoi-2{grid-template-columns:repeat(2,1fr);gap:14px}
  .oto-hang-luoi2{grid-template-columns:repeat(2,1fr);gap:12px}
  .oto-footer-luoi{grid-template-columns:1fr;gap:34px}
  .oto-topbar-trai .oto-topbar-muc:not(:first-child){display:none}
  .oto-an-nho{display:none}
  .oto-chi-nho{display:block}
  .oto-xe-than{padding:14px 13px 16px}
  .oto-xe-ten{font-size:15.5px}
  .oto-xe-nut{grid-template-columns:1fr}
  .oto-xe-zalo{display:none}
  .oto-lh-trai,.oto-lh-phai{padding:34px 22px}
  .oto-solieu-so{font-size:27px}
  .oto-hero h1{font-size:30px}
  .oto-hero-mo{font-size:16px}
  .oto-hero-nut .oto-btn{flex:1 1 100%}
  body.oto-site{padding-bottom:62px}
}

@media (max-width:420px){
  .oto-luoi-4,.oto-luoi-3,.oto-luoi-2{grid-template-columns:1fr}
  .oto-buoc{grid-template-columns:1fr}
}

/* =========================================================================
   Ghi đè độ ưu tiên
   Theme nạp bảng kiểu nội tuyến (theme.json) SAU file này, và quy tắc màu chữ
   cho thẻ <a> của nó có cùng độ ưu tiên nên thắng ở vòng cuối. Khối dưới đây
   nâng độ ưu tiên lên để màu chữ trên các nút không bị nuốt.
   ========================================================================= */

.oto-site a.oto-btn-chinh,
.oto-site a.oto-btn-zalo,
.oto-site .oto-xe-nut a.oto-xe-bao,
.oto-site .oto-footer-mxh a,
.oto-site .oto-keo-nut a.oto-btn-chinh,
.oto-site .oto-keo-nut a.oto-btn-zalo{color:#fff}

.oto-site a.oto-btn-chinh:hover,
.oto-site a.oto-btn-zalo:hover,
.oto-site .oto-xe-nut a.oto-xe-bao:hover,
.oto-site .oto-xe-nut a.oto-xe-zalo:hover{color:#fff}

.oto-site a.oto-btn-sang{color:#fff}
.oto-site a.oto-btn-sang:hover{color:var(--oto-navy)}
.oto-site a.oto-btn-vien{color:var(--oto-navy)}
.oto-site a.oto-btn-vien:hover{color:#fff}
.oto-site .oto-xe-nut a.oto-xe-zalo{color:var(--oto-navy)}
.oto-site .oto-hero a,.oto-site .oto-sec-toi a{color:inherit}
.oto-site .oto-footer a{color:var(--oto-trang-mo)}
.oto-site .oto-footer a:hover{color:var(--oto-vang)}
.oto-site .oto-topbar a{color:var(--oto-trang-mo)}
.oto-site .oto-lh-trai a{color:inherit}

/* Kích thước biểu tượng — không khai báo thì SVG nở ra chiếm hết chỗ */
.oto-site .oto-btn svg{width:18px;height:18px;flex:none}
.oto-site .oto-hero-nhan svg{width:19px;height:19px;flex:none}
.oto-site .oto-xe-tam svg{width:58%;max-width:150px;height:auto;flex:none}
.oto-site .oto-footer-lh-o svg,
.oto-site .oto-lh-kenh-ic svg{width:19px;height:19px;flex:none}
.oto-site .oto-bang-dien svg{width:36px;height:36px;flex:none}

/* Menu không được xuống dòng giữa chừng */
.oto-site .oto-nav>ul>li>a{white-space:nowrap}
.oto-site .oto-nav>ul{gap:2px}

/* Chống tràn ngang.
   Hai nguồn gây tràn: hàng header không co lại được khi menu dài, và ngăn kéo
   menu điện thoại tuy đang ẩn nhưng vẫn bị đẩy sang phải bằng transform nên
   kéo dài vùng cuộn của tài liệu. */
.oto-site .oto-header-in{gap:18px;min-width:0}
.oto-site .oto-nav{min-width:0;flex:1 1 auto}
.oto-site .oto-logo,.oto-site .oto-header-cta{flex:0 0 auto;min-width:0}
.oto-site .oto-keo{overflow:hidden}

/* Menu ngang bỏ mục "Trang chủ" — logo đã làm việc đó rồi.
   Ngăn kéo trên điện thoại vẫn giữ mục này. */
.oto-site .oto-nav>ul>li.oto-muc-trang-chu{display:none}

/* Chặn tràn ở mức cấu trúc.
   Nếu sau này bạn thêm mục menu hoặc đổi phông làm menu rộng ra, phần thừa sẽ
   bị cắt ở mép phải thay vì tràn ra đè lên logo và hotline — hỏng một bên vẫn
   đỡ hơn hỏng cả hai. Các ngưỡng bên dưới lo để chuyện đó không xảy ra. */
.oto-site .oto-nav{overflow:hidden}
.oto-site .oto-nav>ul{flex-wrap:nowrap}

/* Siết sớm hơn một bậc. Ở 1425px khối hotline còn hiện, menu chỉ còn 818px
   trong khi cần 821px — thiếu đúng 3px là mục cuối bị cắt mép. */
@media (max-width:1460px){
  .oto-site .oto-nav>ul>li>a{padding:11px 9px;font-size:14.5px}
  .oto-site .oto-btn-nho{padding:10px 16px;font-size:13.5px}
}
@media (max-width:1300px){
  .oto-site .oto-nav>ul>li>a{padding:11px 8px}
}
/* Dưới mức này không còn đủ chỗ cho khối hotline dạng chữ */
@media (max-width:1360px){
  .oto-site .oto-header-sdt{display:none}
}
@media (max-width:1150px){
  .oto-site .oto-nav>ul>li>a{padding:11px 7px;font-size:14px}
}

/* Nút gọi nhanh chỉ dùng ở màn hình hẹp.
   Khai báo ẩn phải đứng TRƯỚC media query — đặt sau thì nó thắng ở vòng cuối
   vì cùng độ ưu tiên, và nút sẽ không bao giờ hiện. */
.oto-site .oto-header-goi{display:none}

/* Màn hình hẹp: header chỉ còn logo, nút gọi và nút menu.
   Giữ nút "Tư vấn miễn phí" ở đây sẽ đẩy nút menu ra ngoài màn hình. */
@media (max-width:860px){
  .oto-site .oto-header-cta .oto-btn-chinh{display:none}
  .oto-site .oto-header-in{height:66px;gap:12px}
  .oto-site .oto-logo-ten{font-size:20px}
  .oto-site .oto-logo-phu{font-size:9.5px;letter-spacing:.1em}
  .oto-site .oto-header-goi{
    display:flex;align-items:center;justify-content:center;width:46px;height:46px;
    border-radius:10px;background:var(--oto-do);color:#fff;flex:none;
  }
  .oto-site .oto-header-goi svg{width:20px;height:20px}
}

/* Thanh liên hệ cố định dưới màn hình điện thoại — cũng bị theme đè màu chữ */
.oto-site .oto-sticky-bar a.oto-sticky-item{color:#fff}
.oto-site .oto-sticky-bar a.oto-sticky-item:hover{color:#fff}

/* Ba nút của form liên hệ. Chúng khai color:#fff trong khối <style> của
   lead-form.php, nhưng tên lớp là .oto-nut-zalo chứ không phải .oto-btn-zalo
   nên không lọt vào khối ghi đè ở trên — chữ navy trên nền xanh, tương phản
   2,61:1, đọc rất khó. */
.oto-site .oto-form a.oto-nut-zalo,
.oto-site .oto-form button.oto-nut-gui,
.oto-site .oto-form a.oto-nut-zalo:hover,
.oto-site .oto-form button.oto-nut-gui:hover{color:#fff}
.oto-site .oto-form a.oto-nut-goi,
.oto-site .oto-form a.oto-nut-goi:hover{color:var(--oto-navy)}

/* =========================================================================
   Trang nội dung (Giới thiệu, Liên hệ, bài viết, trang chi tiết xe)
   Giới hạn bề rộng dòng chữ: dòng dài quá 90 ký tự làm mắt khó bắt được đầu
   dòng tiếp theo. Các khối rộng như bảng và ảnh vẫn được tràn ra ngoài.
   ========================================================================= */

.oto-site .site-main,
.oto-site .page-content,
.oto-site .entry-content{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}

.oto-site .entry-content>p,
.oto-site .entry-content>ul,
.oto-site .entry-content>ol,
.oto-site .entry-content>h2,
.oto-site .entry-content>h3,
.oto-site .entry-content>h4,
.oto-site .entry-content>blockquote{max-width:810px}

.oto-site .entry-title,
.oto-site .page-header h1{font-size:clamp(28px,3.6vw,42px);line-height:1.2;margin:34px 0 22px;max-width:900px}

.oto-site .entry-content{font-size:17px;line-height:1.75;color:#2B3647;padding-bottom:30px}
.oto-site .entry-content h2{font-size:clamp(23px,2.5vw,30px);margin:46px 0 16px}
.oto-site .entry-content h3{font-size:clamp(19px,2vw,22px);margin:34px 0 12px}
.oto-site .entry-content p{margin:0 0 20px}
.oto-site .entry-content ul,.oto-site .entry-content ol{margin:0 0 22px;padding-left:24px}
.oto-site .entry-content li{margin-bottom:9px}
.oto-site .entry-content a{color:var(--oto-do);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.oto-site .entry-content a:hover{color:var(--oto-do-dam)}
.oto-site .entry-content strong{color:var(--oto-navy);font-weight:700}

/* Bảng trong nội dung */
.oto-site .entry-content .oto-bang,
.oto-site .entry-content table{
  width:100%;border-collapse:separate;border-spacing:0;margin:28px 0;font-size:15.5px;
  border:1px solid var(--oto-vien);border-radius:12px;overflow:hidden;
}
.oto-site .entry-content th,.oto-site .entry-content td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--oto-nen-3)}
.oto-site .entry-content th{background:var(--oto-nen-2);font-weight:700;color:var(--oto-navy)}
.oto-site .entry-content tr:last-child td{border-bottom:0}

/* Hộp nhấn mạnh và khối kêu gọi hành động trong nội dung */
.oto-site .oto-hop-nhan{background:#FFF8EC;border-left:4px solid var(--oto-vang);border-radius:0 12px 12px 0;padding:18px 22px;margin:28px 0;max-width:810px}
.oto-site .oto-cta{background:linear-gradient(150deg,var(--oto-navy),var(--oto-navy-3));border-radius:18px;padding:36px 34px;margin:40px 0;text-align:center}
.oto-site .oto-cta .oto-nut{background:var(--oto-do);color:#fff;border-radius:10px;padding:13px 28px;font-weight:700;display:inline-block;margin:5px;text-decoration:none}
.oto-site .oto-cta .oto-nut-phu{background:#0068FF}
.oto-site .oto-mien-trach{max-width:810px;font-size:13.5px;color:var(--oto-chu-mo);border-top:1px solid var(--oto-vien);padding-top:16px;margin-top:34px}
.oto-site .oto-hinh{margin:32px 0;max-width:980px}
.oto-site .oto-hinh img{border-radius:14px;border:1px solid var(--oto-vien)}

/* Form liên hệ tự gắn ở cuối trang chi tiết */
.oto-site .entry-content .oto-form-khung{max-width:810px}

/* =========================================================================
   Trang chi tiết một mẫu xe
   ========================================================================= */

.oto-site .oto-xe-don{padding:0 0 70px;max-width:none}
.oto-site .oto-xe-don .oto-wrap{max-width:1240px}

.oto-duong-dan{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--oto-chu-mo);padding:22px 0 26px}
.oto-duong-dan a{color:var(--oto-chu-nhat)}
.oto-duong-dan a:hover{color:var(--oto-do)}
.oto-duong-dan strong{color:var(--oto-navy);font-weight:600}

.oto-xe-dau{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:start;margin-bottom:12px}

/* --- Thư viện ảnh sản phẩm ---------------------------------------------- */

.oto-thu-vien{display:flex;flex-direction:column;gap:12px}
.oto-tv-lon{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--oto-nen-3);border:1px solid var(--oto-vien);aspect-ratio:4/3;
}
.oto-tv-khung{margin:0;position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .25s ease}
.oto-tv-khung.hien{opacity:1;visibility:visible}
.oto-tv-khung img{width:100%;height:100%;object-fit:cover;display:block}
.oto-tv-khung figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:8px 14px;font-size:11.5px;
  color:rgba(255,255,255,.88);background:linear-gradient(transparent,rgba(11,26,46,.82));line-height:1.45;
}
.oto-site .oto-tv-khung figcaption a{color:rgba(255,255,255,.88);text-decoration:underline}
.oto-tv-dem{
  position:absolute;top:12px;right:12px;z-index:3;padding:5px 12px;border-radius:999px;
  background:rgba(11,26,46,.74);color:#fff;font-size:12.5px;font-weight:600;backdrop-filter:blur(4px);
}
.oto-tv-dem b{font-weight:800}

.oto-tv-nho{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.oto-tv-nut{
  padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;cursor:pointer;
  background:var(--oto-nen-3);aspect-ratio:4/3;transition:var(--oto-chuyen);display:block;
}
.oto-tv-nut img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:var(--oto-chuyen)}
.oto-tv-nut:hover img{opacity:1}
.oto-tv-nut.chon{border-color:var(--oto-do)}
.oto-tv-nut.chon img{opacity:1}

@media (max-width:640px){
  .oto-tv-nho{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
}

/* Ảnh chèn giữa bài viết */
.oto-anh-bai{margin:34px 0}
.oto-anh-bai img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--oto-vien)}
.oto-anh-bai figcaption{
  margin-top:9px;font-size:13.5px;color:var(--oto-chu-mo);text-align:center;line-height:1.55;
}
.oto-site .oto-anh-bai figcaption a{color:var(--oto-chu-nhat);text-decoration:underline}
.oto-anh-doi{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0}
.oto-anh-doi figure{margin:0}
.oto-anh-doi img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:12px;border:1px solid var(--oto-vien)}
@media (max-width:640px){ .oto-anh-doi{grid-template-columns:1fr} }

/* Ba ảnh cạnh nhau — dùng khi bài so sánh nhiều mẫu xe cùng lúc. */
.oto-anh-doi.oto-anh-ba{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){ .oto-anh-doi.oto-anh-ba{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .oto-anh-doi.oto-anh-ba{grid-template-columns:1fr} }

/* Nhãn tên xe dưới từng ảnh trong khối nhiều ảnh. */
.oto-anh-doi figcaption{
  margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--oto-chu-nhat);text-align:center;
}
.oto-site .oto-anh-doi figcaption a{color:var(--oto-navy);text-decoration:none;font-weight:600}
.oto-site .oto-anh-doi figcaption a:hover{color:var(--oto-do);text-decoration:underline}

/* Chú thích chung đặt dưới cả khối nhiều ảnh. */
.oto-anh-chu-thich{
  margin:-22px 0 34px;font-size:13px;line-height:1.6;
  color:var(--oto-chu-nhat);text-align:center;font-style:italic;
}
.oto-site .oto-anh-chu-thich a{color:var(--oto-chu-nhat);text-decoration:underline}

.oto-xe-anh-lon{position:relative;border-radius:18px;overflow:hidden;background:var(--oto-nen-3);border:1px solid var(--oto-vien)}
.oto-xe-anh-lon img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.oto-xe-anh-lon .oto-xe-tam{position:relative;aspect-ratio:4/3}
.oto-ghi-nguon{
  margin:0;padding:9px 14px;font-size:12px;color:var(--oto-chu-mo);
  background:var(--oto-nen-2);border-top:1px solid var(--oto-vien);line-height:1.5;
}
.oto-site .oto-ghi-nguon a{color:var(--oto-chu-nhat);text-decoration:underline}

.oto-xe-tt-hang{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oto-do);margin-bottom:10px;
}
.oto-site .oto-xe-tt h1{font-size:clamp(27px,3.2vw,38px);line-height:1.18;margin:0 0 14px}
.oto-xe-tt-pk{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.oto-site .oto-xe-tt-pk a{
  font-size:13px;padding:5px 13px;border-radius:999px;background:var(--oto-nen-3);
  color:var(--oto-chu-nhat);font-weight:600;
}
.oto-site .oto-xe-tt-pk a:hover{background:var(--oto-navy);color:#fff}

.oto-xe-tt-gia{background:var(--oto-nen-2);border:1px solid var(--oto-vien);border-radius:14px;padding:20px 22px;margin-bottom:22px}
.oto-nhan-gia{display:block;font-size:13px;color:var(--oto-chu-mo);font-weight:600;letter-spacing:.03em;margin-bottom:4px}
.oto-xe-tt-gia strong{display:block;font-size:30px;font-weight:800;color:var(--oto-do);letter-spacing:-.02em;line-height:1.15}
.oto-xe-tt-gia strong.oto-gia-lh{font-size:21px;color:var(--oto-navy)}
.oto-gia-lb{display:block;font-size:14px;color:var(--oto-chu-nhat);margin-top:9px;line-height:1.55}
.oto-gia-lb b{color:var(--oto-navy)}

.oto-xe-tt-nut{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.oto-xe-tt-nut .oto-btn{flex:1 1 auto;min-width:148px}

.oto-xe-tt-ts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--oto-vien);
  border:1px solid var(--oto-vien);border-radius:12px;overflow:hidden;margin:0 0 22px}
.oto-xe-tt-ts>div{background:#fff;padding:12px 15px}
.oto-xe-tt-ts dt{font-size:12.5px;color:var(--oto-chu-mo);margin-bottom:3px}
.oto-xe-tt-ts dd{margin:0;font-size:15px;font-weight:700;color:var(--oto-navy)}

.oto-xe-tt-cam{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.oto-xe-tt-cam li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--oto-chu-nhat)}
.oto-site .oto-xe-tt-cam svg{width:18px;height:18px;color:var(--oto-do);flex:none}

/* Bảng giá theo phiên bản */
.oto-bang-pb{margin-top:54px}
.oto-bang-pb .oto-sec-dau{margin-bottom:24px}
.oto-bang-pb .oto-sec-dau h2{font-size:clamp(23px,2.6vw,31px)}
.oto-bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--oto-vien);border-radius:14px}
.oto-site .oto-bang-pb table.oto-bang{
  width:100%;border-collapse:collapse;margin:0;border:0;border-radius:0;font-size:15.5px;min-width:640px;
}
.oto-site .oto-bang-pb th,.oto-site .oto-bang-pb td{padding:14px 18px;border-bottom:1px solid var(--oto-nen-3);text-align:left}
.oto-site .oto-bang-pb thead th{background:var(--oto-navy);color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em;border-bottom:0}
.oto-site .oto-bang-pb tbody tr:last-child td{border-bottom:0}
.oto-site .oto-bang-pb tbody tr:hover td{background:var(--oto-nen-2)}
.oto-bang-pb .oto-cot-ts{color:var(--oto-chu-nhat);font-size:14.5px}
.oto-bang-pb .oto-cot-gia{text-align:right;white-space:nowrap}
.oto-bang-pb .oto-cot-gia strong{color:var(--oto-do);font-size:16.5px;font-weight:800}
.oto-bang-pb thead .oto-cot-gia{color:#fff}
.oto-bang-pb .oto-cot-nut{width:1%;white-space:nowrap}
.oto-site .oto-bang-pb .oto-cot-nut a{
  display:inline-block;padding:8px 16px;border-radius:7px;background:var(--oto-nen-3);
  color:var(--oto-navy);font-weight:700;font-size:13.5px;text-decoration:none;
}
.oto-site .oto-bang-pb .oto-cot-nut a:hover{background:var(--oto-do);color:#fff}
.oto-bang-ghi{margin:16px 0 0;font-size:14.5px;color:var(--oto-chu-nhat);line-height:1.65;max-width:810px}
.oto-site .oto-bang-ghi a{color:var(--oto-do);text-decoration:underline;text-underline-offset:3px}

.oto-xe-noi-dung{max-width:none;padding-left:0;padding-right:0;margin-top:46px}
.oto-xe-lien-quan{margin-top:56px;padding-top:46px;border-top:1px solid var(--oto-vien)}

@media (max-width:980px){
  .oto-xe-dau{grid-template-columns:1fr;gap:28px}
}
@media (max-width:720px){
  .oto-xe-tt-ts{grid-template-columns:1fr}
  .oto-xe-tt-nut .oto-btn{flex:1 1 100%}
  .oto-duong-dan{font-size:13px;padding:16px 0 18px}
}

/* Huy hiệu hero: bọc phần chữ vào một thẻ để nó không bị tách thành
   nhiều ô flex rồi dàn ngang khi xuống dòng trên màn hình hẹp. */
.oto-site .oto-hero-nhan{align-items:flex-start;text-align:left;line-height:1.45;padding:9px 16px}
.oto-site .oto-hero-nhan>span{display:block}
.oto-site .oto-hero-nhan svg{margin-top:2px}
@media (max-width:720px){
  .oto-site .oto-hero-nhan{font-size:12.5px;border-radius:12px}
}

/* --- Lưới hãng xe / phân khúc -------------------------------------------
   Trước đây khai bằng thẻ <style> nhúng thẳng trong nội dung trang. Để trong
   nội dung thì sửa màu phải sửa ở hai nơi, và trình biên tập dễ nuốt mất.
   ----------------------------------------------------------------------- */
.oto-hang-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin:28px 0}
.oto-hang-the{display:flex;flex-direction:column;gap:5px;padding:20px 18px;
  border:1px solid var(--oto-vien);border-radius:var(--oto-bo);background:var(--oto-nen-2);
  text-decoration:none;transition:border-color var(--oto-chuyen),background var(--oto-chuyen),transform var(--oto-chuyen)}
.oto-hang-the:hover{border-color:var(--oto-do);background:var(--oto-nen);transform:translateY(-2px)}
.oto-hang-ten{font-size:18px;font-weight:700;color:var(--oto-navy)}
.oto-hang-so{font-size:13.5px;color:var(--oto-chu-nhat)}
.oto-hang-luoi .oto-hang-the .oto-hang-ten{color:var(--oto-navy)}
.oto-hang-luoi .oto-hang-the .oto-hang-so{color:var(--oto-chu-nhat)}

/* =========================================================================
   Bảng tra cứu trong nội dung bài và trang

   Trước nằm trong cong-cu.css, nhưng file đó chỉ nạp ở trang công cụ — trong
   khi bài viết ở /tin-tuc/ cũng dùng lớp này. Chuyển lên file nền.
   ========================================================================= */
/* --- Bảng tra cứu trong phần nội dung ----------------------------------- */

.oto-cc-tra{
  width:100%; border-collapse:collapse; font-size:14.5px; margin:20px 0 24px;
  border:1px solid var(--oto-vien); border-radius:var(--oto-bo); overflow:hidden;
}

.oto-cc-tra caption{
  caption-side:top; text-align:left; font-size:13px; font-weight:600;
  color:var(--oto-chu-nhat); padding:0 0 10px;
}

.oto-cc-tra thead th{
  background:var(--oto-navy); color:#fff; font-weight:600; font-size:13px;
  text-align:left; padding:11px 14px;
}

.oto-cc-tra td,
.oto-cc-tra tbody th{
  padding:11px 14px; border-top:1px solid var(--oto-vien); text-align:left;
  vertical-align:top; line-height:1.55;
}

.oto-cc-tra tbody th{ font-weight:600; color:var(--oto-chu); }
.oto-cc-tra tbody tr:nth-child(even){ background:var(--oto-nen-2); }
.oto-cc-tra td.so{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:600; }

@media (max-width:620px){
  .oto-cc-tra{ display:block; overflow-x:auto; }
}

/* =========================================================================
   Lưới bài viết — shortcode [oto_bai_viet]

   Trước khai bằng thẻ <style> echo ra từ chính shortcode, với màu viết cứng.
   Nghĩa là mỗi lần gọi shortcode là in lại cả khối kiểu dáng, và màu không
   theo biến chung nên đổi hệ màu thì khối này đứng im.
   ========================================================================= */

.oto-bv-tieu-de{ font-size:22px; font-weight:700; margin:32px 0 4px; color:var(--oto-navy); }

.oto-bv-luoi{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:26px; margin:24px 0;
}

.oto-bv-the{
  display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--oto-vien); border-radius:var(--oto-bo);
  overflow:hidden; background:var(--oto-nen);
  transition:border-color var(--oto-chuyen), box-shadow var(--oto-chuyen), transform var(--oto-chuyen);
}

.oto-bv-the:hover{
  border-color:var(--oto-navy-3); box-shadow:var(--oto-bong); transform:translateY(-2px);
}

.oto-bv-anh{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--oto-nen-3); }
.oto-bv-anh img{ width:100%; height:100%; object-fit:cover; display:block; }
.oto-bv-anh-trong{ display:block; width:100%; height:100%;
  background:linear-gradient(135deg,var(--oto-nen-3),var(--oto-nen-2)); }

.oto-bv-noi-dung{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:7px; min-width:0; }

.oto-bv-mux{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--oto-do); text-decoration:none; align-self:flex-start;
}
.oto-bv-mux:hover{ text-decoration:underline; }

.oto-bv-ten{ font-size:18px; line-height:1.35; margin:0; }
.oto-bv-ten a{ color:var(--oto-navy); text-decoration:none; }
.oto-bv-ten a:hover{ color:var(--oto-do); }

.oto-bv-mo-ta{ font-size:14px; line-height:1.55; color:var(--oto-chu-nhat); margin:0; }
.oto-bv-ngay{ font-size:12px; color:var(--oto-chu-mo); margin-top:auto; padding-top:4px; }

.oto-trong{
  padding:28px; text-align:center; color:var(--oto-chu-nhat);
  background:var(--oto-nen-2); border:1px dashed var(--oto-vien);
  border-radius:var(--oto-bo);
}

/* Ghi đè cuối — theme nạp bảng kiểu nội tuyến sau file này. */
.oto-bv-luoi .oto-bv-the .oto-bv-ten a{ color:var(--oto-navy); }
.oto-bv-luoi .oto-bv-the .oto-bv-ten a:hover{ color:var(--oto-do); }
.oto-bv-luoi .oto-bv-the .oto-bv-mux{ color:var(--oto-do); }

/* =========================================================================
   Lưới thẻ điều hướng

   Trước nằm trong cong-cu.css nhưng giờ dùng ở cả /tu-van/ và các trang
   khác, nên chuyển lên file nền để không phải nhớ nạp thêm stylesheet.
   ========================================================================= */

/* --- Khối điều hướng công cụ khác --------------------------------------- */

.oto-cc-khac{ margin:40px 0 8px; }

.oto-cc-khac h2{
  font-size:18px; font-weight:700; margin:0 0 16px; color:var(--oto-navy);
}

.oto-cc-khac-luoi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;
}

.oto-cc-khac-luoi a{
  display:flex; flex-direction:column; gap:5px;
  background:var(--oto-nen); border:1px solid var(--oto-vien);
  border-radius:var(--oto-bo); padding:18px 20px; text-decoration:none;
  transition:border-color var(--oto-chuyen), box-shadow var(--oto-chuyen), transform var(--oto-chuyen);
}

.oto-cc-khac-luoi a:hover{
  border-color:var(--oto-navy-3); box-shadow:var(--oto-bong);
  transform:translateY(-2px);
}

.oto-cc-khac-luoi strong{
  font-size:15.5px; font-weight:700; color:var(--oto-navy);
}

.oto-cc-khac-luoi span{
  font-size:13px; line-height:1.55; color:var(--oto-chu-nhat);
}

/* Ghi đè cuối — theme nạp bảng kiểu nội tuyến sau file này. */
.oto-cc-khac .oto-cc-khac-luoi a strong{ color:var(--oto-navy); }
.oto-cc-khac .oto-cc-khac-luoi a span{ color:var(--oto-chu-nhat); }

/* =========================================================================
   Lưới hãng xe có logo — shortcode [oto_luoi_hang]

   Logo đã được chuẩn hóa sẵn về khung 260×96 với diện tích hiển thị xấp xỉ
   bằng nhau (xem logo-hang.php), nên ở đây chỉ cần khung chứa cố định chiều
   cao là mọi thẻ thẳng hàng. Không dùng object-fit:cover — logo bị cắt mất
   nét là hỏng; luôn contain.
   ========================================================================= */

.oto-logo-luoi{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:30px 0;
}

.oto-logo-o{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:4px;min-width:0;padding:20px 14px 16px;text-align:center;text-decoration:none;
  background:var(--oto-nen);border:1px solid var(--oto-vien);border-radius:var(--oto-bo);
  transition:border-color var(--oto-chuyen),box-shadow var(--oto-chuyen),transform var(--oto-chuyen);
}

.oto-logo-o:hover{
  border-color:var(--oto-do);box-shadow:var(--oto-bong);transform:translateY(-2px);
}

/* Khung logo cao cố định để tên hãng ở mọi thẻ nằm cùng một đường ngang. */
.oto-logo-anh{
  display:flex;align-items:center;justify-content:center;
  height:46px;width:100%;margin-bottom:10px;
}

.oto-logo-anh img{
  max-height:100%;max-width:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}

.oto-logo-chu{font-size:15px;font-weight:800;color:var(--oto-navy);letter-spacing:-.01em}

.oto-logo-o b{font-size:14px;font-weight:700;color:var(--oto-navy);line-height:1.3}
.oto-logo-so{font-size:12px;color:var(--oto-chu-nhat)}

/* Bản gọn: logo nhỏ hơn, bỏ số mẫu xe. */
.oto-logo-gon{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.oto-logo-gon .oto-logo-o{padding:14px 10px 12px}
.oto-logo-gon .oto-logo-anh{height:34px;margin-bottom:8px}
.oto-logo-gon .oto-logo-so{display:none}

@media (max-width:1100px){ .oto-logo-luoi{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:860px){  .oto-logo-luoi{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){
  .oto-logo-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .oto-logo-o{padding:16px 10px 13px}
  .oto-logo-anh{height:38px}
  .oto-logo-o b{font-size:13px}
}

/* Ghi đè cuối — theme nạp bảng kiểu nội tuyến sau file này. */
.oto-logo-luoi .oto-logo-o b{color:var(--oto-navy)}
.oto-logo-luoi .oto-logo-o .oto-logo-so{color:var(--oto-chu-nhat)}

/* =========================================================================
   Menu lớn theo hãng — "Dòng xe mới" và "Xe điện"

   Panel neo vào thanh menu chứ không neo vào từng mục. Neo vào mục thì panel
   rộng 760px của mục nằm sát mép phải sẽ tràn ra ngoài màn hình; neo vào
   thanh rồi căn giữa thì nó luôn nằm trong khung.
   ========================================================================= */

.oto-nav{position:relative}

/* Mục mega phải static để panel con neo vào .oto-nav, không neo vào nó. */
.oto-nav>ul>li.oto-mega{position:static}

.oto-nav>ul>li.oto-mega>.sub-menu{
  left:50%;right:auto;transform:translateX(-50%) translateY(-6px);
  width:min(760px,calc(100vw - 48px));min-width:0;
  padding:18px 18px 14px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 6px;
}

.oto-nav>ul>li.oto-mega:hover>.sub-menu{transform:translateX(-50%) translateY(0)}

.oto-nav>ul>li.oto-mega>.sub-menu>li{min-width:0}

.oto-nav>ul>li.oto-mega>.sub-menu a{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:9px 11px;font-size:14px;font-weight:600;color:var(--oto-navy);
}

.oto-nav>ul>li.oto-mega>.sub-menu a:hover{background:var(--oto-nen-2);color:var(--oto-do)}

/* Số mẫu xe bên phải tên hãng. */
.oto-muc-so{
  font-size:11.5px;font-weight:500;color:var(--oto-chu-mo);
  white-space:nowrap;flex:none;
}
.oto-nav .sub-menu a:hover .oto-muc-so{color:var(--oto-do);opacity:.7}

/* Bốn trang biên tập của silo xe mới: tách thành một dải riêng ở đáy panel,
   trải hết chiều ngang để khách không nhầm chúng với tên hãng. */
.oto-nav>ul>li.oto-mega>.sub-menu>li.oto-muc-phu{
  margin-top:11px;padding-top:11px;border-top:1px solid var(--oto-vien);
}

/* Ép mục biên tập đầu tiên xuống cột 1 để cả nhóm bắt đầu một hàng mới.
   Thiếu dòng này thì chúng nối đuôi vào hàng hãng còn dở, trộn lẫn hai loại
   mục với nhau. */
.oto-nav>ul>li.oto-mega>.sub-menu>li.oto-muc-phu:first-of-type{ grid-column-start:1 }

.oto-nav>ul>li.oto-mega>.sub-menu>li.oto-muc-phu a{
  padding:8px 11px;font-size:13.5px;font-weight:500;color:var(--oto-chu-nhat);
}
.oto-nav>ul>li.oto-mega>.sub-menu>li.oto-muc-phu a::before{
  content:'→';margin-right:6px;opacity:.45;font-weight:700;
}

/* Panel xe điện chỉ có 5 hãng — để rộng 760px như panel 20 hãng thì trống
   trải. Thu về 2 cột cho vừa nội dung. */
.oto-nav>ul>li.oto-mega-dien>.sub-menu{
  grid-template-columns:repeat(2,minmax(0,1fr));width:min(420px,calc(100vw - 48px));
}

@media (max-width:1240px){
  .oto-nav>ul>li.oto-mega-hang>.sub-menu{grid-template-columns:repeat(3,minmax(0,1fr));width:min(600px,calc(100vw - 48px))}
}

/* --- Vá chỗ menu bị đè -----------------------------------------------------
   .oto-nav có flex:1 nhưng thiếu min-width:0, nên trong flexbox nó không co
   xuống dưới chiều rộng nội dung — menu tràn ra và chui xuống dưới khối
   hotline. Thêm min-width:0 là nó co đúng, và overflow:hidden chặn phần thừa
   thay vì để nó đè lên hai bên.
   ------------------------------------------------------------------------- */

.oto-site .oto-nav{min-width:0;overflow:hidden}
.oto-site .oto-nav>ul{flex-wrap:nowrap}
.oto-site .oto-header-in{gap:14px}

/* Panel con phải thoát được khỏi overflow:hidden của thanh menu. */
.oto-site .oto-nav:hover,
.oto-site .oto-nav:focus-within{overflow:visible}

/* Ngăn kéo điện thoại: panel mega hiện như danh sách thường, hai cột cho gọn. */
.oto-keo .oto-mega>.sub-menu{
  display:grid;grid-template-columns:1fr 1fr;gap:0 8px;
}
.oto-keo .oto-muc-so{display:block;font-size:11px}

/* Dải báo đang lọc theo hãng trên trang phân khúc. */
.oto-archive-loc{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:14px 0 0;padding:11px 16px;font-size:13.5px;
  background:var(--oto-nen-2);border:1px solid var(--oto-vien);
  border-radius:99px;color:var(--oto-chu-nhat);width:fit-content;max-width:100%;
}
.oto-archive-loc b{color:var(--oto-navy)}
.oto-site .oto-archive-loc a{color:var(--oto-do);font-weight:600;text-decoration:none}
.oto-site .oto-archive-loc a:hover{text-decoration:underline}

/* =========================================================================
   Trang hãng xe và trang phân khúc

   Trước đây khai bằng thẻ <style> echo từ template, với mã màu viết cứng
   #0f172a, #c62828. Đó là lần thứ ba trong dự án gặp đúng kiểu lỗi này: màu
   cứng không theo biến chung, và tên lớp trùng với lớp đã có nghĩa khác trong
   oto.css. Lần này chuyển hẳn lên đây và dùng biến.
   ========================================================================= */

.oto-archive-trong{max-width:var(--oto-rong);margin:0 auto;padding:34px 20px 60px}
.oto-archive-dau{margin-bottom:10px}
.oto-archive-ten{font-size:34px;line-height:1.2;margin:0 0 14px;color:var(--oto-navy);letter-spacing:-.02em}
.oto-archive-mo-ta{font-size:16.5px;line-height:1.65;color:var(--oto-chu-nhat);margin:0 0 12px;max-width:760px}
.oto-archive-hotline{
  font-size:15px;color:var(--oto-chu-nhat);background:var(--oto-nen-2);
  border:1px solid var(--oto-vien);border-radius:var(--oto-bo-nho);
  padding:13px 18px;display:inline-block;margin:10px 0 0;
}
.oto-archive .oto-luoi{margin:30px 0}

@media (max-width:1100px){ .oto-archive .oto-luoi-4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){  .oto-archive .oto-luoi-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .oto-archive-ten{font-size:26px}
  .oto-archive .oto-luoi{gap:14px}
}