/* ==========================================================================
   PHÁT TIẾN HOLDING — Theme tĩnh HTML/CSS
   Chỉnh nhanh màu sắc / font / bo góc tại khối :root bên dưới
   ========================================================================== */

:root {
  /* Màu thương hiệu */
  --red: #C8102E;
  --red-dark: #9E0B22;
  --red-deep: #6E0716;
  --gold: #E8B54B;

  /* Nền & chữ */
  --dark: #14161B;
  --dark-2: #1D2027;
  --ink: #23262D;
  --gray: #5C6370;
  --gray-light: #98A0AC;
  --line: #E7E9EE;
  --bg: #FFFFFF;
  --bg-soft: #F5F6F8;

  /* Chữ */
  --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Nhịp dọc — sửa ba con số này là cả website giãn hoặc hẹp theo.
     --sec-y đệm trên/dưới mỗi khối lớn, nên khoảng cách giữa hai khối liền nhau
     bằng hai lần con số này. --sec-head-mb là quãng từ tiêu đề khối xuống nội
     dung, --block-y cho mấy khối tự đặt đệm riêng. */
  --sec-y: 84px;
  --sec-head-mb: 44px;
  --block-y: 68px;
  /* Chiều cao dải đầu các trang con — đặt bằng trang có chữ dài nhất để mọi
     trang cao bằng nhau, không nhấp nhô theo độ dài tiêu đề. */
  --hero-h: 340px;

  /* Khác */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(20, 22, 27, .08);
  --shadow-lg: 0 24px 60px rgba(20, 22, 27, .14);
  --container: 1200px;
  --header-h: 76px;
}

/* Màn hẹp thì nhịp dọc co lại theo, khai chung một chỗ để khỏi rải khắp file */
@media (max-width: 992px) {
  :root { --sec-y: 66px; --sec-head-mb: 36px; --block-y: 54px; --hero-h: 288px; }
}
@media (max-width: 640px) {
  :root { --sec-y: 54px; --sec-head-mb: 30px; --block-y: 44px; --hero-h: 336px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px;
  font-weight: 600; font-size: 15px; line-height: 1;
  transition: .25s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 10px 24px rgba(200, 16, 46, .35); }
.btn--primary:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn--ghost { border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--ink); transform: translateY(-2px); }
.btn--outline { border: 1.5px solid var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--red); color: var(--red); }
.btn--sm { padding: 10px 20px; font-size: 14px; }

/* ---------- Tiêu đề section ---------- */
.section { padding: var(--sec-y) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--dark); color: #fff; }

.sec-head { max-width: 640px; margin-bottom: var(--sec-head-mb); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--row {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); }
.sec-head--center .eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--red); }
.sec-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.sec-desc { margin-top: 14px; color: var(--gray); font-size: 16.5px; }
.section--dark .sec-desc { color: var(--gray-light); }

/* ---------- Topbar ---------- */
/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.header.is-scrolled { box-shadow: 0 8px 30px rgba(20,22,27,.1); }
.header__in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }

.logo { display: flex; align-items: center; gap: 12px; }
.logo__mark {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  box-shadow: 0 8px 18px rgba(200,16,46,.35);
}
.logo__name { font-weight: 800; font-size: 20px; letter-spacing: .02em; color: var(--ink); line-height: 1.1; }
.logo__name span { color: var(--red); }
.logo__tag { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gray); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav a.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--ink);
  border-radius: 8px; transition: .2s;
}
.nav a.nav__link:hover, .nav > li.active > a.nav__link { color: var(--red); }
.nav > li.active > a.nav__link { background: rgba(200,16,46,.07); }
.nav .caret { width: 10px; height: 10px; }

.dropdown {
  position: absolute; top: calc(100% + 12px); left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .22s ease;
}
.nav > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: 14.5px; font-weight: 500; border-radius: 8px;
}
.dropdown a:hover { background: var(--bg-soft); color: var(--red); }
.dropdown a small { color: var(--gray-light); font-weight: 600; }

.header__cta { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); place-items: center; }
.burger svg { width: 22px; height: 22px; }

/* Mobile nav */
.m-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(20,22,27,.5); backdrop-filter: blur(4px);
}
.m-nav.open { display: block; }
.m-nav__panel {
  position: absolute; top: 0; right: 0; width: min(340px, 88vw); height: 100%;
  background: #fff; padding: 24px; overflow-y: auto;
  animation: slideIn .28s ease;
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.m-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.m-nav__close { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; }
.m-nav ul li a { display: block; padding: 13px 10px; font-weight: 600; border-bottom: 1px solid var(--line); }
.m-nav ul li a:hover { color: var(--red); }
.m-nav ul li ul a { padding-left: 26px; font-weight: 500; font-size: 14.5px; color: var(--gray); border-bottom: 0; }
.m-nav .btn { margin-top: 18px; width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #17090C 0%, #3D0A14 45%, var(--red-deep) 100%);
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 30%, #000 85%);
}
.hero::after {
  content: ""; position: absolute; right: -180px; top: -180px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,.5), transparent 65%);
}
.hero__in {
  position: relative; z-index: 2;
  padding: 110px 0 150px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800; line-height: 1.14; letter-spacing: -.015em;
  margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__desc { font-size: 17.5px; color: rgba(255,255,255,.78); max-width: 520px; margin-bottom: 34px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.hero__brands { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.92);
  transition: .2s;
}
.hero__brand:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.hero__brand svg { width: 16px; height: 16px; }

.hero__visual { position: relative; }
.hero__img {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  transform: rotate(1.5deg);
}
.hero__card {
  position: absolute; left: -34px; bottom: -26px;
  background: #fff; color: var(--ink);
  border-radius: 16px; padding: 18px 22px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 14px;
}
.hero__card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(200,16,46,.09); color: var(--red);
  display: grid; place-items: center;
}
.hero__card-icon svg { width: 22px; height: 22px; }
.hero__card b { font-size: 20px; display: block; line-height: 1.2; }
.hero__card span { font-size: 13px; color: var(--gray); }

/* ---------- Dải số liệu ---------- */
.stats { position: relative; z-index: 5; margin-top: -72px; }
.stats__grid {
  background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat { padding: 34px 28px; text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 26%; height: 48%;
  width: 1px; background: var(--line);
}
.stat__num {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; color: var(--red);
  letter-spacing: -.02em; line-height: 1.1;
}
.stat__num sub { font-size: .55em; vertical-align: baseline; }
.stat__label { margin-top: 6px; font-size: 14.5px; color: var(--gray); font-weight: 500; }

/* ---------- Placeholder ảnh ---------- */
.ph {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, #2A2E36 0%, #171A20 100%);
  display: grid; place-items: center; overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px);
}
.ph__label {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  text-align: center; padding: 0 14px;
}
.ph__label svg { width: 28px; height: 28px; opacity: .6; }
.ph--red { background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); }
.ph--soft { background: linear-gradient(135deg, #E9EBEF 0%, #D5D9E0 100%); }
.ph--soft .ph__label { color: rgba(20,22,27,.45); }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1; }

/* ---------- Giới thiệu (trang chủ) ---------- */
.about { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.about__media { position: relative; }
.about__media .ph { border-radius: 20px; }
.about__badge {
  position: absolute; right: -22px; bottom: 34px;
  background: var(--red); color: #fff; border-radius: 16px;
  padding: 20px 24px; text-align: center;
  box-shadow: 0 18px 40px rgba(200,16,46,.4);
}
.about__badge b { display: block; font-size: 34px; font-weight: 800; line-height: 1; }
.about__badge span { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.about__body .sec-head { margin-bottom: 22px; }
.about__text { color: var(--gray); margin-bottom: 22px; }
.about__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 32px; }
.about__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; }
.about__list svg { width: 20px; height: 20px; color: var(--red); flex: none; }

/* ---------- Hệ thống đại lý (card thương hiệu) ---------- */
.network { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.net-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  /* Lề ngang để riêng thành biến: dải logo ở đầu thẻ phải lấy đúng số đó làm lề
     âm mới tràn được ra hai mép, mà lề này còn bị đổi ở khối tinh chỉnh bên dưới. */
  --pad-x: 28px;
  /* Màu hãng do template truyền vào; để sẵn màu dự phòng phòng khi thiếu, vì
     color-mix gặp biến rỗng sẽ hỏng cả nền dải lẫn nhãn số lượng. */
  --bc: var(--red);
  padding: 0 var(--pad-x) 32px;
  transition: .28s ease;
}
.net-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.net-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  /* Ẩn hẳn khi chưa hover: scaleX(0) vẫn để lọt một vệt đỏ ở góc bo của thẻ */
  opacity: 0;
  transition: transform .3s ease, opacity .2s ease;
}
.net-card:hover::after { transform: scaleX(1); opacity: 1; }
/* Dải logo tràn hai mép ở đầu thẻ, nhuốm sắc hãng thật nhạt — để trắng thì dải
   chìm hẳn vào nền thẻ vốn đã trắng, mà bốn trong sáu nhóm dùng chung logo Honda
   nên màu là thứ duy nhất giúp phân biệt các thẻ khi liếc qua. */
.net-card__top {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 calc(var(--pad-x) * -1) 22px;
  padding: 22px var(--pad-x);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 13%, #fff), #fff 82%);
  border-bottom: 1px solid color-mix(in srgb, var(--bc) 16%, transparent);
}
/* Logo nằm trong tấm nền trắng cỡ cố định. Logo các hãng mỗi cái một tỉ lệ —
   Honda gần vuông, Phát Tiến rất dẹt, Mitsubishi cao — thả thẳng lên dải thì cái
   to cái bé trông rất lệch hàng. Có tấm nền chung thì mọi logo đều gọn trong cùng
   một ô, ranh giới rõ ràng, và logo nền tối cũng không còn là mảng đen giữa dải
   sáng. Khung phải cố định cả rộng lẫn cao: để "auto" thì khung chờ ảnh, ảnh chờ
   khung, ra bằng 0. */
.net-card__logo {
  flex: none;
  width: 104px; height: 76px;
  display: block;
  padding: 11px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--bc) 15%, transparent);
  border-radius: 14px 4px 14px 4px;
  box-shadow: 0 6px 16px rgba(7,11,17,.07);
}
.net-card__logo img {
  /* Ảnh phủ trọn ô rồi để object-fit lo phần vừa vặn, object-position mặc định
     canh giữa sẵn. Tấm nền phải là block: chuyển sang grid canh giữa thì chiều
     cao ô tính theo nội dung, mà nội dung lại đo theo ô — vòng lặp đó làm chiều
     cao mất hiệu lực, ảnh rơi về tỉ lệ gốc và tràn xuống dưới (logo Mitsubishi
     lòi hẳn dòng tagline ra ngoài khung trắng). */
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  /* Logo hãng phần lớn là ảnh nền trắng đục — nhân với nền tấm để mép trắng biến mất */
  mix-blend-mode: multiply;
}
/* Nhóm dùng logo nét sáng trên nền tối (Honda DreamWing): tấm nền đổi sang đen để
   logo hoà vào. screen là bản đối của multiply — nền đen của ảnh chìm hẳn vào tấm
   nên viền nhiễu của ảnh JPG không lộ ra, còn nét trắng thì giữ nguyên. */
.net-card__logo--dark {
  background: #141519;
  border-color: rgba(255,255,255,.16);
}
.net-card__logo--dark img { mix-blend-mode: screen; }
.net-card__count {
  flex: none; white-space: nowrap;
  font-size: 13px; font-weight: 700;
  color: var(--bc); background: color-mix(in srgb, var(--bc) 9%, transparent);
  padding: 6px 12px; border-radius: 999px;
}
.net-card__count b { font-weight: 800; }
.net-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.net-card p { font-size: 14.5px; color: var(--gray); margin-bottom: 18px; }
.net-card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.net-card__link svg { width: 15px; height: 15px; transition: transform .25s; }
.net-card:hover .net-card__link { color: var(--red); }
.net-card:hover .net-card__link svg { transform: translateX(4px); }

/* ---------- Băng CTA đỏ ---------- */
.band {
  position: relative; overflow: hidden;
  background: linear-gradient(110deg, var(--red-dark), var(--red));
  color: #fff; border-radius: 24px; padding: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.band::before {
  content: ""; position: absolute; right: -100px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  border: 60px solid rgba(255,255,255,.08);
  /*
   * Hình tròn thuần trang trí, rộng 380px và nằm đúng góc trên phải — tức là
   * trùm lên cái nút. Nó absolute nên vẽ đè lên nút (nút để static), và nếu
   * còn nhận chuột thì nút bấm không ăn: cú click rơi vào hình tròn. Trang chủ,
   * Lịch sử và Back To Home đều dính.
   */
  pointer-events: none;
}
.band h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.25; margin-bottom: 8px; }
.band p { color: rgba(255,255,255,.85); max-width: 560px; }
.band .btn { flex: none; background: #fff; color: var(--red); }
.band .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }

/* ---------- Tin tức ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  transition: .28s ease;
  display: flex; flex-direction: column;
}
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post__media { position: relative; overflow: hidden; }
.post__media .ph { aspect-ratio: 16 / 10; transition: transform .5s ease; }
.post:hover .post__media .ph { transform: scale(1.05); }
.post__cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 6px;
}
.post__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--gray-light); margin-bottom: 10px; }
.post__meta svg { width: 14px; height: 14px; }
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post h3 { font-size: 17.5px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.post h3 a:hover { color: var(--red); }
.post p { font-size: 14.5px; color: var(--gray); margin-bottom: 18px; flex: 1; }
.post__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--red); }
.post__more svg { width: 15px; height: 15px; transition: transform .25s; }
.post:hover .post__more svg { transform: translateX(4px); }

/* Tin nhỏ (cộng đồng) */
.post--mini h3 { font-size: 15.5px; }
.post--mini .post__body { padding: 18px; }
.news--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Đối tác ---------- */
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.partner {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: .28s;
}
.partner:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.partner svg { width: 72px; height: 72px; color: var(--ink); transition: color .25s; }
.partner:hover svg { color: var(--red); }
.partner b { font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.partner span { font-size: 13px; color: var(--gray); }

/* ---------- Footer ---------- */
.footer { background: var(--dark); color: #B9BEC7; }
.footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px;
  padding: 72px 0 56px;
}
.footer h4 { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px; }
.footer__about p { font-size: 14.5px; margin: 18px 0 22px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.07); display: grid; place-items: center;
  transition: .22s;
}
.footer__social a:hover { background: var(--red); color: #fff; transform: translateY(-3px); }
.footer__social svg { width: 17px; height: 17px; }
.footer__links li + li { margin-top: 12px; }
.footer__links a { font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; transition: .2s; }
.footer__links a:hover { color: #fff; padding-left: 4px; }
.footer__links a small { color: var(--gray-light); }
.footer__contact li { display: flex; gap: 12px; font-size: 14.5px; }
.footer__contact li + li { margin-top: 14px; }
.footer__contact svg { width: 17px; height: 17px; color: var(--red); flex: none; margin-top: 3px; }
.footer__contact a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 13.5px;
}
.footer__bottom ul { display: flex; gap: 24px; }
.footer__bottom a:hover { color: #fff; }

/* ---------- Nút lên đầu trang ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--red); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 26px rgba(200,16,46,.4);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--red-dark); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Hero trang con ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, #17090C 0%, #400A15 55%, var(--red-deep) 100%);
  color: #fff; padding: 84px 0;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, transparent 40%, #000);
}
.page-hero__in { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb svg { width: 12px; height: 12px; opacity: .5; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.01em; }
.page-hero p { margin-top: 12px; max-width: 640px; color: rgba(255,255,255,.75); }

/* ---------- Trang Giới thiệu ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mv-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px;
  position: relative; overflow: hidden;
  transition: .28s;
}
.mv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.mv-card__icon {
  width: 58px; height: 58px; border-radius: 14px;
  background: rgba(200,16,46,.08); color: var(--red);
  display: grid; place-items: center; margin-bottom: 22px;
}
.mv-card__icon svg { width: 28px; height: 28px; }
.mv-card h3 { font-size: 21px; font-weight: 800; margin-bottom: 12px; }
.mv-card p, .mv-card li { color: var(--gray); font-size: 15px; }
.mv-card ol { list-style: none; counter-reset: mv; margin-top: 14px; }
.mv-card ol li { counter-increment: mv; display: flex; gap: 12px; padding: 9px 0; }
.mv-card ol li::before {
  content: counter(mv, decimal-leading-zero);
  font-weight: 800; color: var(--red); font-size: 14px; line-height: 1.7;
}
.mv-card ol b { color: var(--ink); }

.philosophy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.phi-item {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  transition: .25s;
}
.phi-item:hover { border-color: rgba(200,16,46,.35); box-shadow: var(--shadow); }
.phi-item__num {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--dark); color: #fff; font-weight: 800; font-size: 15px;
  display: grid; place-items: center;
}
.phi-item:hover .phi-item__num { background: var(--red); }
.phi-item h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.phi-item p { font-size: 14.5px; color: var(--gray); }

/* Giá trị cốt lõi 5T */
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.value-card {
  border-radius: var(--radius); padding: 30px 22px; color: #fff;
  min-height: 220px; display: flex; flex-direction: column;
  transition: .28s;
}
.value-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg); }
.value-card b { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.value-card h3 { font-size: 21px; font-weight: 800; margin: 8px 0 10px; }
.value-card p { font-size: 13.5px; opacity: .92; flex: 1; }
.value-card span { font-size: 34px; font-weight: 800; opacity: .25; align-self: flex-end; }
.value-card--1 { background: linear-gradient(150deg, #D81E3E, #8E0B20); }
.value-card--2 { background: linear-gradient(150deg, #0E9F6E, #046A47); }
.value-card--3 { background: linear-gradient(150deg, #E8A20C, #B06E00); }
.value-card--4 { background: linear-gradient(150deg, #2563EB, #143C8F); }
.value-card--5 { background: linear-gradient(150deg, #7C3AED, #4A1D96); }

/* ---------- Timeline Lịch sử ---------- */
.timeline { position: relative; max-width: 980px; margin-inline: auto; padding: 20px 0; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(var(--line), var(--red), var(--line));
  transform: translateX(-50%);
}
.tl-item { position: relative; width: 50%; padding: 0 56px 56px 0; }
.tl-item:nth-child(even) { left: 50%; padding: 0 0 56px 56px; }
.tl-item__dot {
  position: absolute; top: 6px; right: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 5px solid var(--red);
  box-shadow: 0 0 0 6px rgba(200,16,46,.12);
  z-index: 2;
}
.tl-item:nth-child(even) .tl-item__dot { right: auto; left: -11px; }
.tl-item__year {
  display: inline-block; background: var(--red); color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: .04em;
  padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
}
.tl-item__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow);
  transition: .25s;
}
.tl-item__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.tl-item__card h3 { font-size: 17.5px; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .01em; }
.tl-item__card p, .tl-item__card li { font-size: 14.5px; color: var(--gray); }
.tl-item__card ul li { position: relative; padding: 4px 0 4px 18px; }
.tl-item__card ul li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--red);
}
.tl-item__card b { color: var(--ink); }

/* ---------- Trang Hệ thống đại lý ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: var(--sec-head-mb);
}
.filter-bar a {
  padding: 11px 22px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: 14.5px; font-weight: 600; transition: .22s; background: #fff;
}
.filter-bar a:hover, .filter-bar a.active {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 8px 20px rgba(200,16,46,.3);
}
.showrooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.showroom {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: .28s; display: flex; flex-direction: column;
}
.showroom:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.showroom__media { position: relative; overflow: hidden; }
.showroom__media .ph { aspect-ratio: 16 / 10; transition: transform .5s; }
.showroom:hover .showroom__media .ph { transform: scale(1.05); }
.showroom__brand {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #fff; color: var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.showroom__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.showroom h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.showroom ul { flex: 1; }
.showroom ul li { display: flex; gap: 10px; font-size: 14px; color: var(--gray); padding: 4px 0; }
.showroom ul svg { width: 16px; height: 16px; color: var(--red); flex: none; margin-top: 3px; }
.showroom__actions { display: flex; gap: 10px; margin-top: 16px; }
.showroom__actions .btn { flex: 1; justify-content: center; }

.brand-head { display: flex; align-items: center; gap: 16px; margin: 72px 0 32px; }
.brand-head:first-of-type { margin-top: 0; }
.brand-head__icon {
  width: 54px; height: 54px; border-radius: 14px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center;
}
.brand-head__icon svg { width: 30px; height: 30px; }
.brand-head h2 { font-size: 24px; font-weight: 800; }
.brand-head span { font-size: 13.5px; color: var(--gray); display: block; margin-top: 2px; }
.brand-head__count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--red); background: rgba(200,16,46,.08); padding: 8px 16px; border-radius: 999px; }

/* ---------- Trang Liên hệ ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.contact-info { display: grid; gap: 18px; }
.ci-card {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  transition: .25s;
}
.ci-card:hover { box-shadow: var(--shadow); border-color: rgba(200,16,46,.3); }
.ci-card__icon {
  flex: none; width: 50px; height: 50px; border-radius: 13px;
  background: rgba(200,16,46,.08); color: var(--red); display: grid; place-items: center;
}
.ci-card__icon svg { width: 23px; height: 23px; }
.ci-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.ci-card p, .ci-card a.ci-link { font-size: 14.5px; color: var(--gray); }
.ci-card a.ci-link:hover { color: var(--red); }

.contact-form {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 44px; box-shadow: var(--shadow);
}
.contact-form h3 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.contact-form > p { color: var(--gray); font-size: 14.5px; margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 13.5px; font-weight: 700; }
.form-field label i { color: var(--red); font-style: normal; }
.form-field input, .form-field select, .form-field textarea {
  font: inherit; font-size: 14.5px;
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); transition: .2s; width: 100%;
  color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--red); background: #fff;
  box-shadow: 0 0 0 4px rgba(200,16,46,.1);
}
.contact-form .btn { margin-top: 24px; width: 100%; justify-content: center; }

.map-ph { border-radius: 20px; overflow: hidden; margin-top: 72px; }
.map-ph .ph { aspect-ratio: 21 / 8; }

.loc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.loc-group h3 {
  font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--red);
}
.loc-group li { border-bottom: 1px solid var(--line); }
.loc-group li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 4px; font-size: 14.5px; font-weight: 600; transition: .2s; }
.loc-group li a:hover { color: var(--red); padding-left: 10px; }
.loc-group li a svg { width: 14px; height: 14px; opacity: 0; transition: .2s; }
.loc-group li a:hover svg { opacity: 1; }

/* ---------- Hiệu ứng xuất hiện ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav a.nav__link { padding: 10px 10px; font-size: 14px; }
  .hero__in { grid-template-columns: 1fr; padding: 80px 0 140px; }
  .hero__visual { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 992px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: grid; }
  .about { grid-template-columns: 1fr; gap: 48px; }
  .about__badge { right: 16px; }
  .network { grid-template-columns: 1fr 1fr; }
  .news, .news--4, .showrooms { grid-template-columns: 1fr 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3)::before { display: none; }
  .stats { margin-top: -56px; }
  .values { grid-template-columns: repeat(3, 1fr); }
  .mv-grid, .philosophy { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .band { flex-direction: column; text-align: center; padding: 48px 28px; }
  .timeline::before { left: 10px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; left: 0; padding: 0 0 44px 44px; }
  .tl-item__dot, .tl-item:nth-child(even) .tl-item__dot { left: 0; right: auto; }
  .loc-tabs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .news, .news--4, .showrooms, .network { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px 16px; }
  .stat:nth-child(even)::before { display: none; }
  .values { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 22px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; padding: var(--block-y) 0 36px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .about__badge { right: 10px; padding: 14px 18px; }
  .about__badge b { font-size: 26px; }
  .about__list { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   PHÁT TIẾN 2026 — Premium corporate automotive art direction
   ========================================================================== */
:root {
  --red: #E11D36;
  --red-dark: #B5122A;
  --red-deep: #780C1C;
  --gold: #F3C765;
  --dark: #0B1018;
  --dark-2: #141B26;
  --ink: #121926;
  --gray: #667085;
  --gray-light: #98A2B3;
  --line: #E6E9EF;
  --bg-soft: #F5F6F8;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 14px 40px rgba(12, 18, 28, .08);
  --shadow-lg: 0 30px 80px rgba(12, 18, 28, .15);
  --container: 1240px;
  --header-h: 94px;
}

body {
  /* clip chứ không phải hidden: hidden ở một trục ép trục còn lại thành auto,
     body thành vùng cuộn riêng và .header { position: sticky } mất chỗ bám —
     header trôi mất khi cuộn. clip cắt tràn ngang y hệt nhưng không tạo vùng
     cuộn nên sticky vẫn sống. (html cũng đã clip ở cuối file.) */
  overflow-x: clip;
  background: #fff;
}

::selection { background: rgba(225, 29, 54, .18); color: var(--ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(225, 29, 54, .28);
  outline-offset: 3px;
}

.container { width: min(var(--container), 100% - 56px); }
.section--soft {
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), transparent 150px),
    var(--bg-soft);
}

.sec-title {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.eyebrow { letter-spacing: .18em; font-size: 12px; }
.eyebrow::before { width: 38px; }
.sec-desc { font-size: 17px; line-height: 1.8; }

/* Đầu trang chốt bản "Trắng dày dặn": nền trắng đục hẳn (không kính mờ), nổi
   bằng độ bề thế (thanh cao, logo to, menu hoa) chứ không bằng màu nền. */
.header {
  background: #fff;
  border-bottom: 0;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
}
.header.is-scrolled { background: #fff; box-shadow: 0 14px 40px rgba(15, 23, 42, .12); }
.logo__mark {
  width: 48px;
  height: 48px;
  border-radius: 15px 4px 15px 4px;
  background: linear-gradient(145deg, #F12843, #A80D24);
  box-shadow: 0 10px 26px rgba(225,29,54,.28);
  position: relative;
  isolation: isolate;
}
.logo__mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 11px 3px 11px 3px;
  z-index: -1;
}
.logo__name { font-size: 19px; letter-spacing: .04em; }
.logo__tag { margin-top: 4px; font-size: 9.5px; letter-spacing: .18em; }
.nav { gap: 4px; }
.nav a.nav__link {
  padding: 12px 15px;
  font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  /* Chữ hoa + giãn chữ làm mỗi mục rộng hơn ~30% so với chữ thường — cấm ngắt
     dòng rồi thu nhỏ dần theo bề ngang (xem @media bên dưới), không để tên mục
     bị bẻ đôi xuống dòng. */
  white-space: nowrap;
}
.nav > li.active > a.nav__link { color: var(--red); background: rgba(200, 16, 46, .07); }
.nav > li.active > a.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
}
.dropdown { top: calc(100% + 16px); padding: 10px; border-radius: 16px; }
/* .logo__img có định nghĩa riêng (height: 56px) ở dưới xa trong file — theo
   đúng thứ tự tầng của file này (gốc → tinh chỉnh → kỹ thuật), quy tắc không
   kèm @media nằm sau luôn thắng quy tắc có @media nằm trước dù cùng độ đặc
   hiệu. Set chiều cao logo responsive ở ngay cạnh định nghĩa gốc đó, không
   phải ở đây, để khỏi bị đè mất tác dụng. */
@media (max-width: 1240px) {
  .nav a.nav__link { padding: 10px 10px; font-size: 12.5px; letter-spacing: .02em; }
  .header__in { gap: 14px; }
}

.btn {
  min-height: 48px;
  padding: 14px 25px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.btn--sm { min-height: 42px; padding: 11px 18px; }
.btn--primary { box-shadow: 0 12px 28px rgba(225,29,54,.28); }
.btn--outline { background: #fff; border-color: #D7DBE2; }

/* Homepage hero */
.hero {
  min-height: 720px;
  background:
    radial-gradient(circle at 77% 15%, rgba(225,29,54,.22), transparent 31%),
    linear-gradient(128deg, #080C12 0%, #111823 57%, #090D14 100%);
}
.hero::before {
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(255,255,255,.06) 50%, transparent 50.1%),
    linear-gradient(transparent 0 49.9%, rgba(255,255,255,.06) 50%, transparent 50.1%);
  background-size: 72px 72px;
  opacity: .28;
  mask-image: linear-gradient(90deg, transparent 20%, #000);
}
.hero::after {
  right: 17%;
  top: auto;
  bottom: -390px;
  width: 720px;
  height: 720px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  box-shadow: 0 0 0 110px rgba(255,255,255,.025), 0 0 0 220px rgba(255,255,255,.018);
}
.hero__in {
  min-height: 720px;
  padding: 80px 0 140px;
  grid-template-columns: 1.06fr .94fr;
  gap: 60px;
}
.hero__eyebrow {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.13);
  letter-spacing: .15em;
}
.hero h1 {
  max-width: 700px;
  font-size: clamp(44px, 5.15vw, 68px);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.hero h1 em { color: #fff; position: relative; }
.hero h1 em::after {
  content: "";
  display: block;
  width: 86px;
  height: 5px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  border-radius: 99px;
}
.hero__desc { max-width: 620px; font-size: 17px; line-height: 1.8; }
.hero__brands { gap: 8px; }
.hero__brand { padding: 9px 13px; border-color: rgba(255,255,255,.11); }
.hero__img {
  transform: none;
  border-radius: 30px 8px 30px 8px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 50px 100px rgba(0,0,0,.5);
}
.hero__img .ph {
  background: linear-gradient(180deg, transparent 45%, rgba(4,7,11,.3)), url('../images/hero-automotive.jpg') center / cover no-repeat;
}
.hero__card { left: -42px; bottom: -28px; border-radius: 16px 4px 16px 4px; }

.stats { margin-top: -76px; }
.stats__grid {
  border: 0;
  border-radius: 24px 8px 24px 8px;
  box-shadow: 0 30px 80px rgba(12,18,28,.16);
  overflow: hidden;
}
.stat { padding: 38px 28px; }
.stat__num { font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.05em; }

/* Real editorial imagery */
.ph { background-color: #18202C; background-size: cover; background-position: center; }
.ph::before { background: linear-gradient(180deg, transparent 55%, rgba(4,7,11,.25)); }
.ph__label { display: none; }
.home-page .about__media .ph,
.about-page .about__media .ph { background-image: url('../images/team.jpg'); }
.home-page #tin-tuc .post:nth-child(1) .ph { background-image: url('../images/showroom.jpg'); }
.home-page #tin-tuc .post:nth-child(2) .ph { background-image: url('../images/car-road.jpg'); }
.home-page #tin-tuc .post:nth-child(3) .ph { background-image: url('../images/corporate.jpg'); }
.home-page .news--4 .post:nth-child(1) .ph,
.home-page .news--4 .post:nth-child(3) .ph { background-image: url('../images/community.jpg'); }
.home-page .news--4 .post:nth-child(2) .ph,
.home-page .news--4 .post:nth-child(4) .ph { background-image: url('../images/volunteer.jpg'); }
.network-page .showroom:nth-child(3n+1) .ph { background-image: url('../images/showroom.jpg'); }
.network-page .showroom:nth-child(3n+2) .ph { background-image: url('../images/car-premium.jpg'); }
.network-page .showroom:nth-child(3n+3) .ph { background-image: url('../images/car-road.jpg'); }

.about__media .ph { min-height: 520px; aspect-ratio: 4 / 4.45; }
.about__media .ph::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 14px;
}
.about__badge { right: -28px; bottom: 42px; border-radius: 16px 4px 16px 4px; }
.about__text { font-size: 16.5px; line-height: 1.85; }

.network { gap: 20px; }
.net-card,
.post,
.partner,
.showroom,
.mv-card,
.phi-item,
.ci-card,
.contact-form,
.tl-item__card {
  border-color: rgba(18,25,38,.09);
}
.net-card { --pad-x: 30px; padding: 0 var(--pad-x) 34px; border-radius: 20px 6px 20px 6px; }
.net-card::after { height: 4px; }
.post { border-radius: 20px 6px 20px 6px; }
.post__media .ph { aspect-ratio: 16 / 9.5; }
.post__body { padding: 26px; }
.post h3 { font-size: 18px; letter-spacing: -.02em; }
.post__cat { border-radius: 8px 2px 8px 2px; }

.band {
  padding: 68px;
  border-radius: 28px 8px 28px 8px;
  background: linear-gradient(115deg, #951027, #E11D36 58%, #B5122A);
  box-shadow: 0 30px 70px rgba(181,18,42,.24);
}
.partners { gap: 18px; }
.partner { border-radius: 18px 5px 18px 5px; }

/* Inner-page cinematic headers */
.page-hero {
  min-height: var(--hero-h);
  padding: 52px 0;
  display: flex;
  align-items: center;
  background-color: #0B1018;
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  background: linear-gradient(90deg, rgba(5,8,12,.96) 0%, rgba(5,8,12,.76) 45%, rgba(5,8,12,.3) 100%);
  mask-image: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--red) 0 5px, transparent 5px);
  opacity: .9;
}
/*
 * Ảnh nền 4 trang giới thiệu/lịch sử/hệ thống đại lý/liên hệ giờ do PHP vẽ qua
 * pt_hero_style() (inc/content-schema.php) — field "Ảnh nền" trong trang quản
 * trị đặt sẵn mặc định đúng bằng các ảnh này, nên style cùng dòng luôn có mặt
 * và các rule theo body class ở đây thành thừa, không còn phần tử nào đọc tới.
 */
.page-hero__in { z-index: 2; }
.breadcrumb { margin-bottom: 22px; font-weight: 600; }
.page-hero h1 { max-width: 780px; font-size: clamp(38px, 5vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
.page-hero p { max-width: 720px; margin-top: 18px; font-size: 17px; line-height: 1.75; }

/* About page */
.philosophy { gap: 18px; }
.phi-item { padding: 30px; border-radius: 18px 5px 18px 5px; }
.phi-item__num { border-radius: 13px 4px 13px 4px; }
.mv-card { border-radius: 22px 7px 22px 7px; padding: 46px; }
.values { gap: 14px; }
.value-card {
  min-height: 250px;
  border-radius: 20px 5px 20px 5px;
  background: linear-gradient(155deg, #1A2230, #0B1018);
  border: 1px solid rgba(255,255,255,.07);
}
.value-card--1 { background: linear-gradient(155deg, #EF2743, #9B1026); }
.value-card h3 { font-size: 20px; }
.value-card span { color: var(--gold); opacity: .65; }

/* History */
.timeline { max-width: 1050px; }
.timeline::before { width: 3px; background: linear-gradient(transparent, var(--red) 7%, var(--red) 93%, transparent); }
.tl-item { padding-right: 66px; }
.tl-item:nth-child(even) { padding-left: 66px; }
.tl-item__year { border-radius: 9px 3px 9px 3px; box-shadow: 0 10px 22px rgba(225,29,54,.2); }
.tl-item__card { border-radius: 18px 5px 18px 5px; padding: 30px; }

/* Dealer network */
.filter-bar {
  position: sticky;
  top: 94px;
  z-index: 20;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 56px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(12,18,28,.1);
  backdrop-filter: blur(16px);
}
.filter-bar a { padding: 10px 18px; border: 0; border-radius: 10px; }
.showrooms { gap: 24px; }
.showroom { border-radius: 20px 5px 20px 5px; }
.showroom__brand { border-radius: 8px 2px 8px 2px; }
.brand-head { margin-top: 88px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.brand-head__icon { border-radius: 15px 4px 15px 4px; }

/* Contact */
.contact-grid { gap: 48px; }
.ci-card { padding: 26px; border-radius: 18px 5px 18px 5px; }
.ci-card__icon { border-radius: 14px 4px 14px 4px; }
.contact-form { padding: 50px; border-radius: 24px 7px 24px 7px; }
.form-field input,
.form-field select,
.form-field textarea { min-height: 50px; border-radius: 10px 3px 10px 3px; }
.map-ph {
  position: relative;
  height: 440px;
  border-radius: 24px 7px 24px 7px;
  box-shadow: var(--shadow-lg);
  background:
    linear-gradient(32deg, transparent 47%, rgba(255,255,255,.82) 48% 52%, transparent 53%) 0 0 / 170px 120px,
    linear-gradient(-28deg, transparent 47%, rgba(255,255,255,.7) 48% 52%, transparent 53%) 0 0 / 220px 150px,
    #DDE5DE;
}
.map-ph iframe { display: block; width: 100%; height: 100%; border: 0; opacity: .9; filter: saturate(.78) contrast(1.05); }
.map-ph__label {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 56px);
  padding: 17px 20px;
  border-radius: 14px 4px 14px 4px;
  background: rgba(11,16,24,.92);
  color: #fff;
  box-shadow: 0 15px 36px rgba(11,16,24,.25);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.map-ph__label b { font-size: 14px; }
.map-ph__label span { color: rgba(255,255,255,.72); font-size: 12.5px; }

.footer {
  background:
    radial-gradient(circle at 12% 8%, rgba(225,29,54,.13), transparent 28%),
    #090D14;
}
.footer__top { padding: var(--block-y) 0 48px; }
.footer h4 { font-size: 13px; letter-spacing: .12em; }
.footer__social a { border-radius: 11px 3px 11px 3px; }
.to-top { border-radius: 13px 4px 13px 4px; }

@media (max-width: 1100px) {
  .hero { min-height: auto; }
  .hero__in { min-height: 650px; padding-top: 76px; }
}

@media (max-width: 992px) {
  .container { width: min(var(--container), 100% - 40px); }
  .hero__in { min-height: 620px; }
  .page-hero { padding: 44px 0; }
  .filter-bar { top: 92px; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .filter-bar a { flex: none; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .partners { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .container { width: min(var(--container), 100% - 28px); }
  .header__in { height: 72px; }
  .logo__mark { width: 43px; height: 43px; }
  .logo__name { font-size: 17px; }
  .sec-head--row { align-items: flex-start; flex-direction: column; }
  .hero__in { min-height: 660px; padding: 66px 0 118px; }
  .hero h1 { font-size: 39px; }
  .hero__desc { font-size: 15.5px; }
  .hero__brands { display: none; }
  .stats__grid { border-radius: 18px 5px 18px 5px; }
  .stat { padding: 22px 10px; }
  .stat__label { font-size: 12px; }
  .about__media .ph { min-height: 380px; }
  .about__badge { right: 10px; }
  .band { padding: 44px 24px; }
  .page-hero { padding: 38px 0; }
  .page-hero h1 { font-size: 38px; }
  .page-hero p { font-size: 15px; }
  .values { grid-template-columns: 1fr; }
  .partners { grid-template-columns: 1fr; }
  .value-card { min-height: 210px; }
  .contact-form { padding: 30px 22px; }
  .map-ph { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Tài nguyên thật từ site cũ (logo, ảnh đại lý) ---------- */
.logo__img { height: 56px; width: auto; display: block; }
.footer .logo__img { height: 42px; }
.m-nav .logo__img { height: 38px; }
@media (max-width: 1240px) {
  .header .logo__img { height: 48px; }
}
.partner img { height: 60px; width: auto; object-fit: contain; }
.showroom__media .ph { background-size: cover; background-position: center; }

section[id] { scroll-margin-top: 100px; }

/* ---------- Khối số liệu kiểu mới (icon + tiêu đề + số + gạch đỏ) ---------- */
.stat__icon { display: grid; place-items: center; margin: 0 auto 16px; color: var(--red); }
.stat__icon svg { width: 46px; height: 46px; }
/*
 * Chừa sẵn chỗ cho 2 dòng dù tiêu đề dài hay ngắn. Không có min-height thì tiêu
 * đề nào xuống hàng (vd "Khách hàng đã phục vụ" trên mobile) sẽ đẩy số bên dưới
 * lệch xuống so với các thẻ cùng hàng chỉ có tiêu đề 1 dòng.
 */
.stat__title {
  font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 8px;
  min-height: 2.6em;
  display: flex; align-items: center; justify-content: center;
}
.stat .stat__num { position: relative; padding-bottom: 14px; margin-bottom: 10px; }
.stat .stat__num::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 2px; background: var(--red);
}
.stat .stat__label { margin-top: 0; }
@media (max-width: 640px) {
  .stat__icon svg { width: 38px; height: 38px; }
}

/* ==========================================================================
   UI/UX Pro Max — accessibility, typography & interaction layer
   Design system: design-system/phat-tien-holding/MASTER.md
   ========================================================================== */
:root {
  --font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lexend', 'Source Sans 3', sans-serif;
  --color-primary: #1E293B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-accent: #DC2626;
  --color-background: #F8FAFC;
  --color-foreground: #0F172A;
  --color-muted: #E9EDF1;
  --color-border: #E2E8F0;
  --color-success: #0F8A5F;
  --color-error: #C81E3A;
  --color-ring: #DC2626;
  --z-content: 1;
  --z-floating: 30;
  --z-header: 40;
  --z-overlay: 60;
  --z-skip-link: 80;
  --red: var(--color-accent);
  --red-dark: #B91C1C;
  --ink: var(--color-foreground);
  --gray: #64748B;
  --line: var(--color-border);
  --bg-soft: var(--color-background);
}

body { font-family: var(--font); font-size: 16px; }

h1, h2, h3, h4, h5, h6,
.sec-title,
.stat__num,
.page-hero h1,
.hero h1 {
  font-family: var(--font-display);
  text-wrap: balance;
}

.hero h1 {
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.hero h1 em { display: block; }

p, li { text-wrap: pretty; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip-link);
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--color-foreground);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .28);
  transform: translateY(calc(-100% - 24px));
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

#main-content { display: block; }
.header { z-index: var(--z-header); }
.m-nav { z-index: var(--z-overlay); }
.to-top { z-index: var(--z-floating); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.9);
}

a,
button,
.btn,
.filter-bar a,
.showroom,
.net-card,
.post { touch-action: manipulation; }

.btn,
button,
.nav a,
.m-nav a,
.filter-bar a,
.showroom__actions a { cursor: pointer; }

.btn,
.nav a,
.m-nav a,
.footer__social a,
.to-top { transition-duration: .22s; }

.btn:disabled {
  cursor: wait;
  opacity: .78;
  transform: none;
  box-shadow: none;
}
.btn.is-success,
.btn.is-success:hover { background: var(--color-success); }

.nav > li:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a:focus-visible { background: var(--bg-soft); color: var(--red); }

.m-nav__close,
.footer__social a { min-width: 44px; min-height: 44px; }
.m-nav__panel { overscroll-behavior: contain; }
.m-nav[aria-hidden="true"] { pointer-events: none; }
.m-nav.open { pointer-events: auto; }

.reveal {
  transform: translateY(20px);
  transition-duration: .45s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.form-field { position: relative; }
.field-error {
  display: block;
  min-height: 19px;
  color: var(--color-error);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: var(--color-error);
  background: #FFF7F8;
  box-shadow: 0 0 0 3px rgba(200,30,58,.09);
}
.form-field input[aria-invalid="false"],
.form-field textarea[aria-invalid="false"] { border-color: #A8B3C3; }
.form-status {
  min-height: 24px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.form-status:empty { margin-top: 0; }
.form-status.is-error { color: var(--color-error); }
.form-status.is-success { color: var(--color-success); }

@media (max-width: 992px) {
  .about__badge { right: 16px; }
}

@media (max-width: 640px) {
  .m-nav ul li a { min-height: 48px; }
  .btn { min-height: 48px; }
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---------- Banner Hệ Thống Đại Lý (dựng lại từ file Corel) ---------- */
.hbanner {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(130% 100% at 50% 0%, #F04A5E 0%, #D31732 38%, #A50F26 68%, #6E0716 100%);
  padding: 34px 0 150px;
}
.hbanner::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, transparent 95%);
}
.hbanner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(58,4,12,.5));
}
.hbanner__in { position: relative; z-index: 2; width: min(1720px, 100% - 40px); margin-inline: auto; }

.hbanner__head { position: relative; margin-bottom: 30px; }
.hbanner__logo { position: absolute; left: 0; top: 10px; display: flex; flex-direction: column; line-height: 1.15; z-index: 3; }
.hbanner__logo b { font-family: var(--font-display, var(--font)); font-size: 30px; font-weight: 800; letter-spacing: .02em; }
.hbanner__logo i { font-style: normal; font-size: 11px; letter-spacing: .52em; opacity: .85; }
.hbanner__logo span { margin-top: 6px; font-size: 13px; font-weight: 600; opacity: .92; }

.hbanner__title { width: min(860px, 92%); margin-inline: auto; }
.hbanner__title svg { width: 100%; height: auto; display: block; overflow: visible; }
.hbanner__arc-text {
  font-family: var(--font-display, var(--font));
  font-size: 86px; font-weight: 800; letter-spacing: .02em;
  fill: #fff; stroke: #6E0716; stroke-width: 3; paint-order: stroke;
  filter: drop-shadow(0 6px 12px rgba(70,4,12,.5));
}

.hbanner__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 8px 0 32px; }
.bbadge {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 16px; min-height: 52px;
  box-shadow: 0 8px 20px rgba(70,4,12,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bbadge:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(70,4,12,.42); }
.bbadge img { height: 22px; width: auto; }
.bbadge__text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.bbadge__text b { font-size: 13.5px; font-weight: 800; color: var(--red); text-transform: uppercase; }
.bbadge__text small { font-size: 10.5px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.bbadge--green { background: linear-gradient(150deg, #0E9F6E, #046A47); }
.bbadge--green .bbadge__text b, .bbadge--green .bbadge__text small { color: #fff; }
.bbadge--dark { background: #17181C; }
.bbadge--dark .bbadge__text b { color: #fff; font-style: italic; }
.bbadge--dark .bbadge__text small { color: rgba(255,255,255,.72); }
.bbadge--dark img { background: #fff; border-radius: 5px; padding: 2px 4px; }

.hbanner__groups {
  display: grid; gap: 16px;
  grid-template-columns: 4.1fr 1.2fr 1.35fr 2.25fr 2.25fr;
  align-items: start;
}
.bgroup {
  position: relative; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 14px; padding: 24px 12px 12px;
  transition: border-color .25s, background .25s;
}
.bgroup:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.bgroup__label {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: #fff; color: var(--red);
  font-size: 12.5px; font-weight: 800; padding: 5px 16px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(70,4,12,.3); transition: .25s;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
}
.bgroup__label:hover { background: var(--red); color: #fff; }
.bgroup__grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.bgroup--solo .bgroup__grid { grid-template-columns: 1fr; }
.bgroup--pair .bgroup__grid { grid-template-columns: 1fr 1fr; }

.btile {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(70,4,12,.25);
  transition: transform .28s ease, box-shadow .28s ease;
}
.btile:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 18px 34px rgba(70,4,12,.45); z-index: 3; position: relative; }
.btile__img { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.btile__img i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .5s ease; }
.btile:hover .btile__img i { transform: scale(1.12); }
.btile__name {
  padding: 6px 8px; font-size: 11px; font-weight: 700; color: var(--red);
  text-align: center; line-height: 1.3; min-height: 36px; display: grid; place-items: center;
}
.bgroup--solo .btile__img { aspect-ratio: 4 / 3; }

@media (max-width: 1500px) {
  .hbanner__groups { grid-template-columns: 1fr 1fr; }
  .bgroup--head { grid-column: 1 / -1; }
}
@media (max-width: 992px) {
  .hbanner { padding: 26px 0 130px; }
  .hbanner__logo { position: static; align-items: center; text-align: center; margin-bottom: 10px; }
  .hbanner__groups { grid-template-columns: 1fr; gap: 26px; }
  .bgroup__grid, .bgroup--head .bgroup__grid { grid-template-columns: repeat(3, 1fr); }
  .bgroup--pair .bgroup__grid { grid-template-columns: 1fr 1fr; }
  .hbanner__arc-text { font-size: 96px; }
}
@media (max-width: 640px) {
  .bgroup__grid, .bgroup--head .bgroup__grid { grid-template-columns: 1fr 1fr; }
  .bbadge { padding: 7px 12px; min-height: 46px; }
  .hbanner__arc-text { font-size: 110px; }
}

/* ---------- Banner dạng ảnh (xuất từ Corel) ---------- */
.hbanner--image { padding: 0; background: #C8102E; }
.hbanner--image::before, .hbanner--image::after { display: none; }
.hbanner--image a { display: block; }
/* <picture> mặc định display:inline như <img> — không đặt block thì hụt vài px
   dưới đáy do khoảng trắng canh theo baseline dòng chữ. */
.hbanner--image picture { display: block; }
.hbanner--image img { display: block; width: 100%; height: auto; transition: filter .3s ease; }
.hbanner--image a:hover img { filter: brightness(1.05); }
.hbanner--image + .stats { margin-top: 0; }

/* ---------- Băng chuyền dùng chung (banner đầu trang, khối video) ----------
   Phần trượt do scroll-snap lo: vuốt trên điện thoại, lăn ngang trên máy tính và
   phím Tab đều chạy sẵn. JS chỉ thêm nút chuyển, chấm và tự chạy. */
.ptsl {
  position: relative;
  /* Tạo khối định dạng riêng: nếu không, lề âm dùng để bù phần chừa chỗ cho bóng
     đổ sẽ "thoát" ra ngoài (margin collapsing) thay vì thu chiều cao khối lại,
     khiến chấm điều hướng rơi xuống dưới ảnh, nằm trên nền trắng. */
  display: flow-root;
}
.ptsl__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Thanh cuộn ngang ở đây là nhiễu — đã có chấm và nút làm chỉ báo vị trí */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Chặn trình duyệt kéo cả trang theo chiều ngang khi người xem vuốt tấm cuối */
  overscroll-behavior-x: contain;
}
.ptsl__track::-webkit-scrollbar { display: none; }
.ptsl__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

/* Một tấm thì không còn là băng chuyền, bỏ hết phần trượt cho nhẹ */
.ptsl--single .ptsl__track { overflow: visible; scroll-snap-type: none; }

/* Nút hiện sẵn ở mức mờ — chỉ hiện khi rê chuột thì người xem không biết là có
   thể chuyển tấm, nhất là khi bấm vào ảnh lại mở việc khác (video mở lightbox). */
.ptsl__nav {
  position: absolute; top: 50%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(11,15,22,.4);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(6px);
  opacity: .62;
  transition: opacity .25s ease, background .2s ease, border-color .2s ease;
}
.ptsl__nav svg { width: 22px; height: 22px; }
.ptsl__nav--prev { left: 18px; transform: translateY(-50%); }
.ptsl__nav--next { right: 18px; transform: translateY(-50%) rotate(180deg); }
.ptsl:hover .ptsl__nav,
.ptsl:focus-within .ptsl__nav { opacity: 1; }
.ptsl__nav:hover { background: rgba(200,16,46,.92); border-color: transparent; }
.ptsl__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Hết tấm ở đầu hoặc cuối thì mờ đi thay vì biến mất, để nút không nhảy chỗ */
.ptsl__nav[disabled] { opacity: .22 !important; cursor: default; }

/* Vạch mảnh, không khung nền. Ảnh mỗi tấm một tông nên vạch cần bóng đổ để nổi
   được cả trên vùng sáng lẫn vùng tối, thay vì phải bọc trong một viên nền đen. */
.ptsl__dots {
  position: absolute; left: 50%; bottom: 18px; z-index: 3;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
}
.ptsl__dot {
  width: 20px; height: 16px; padding: 0; flex: none;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.ptsl__dot i {
  position: relative; overflow: hidden;
  display: block; width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.34);
  box-shadow: 0 1px 3px rgba(7,11,17,.45);
  transition: background .3s ease;
}
.ptsl__dot:hover i { background: rgba(255,255,255,.62); }
/* Tấm đang xem kéo dài ra — chỉ đổi màu thì ở bề dày 3px gần như không nhận ra */
.ptsl__dot.on { width: 54px; }

/* Ruột vạch: khối không tự chuyển thì đầy luôn, có tự chuyển thì chạy dần cho
   người xem biết còn bao lâu nữa sang tấm kế. */
.ptsl__dot i::after {
  content: ""; position: absolute; inset: 0;
  background: #fff; border-radius: inherit;
  transform: scaleX(0); transform-origin: left;
}
.ptsl__dot.on i::after { transform: scaleX(1); }
.ptsl[data-autoplay] .ptsl__dot.on i::after {
  transform: scaleX(0);
  animation: ptsl-fill var(--ptsl-dur, 6s) linear forwards;
}
/* Tự chuyển dừng (rê chuột, đang thao tác, đổi tab) thì vạch cũng đứng theo */
.ptsl.is-paused .ptsl__dot.on i::after { animation-play-state: paused; }
@keyframes ptsl-fill { to { transform: scaleX(1); } }

.ptsl__dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .ptsl[data-autoplay] .ptsl__dot.on i::after { animation: none; transform: scaleX(1); }
}

/* Nhiều banner thì phải chung một khung, nếu không mỗi lần chuyển tấm là chiều cao
   cả đầu trang nhảy theo tỉ lệ ảnh. Một banner thì để ảnh giữ tỉ lệ thật của nó. */
.hbanner__slider:not(.ptsl--single) .ptsl__slide a { display: block; aspect-ratio: 2560 / 976; }
.hbanner__slider:not(.ptsl--single) .ptsl__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Đáy tấm video đã có chip số liệu, đẩy chấm xuống sát mép cho khỏi chen nhau */
.vcov__slider .ptsl__dots { bottom: 14px; }

/* Bóng đổ đặt ở khung ngoài, không ở từng tấm: khung trượt (overflow) cắt phẳng
   mọi thứ tràn ra, nên bóng đặt bên trong sẽ thành một mảng xám hình chữ nhật
   thay vì toả mềm. Mỗi lần chỉ hiện một tấm rộng đúng bằng khung nên bóng ở
   ngoài trùng khít với tấm đang xem. */
.vcov__slider { border-radius: 24px; box-shadow: 0 30px 80px rgba(12,18,28,.15); }
.vcov__slider .video-facade { box-shadow: none; }

@media (max-width: 640px) {
  /* Trên điện thoại người dùng vuốt là chính, nút chuyển chỉ chiếm chỗ */
  .ptsl__nav { display: none; }
  .ptsl__dots { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ptsl__track { scroll-behavior: auto; }
}

/* ---------- Số liệu dạng dải phẳng (không nổi đè lên banner) ---------- */
.stats--flat { margin-top: 0; }
.stats--flat .stats__grid {
  background: #fff;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  border-bottom: 1px solid var(--line);
}
.stats--flat .stat { padding: 60px 28px 56px; }
.stats--flat .stat + .stat::before { top: 30%; height: 40%; }
@media (max-width: 992px) {
  .stats--flat .stat { padding: 40px 20px 36px; }
}

/* ---------- Menu theo web gốc: icon tìm kiếm + hamburger desktop ---------- */
.icon-btn {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ink);
  transition: .2s;
}
.icon-btn:hover { color: var(--red); background: var(--bg-soft); }
.icon-btn svg { width: 21px; height: 21px; }
.burger { display: grid; border: 0; }
.burger:hover { color: var(--red); background: var(--bg-soft); }

.search-pop { display: none; border-top: 1px solid var(--line); background: #fff; }
.search-pop.open { display: block; }
.search-pop form { display: flex; gap: 10px; padding: 14px 0; }
.search-pop input {
  flex: 1; font: inherit; font-size: 15px; color: var(--ink);
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-soft);
}
.search-pop input:focus { outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(200,16,46,.1); }

/* ==========================================================================
   Premium Automotive Tech refinement
   Giữ nguyên layout; chỉ nâng cấp bề mặt, hệ màu và micro-interaction.
   ========================================================================== */
:root {
  --tech-cyan: #38BDF8;
  --tech-cyan-strong: #0EA5E9;
  --tech-cyan-soft: rgba(56, 189, 248, .12);
  --tech-line: rgba(56, 189, 248, .22);
  --graphite-950: #070B11;
  --graphite-900: #0B111A;
  --graphite-850: #101824;
  --surface-precision: rgba(255, 255, 255, .94);
  --border-precision: rgba(15, 23, 42, .105);
  --shadow-precision: 0 20px 55px rgba(7, 11, 17, .10), 0 2px 8px rgba(7, 11, 17, .04);
  --shadow-precision-hover: 0 30px 70px rgba(7, 11, 17, .15), 0 8px 22px rgba(7, 11, 17, .06);
}

body {
  background: #fff;
  background-image: linear-gradient(90deg, transparent 0, rgba(15,23,42,.015) 50%, transparent 100%);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: calc(var(--z-skip-link) + 1);
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--red) 0 72%, var(--tech-cyan) 100%);
  box-shadow: 0 0 16px rgba(225, 29, 54, .26);
}

/* Đầu trang chốt bản không viền dưới (đã bỏ theo yêu cầu khách) — chỉ giữ
   isolation để header có ngữ cảnh xếp lớp riêng, không đụng màu/bóng đổ đã
   khai ở khối "Trắng dày dặn" phía trên. */
.header { position: sticky; isolation: isolate; }
.nav a.nav__link { position: relative; }
.dropdown {
  border: 1px solid var(--border-precision);
  box-shadow: 0 24px 60px rgba(7,11,17,.14), 0 1px 0 rgba(255,255,255,.9) inset;
}
.icon-btn {
  border: 1px solid transparent;
}
.icon-btn:hover {
  border-color: var(--tech-line);
  background: linear-gradient(145deg, #fff, #F4F8FB);
  box-shadow: 0 8px 22px rgba(7,11,17,.07);
}
.search-pop {
  border-top-color: rgba(56,189,248,.2);
  box-shadow: 0 16px 44px rgba(7,11,17,.09);
}

.section--soft {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), transparent 180px),
    radial-gradient(circle at 92% 12%, rgba(56,189,248,.055), transparent 25%),
    #F6F8FB;
}
.section--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
}

.eyebrow {
  color: #B91C1C;
  font-weight: 800;
}
.eyebrow::before,
.sec-head--center .eyebrow::after {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red) 0 78%, var(--tech-cyan) 78% 100%);
}
.sec-title { color: #101722; }

.hbanner--image {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid rgba(56,189,248,.22);
  background: var(--graphite-950);
}
.hbanner--image::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,11,17,.16), transparent 16% 84%, rgba(7,11,17,.16)),
    linear-gradient(180deg, transparent 72%, rgba(7,11,17,.16));
}
.hbanner--image a { position: relative; z-index: 0; }
.hbanner--image img { filter: saturate(.97) contrast(1.025); }

.stats--flat {
  position: relative;
  z-index: 4;
  background: linear-gradient(180deg, #fff, #F8FAFC);
}
.stats--flat .stats__grid {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  box-shadow: 0 24px 60px rgba(7,11,17,.055);
}
.stats--flat .stats__grid::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(225,29,54,.65) 30%, rgba(56,189,248,.5) 70%, transparent);
}
.stat {
  isolation: isolate;
  transition: background-color .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.stat::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 18px 5px 18px 5px;
  pointer-events: none;
  transition: border-color .22s ease, background-color .22s ease;
}
.stat__icon {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(225,29,54,.12);
  border-radius: 19px 5px 19px 5px;
  background: linear-gradient(145deg, #fff, #F4F7FA);
  box-shadow: 0 12px 28px rgba(7,11,17,.08), 0 1px 0 #fff inset;
}
.stat__icon svg { width: 34px; height: 34px; }
.stat .stat__num::after {
  background: linear-gradient(90deg, var(--red) 0 72%, var(--tech-cyan) 72% 100%);
  box-shadow: 0 0 12px rgba(225,29,54,.16);
}

.net-card,
.post,
.partner,
.showroom,
.mv-card,
.phi-item,
.ci-card,
.contact-form,
.tl-item__card {
  border-color: var(--border-precision);
  background-color: var(--surface-precision);
  box-shadow: var(--shadow-precision);
}
.net-card,
.post,
.partner,
.showroom,
.mv-card,
.phi-item,
.ci-card,
.contact-form,
.tl-item__card,
.value-card {
  isolation: isolate;
}
.net-card {
  background:
    radial-gradient(circle at 100% 0, rgba(56,189,248,.07), transparent 28%),
    linear-gradient(145deg, #fff 0%, #fff 68%, #F8FAFC 100%);
}
.ci-card__icon,
.brand-head__icon {
  border: 1px solid rgba(56,189,248,.14);
  background: linear-gradient(145deg, #F8FAFC, #EEF4F8);
  box-shadow: 0 10px 24px rgba(7,11,17,.065), 0 1px 0 #fff inset;
}
.post__media::after,
.showroom__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(56,189,248,.42) 0 1px, transparent 1px) 14px 14px / 26px 26px no-repeat,
    linear-gradient(315deg, rgba(255,255,255,.7) 0 1px, transparent 1px) calc(100% - 14px) calc(100% - 14px) / 26px 26px no-repeat,
    linear-gradient(180deg, transparent 60%, rgba(7,11,17,.18));
}
.post__cat,
.showroom__brand,
.tl-item__year {
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(120deg, #B91C1C, #E11D36);
  box-shadow: 0 8px 22px rgba(185,28,28,.22);
}
.post__cat,
.showroom__brand { z-index: 2; }
.post__more,
.net-card__link { letter-spacing: .01em; }

.band {
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 88% 20%, rgba(56,189,248,.15), transparent 24%),
    linear-gradient(112deg, #6F0A1A 0%, #C81431 48%, #E11D36 72%, #A50D25 100%);
  box-shadow: 0 32px 80px rgba(102,8,25,.25), 0 1px 0 rgba(255,255,255,.18) inset;
}
.band::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 21px 5px 21px 5px;
  pointer-events: none;
}

.page-hero { border-bottom: 1px solid rgba(56,189,248,.24); }
.page-hero::before {
  background:
    linear-gradient(90deg, rgba(5,8,12,.97) 0%, rgba(5,8,12,.82) 45%, rgba(5,8,12,.36) 100%),
    linear-gradient(180deg, transparent 60%, rgba(5,8,12,.4));
}
.page-hero::after {
  background:
    linear-gradient(90deg, var(--red) 0 4px, var(--tech-cyan) 4px 5px, transparent 5px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 45%, transparent 90%);
}
.breadcrumb {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px 2px 8px 2px;
  background: rgba(7,11,17,.34);
  backdrop-filter: blur(10px);
}

.filter-bar {
  border-color: rgba(15,23,42,.09);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 48px rgba(7,11,17,.11), 0 1px 0 #fff inset;
}
.filter-bar a { position: relative; }
.filter-bar a.active {
  background: linear-gradient(120deg, #B91C1C, #E11D36);
  box-shadow: 0 9px 22px rgba(185,28,28,.22);
}
.brand-head { border-bottom-color: rgba(56,189,248,.19); }

.form-field input,
.form-field select,
.form-field textarea {
  border-color: rgba(15,23,42,.13);
  background: linear-gradient(180deg, #fff, #FBFCFD);
  box-shadow: 0 1px 0 #fff inset;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: rgba(14,165,233,.28); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--tech-cyan-strong);
  box-shadow: 0 0 0 4px var(--tech-cyan-soft), 0 8px 24px rgba(7,11,17,.06);
}
.map-ph {
  border: 1px solid rgba(56,189,248,.18);
  box-shadow: 0 30px 76px rgba(7,11,17,.16);
}
.map-ph__label {
  border: 1px solid rgba(56,189,248,.2);
  background: rgba(7,11,17,.92);
}

.footer {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 8%, rgba(225,29,54,.15), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(56,189,248,.065), transparent 24%),
    var(--graphite-950);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, #000, transparent 74%);
}
.footer h4::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--red) 0 76%, var(--tech-cyan) 76% 100%);
}
.footer__social a {
  border-color: rgba(56,189,248,.14);
  background: rgba(255,255,255,.035);
}
.to-top {
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(145deg, #E11D36, #A80D24);
  box-shadow: 0 16px 36px rgba(168,13,36,.28);
}

@media (hover: hover) and (pointer: fine) {
  .stat:hover::after {
    border-color: rgba(56,189,248,.18);
    background: rgba(56,189,248,.025);
  }
  .net-card:hover,
  .post:hover,
  .partner:hover,
  .showroom:hover,
  .phi-item:hover,
  .ci-card:hover,
  .tl-item__card:hover {
    border-color: rgba(56,189,248,.18);
    box-shadow: var(--shadow-precision-hover);
    transform: translateY(-4px);
  }
  .ci-card:hover .ci-card__icon {
    border-color: rgba(225,29,54,.2);
    box-shadow: 0 12px 28px rgba(185,28,28,.11);
  }
  .post:hover .post__media::after,
  .showroom:hover .showroom__media::after {
    background:
      linear-gradient(135deg, rgba(56,189,248,.75) 0 1px, transparent 1px) 14px 14px / 30px 30px no-repeat,
      linear-gradient(315deg, rgba(255,255,255,.86) 0 1px, transparent 1px) calc(100% - 14px) calc(100% - 14px) / 30px 30px no-repeat,
      linear-gradient(180deg, transparent 54%, rgba(7,11,17,.22));
  }
  .btn--primary:hover,
  .filter-bar a.active:hover {
    box-shadow: 0 15px 34px rgba(185,28,28,.32), 0 0 0 1px rgba(56,189,248,.14);
  }
}

@media (max-width: 640px) {
  .scroll-progress { height: 2px; }
  .stat__icon { width: 56px; height: 56px; border-radius: 16px 4px 16px 4px; }
  .stat__icon svg { width: 30px; height: 30px; }
  .stats--flat .stat { padding-top: 34px; padding-bottom: 32px; }
  .band::after { inset: 8px; }
  .footer h4::after { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .stat,
  .net-card,
  .post,
  .partner,
  .showroom,
  .phi-item,
  .ci-card,
  .tl-item__card { transform: none !important; }
}

/* ---------- Audit UI/UX Pro Max: contrast & motion ---------- */
/* Chữ meta nhỏ trên nền sáng phải đạt tối thiểu 4.5:1 */
.post__meta { color: #667085; }
.dropdown a small { color: #667085; }
@media (prefers-reduced-motion: reduce) {
  .btile, .bbadge, .bgroup, .hbanner--image img { transform: none !important; filter: none !important; }
}

/* ---------- Trang tìm kiếm & 404 ---------- */
.search-again { display: flex; gap: 10px; max-width: 560px; margin: 28px auto 0; }
.search-again input {
  flex: 1; font: inherit; font-size: 15px; color: var(--ink);
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--bg-soft);
}
.search-again input:focus { outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(200,16,46,.1); }
.pagination-wrap { margin-top: 48px; text-align: center; }
.pagination-wrap .nav-links { display: inline-flex; gap: 8px; }
.pagination-wrap .page-numbers {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px;
  padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line);
  font-size: 14.5px; font-weight: 600; transition: .2s;
}
.pagination-wrap .page-numbers:hover { border-color: var(--red); color: var(--red); }
.pagination-wrap .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }
.notfound { text-align: center; max-width: 620px; margin-inline: auto; padding: 40px 0; }
.notfound__code {
  display: block; font-family: var(--font-display, var(--font));
  font-size: clamp(90px, 14vw, 150px); font-weight: 800; line-height: 1;
  color: var(--red); letter-spacing: -.04em; margin-bottom: 10px;
}
.notfound .sec-desc { margin-top: 12px; }
.notfound__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Khối video (3 phương án demo) ---------- */
.demo-label {
  position: sticky; top: 76px; z-index: 50;
  background: var(--dark); color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 10px 20px; text-align: center;
}
.demo-label span {
  display: inline-block; background: var(--red); border-radius: 999px;
  padding: 2px 12px; margin-right: 10px; font-weight: 800; text-transform: uppercase; font-size: 12px;
}

.about--video { align-items: center; }
.about__list--single { grid-template-columns: 1fr; }

.video-frame {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Phương án B — cinematic */
.video-cinema {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, #17090C 0%, #4A0B16 55%, #7E0A1D 100%);
  padding: var(--sec-y) 0;
}
.video-cinema::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.video-cinema .sec-head { position: relative; z-index: 2; }
.video-cinema .sec-title { color: #fff; }
.video-cinema .sec-desc { color: rgba(255,255,255,.75); }
.video-frame--cinema {
  position: relative; z-index: 2;
  max-width: 960px; margin-inline: auto;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
}
.video-cinema__chips {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 36px;
}
.video-cinema__chips span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: 13.5px; color: rgba(255,255,255,.85);
}
.video-cinema__chips b { color: #fff; font-size: 15px; }

/* Phương án C — facade + lightbox */
.video-facade {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  padding: 0; border: 0; cursor: pointer;
  box-shadow: var(--shadow-lg); background: #000;
}
.video-facade > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s; }
.video-facade:hover > img { transform: scale(1.05); opacity: .85; }
.play-btn {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(200,16,46,.5);
  animation: playPulse 2.2s infinite;
  transition: transform .25s;
}
.video-facade:hover .play-btn { transform: scale(1.08); }
.play-btn svg { width: 30px; height: 30px; margin-left: 5px; }
@keyframes playPulse {
  0% { box-shadow: 0 0 0 0 rgba(200,16,46,.45); }
  70% { box-shadow: 0 0 0 26px rgba(200,16,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}
.video-facade__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 18px 14px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color: #fff; font-size: 13.5px; font-weight: 600;
}

.video-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,9,12,.88); backdrop-filter: blur(4px);
  display: none; place-items: center; padding: 24px;
}
.video-modal.open { display: grid; }
.video-modal__box { position: relative; width: min(1000px, 100%); }
.video-modal__frame { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center; transition: .2s;
}
.video-modal__close:hover { background: var(--red); }
@media (max-width: 992px) {
  .demo-label { top: 0; }
}

/* ---------- Phương án C2: cover cinematic toàn khung ---------- */
.video-facade--cover {
  aspect-ratio: 21 / 9;
  border-radius: 24px;
}
.video-cover__shade {
  position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(23,9,12,.88) 0%, rgba(110,7,22,.55) 42%, rgba(23,9,12,.15) 75%);
  transition: opacity .3s;
}
.video-facade--cover:hover .video-cover__shade { opacity: .85; }
.video-facade--cover .play-btn { inset: auto; right: 7%; top: 50%; transform: translateY(-50%); }
.video-facade--cover:hover .play-btn { transform: translateY(-50%) scale(1.08); }
.video-cover__content {
  position: absolute; left: 5%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; color: #fff; max-width: 46%;
}
.video-cover__content i {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.video-cover__content strong {
  font-family: var(--font-display, var(--font));
  font-size: clamp(22px, 3vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
}
.video-cover__content em { font-style: normal; font-size: 13.5px; color: rgba(255,255,255,.75); font-weight: 600; }
.video-cover__chips {
  position: absolute; right: 4%; bottom: 7%;
  display: flex; gap: 10px;
}
.video-cover__chips span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600;
}
.video-cover__chips b { color: #fff; font-size: 13.5px; }

/* ---------- Phương án C3: khung nổi lệch + thanh kính mờ ---------- */
.video-offset { position: relative; max-width: 880px; margin-inline: auto; }
.video-offset::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(20px, 20px);
  border: 2.5px solid var(--red); border-radius: 20px;
  pointer-events: none;
}
.video-offset__num {
  position: absolute; z-index: 0; top: -86px; left: -70px;
  font-family: var(--font-display, var(--font));
  font-size: 200px; font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(200,16,46,.22);
  user-select: none;
}
.video-facade--offset { position: relative; z-index: 1; }
.video-offset__bar {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(15,17,22,.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  text-align: left;
}
.video-offset__logo { height: 34px; width: auto; border-radius: 6px; background: #fff; padding: 2px 4px; }
.video-offset__meta { flex: 1; display: flex; flex-direction: column; line-height: 1.35; color: #fff; }
.video-offset__meta b { font-size: 14.5px; font-weight: 700; }
.video-offset__meta small { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500; }
.video-offset__cta {
  font-style: normal; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--red); padding: 9px 18px; border-radius: 999px;
  transition: background .2s;
}
.video-facade--offset:hover .video-offset__cta { background: var(--red-dark); }
.video-facade--offset .play-btn { width: 74px; height: 74px; }

@media (max-width: 992px) {
  .video-facade--cover { aspect-ratio: 16 / 10; }
  .video-cover__content { max-width: 70%; }
  .video-cover__chips { display: none; }
  .video-offset__num { font-size: 120px; top: -52px; left: -8px; }
  .video-offset::before { transform: translate(12px, 12px); }
}
@media (max-width: 640px) {
  .video-facade--cover .play-btn { right: auto; left: 5%; top: auto; bottom: 8%; transform: none; width: 60px; height: 60px; }
  .video-offset__bar { flex-wrap: wrap; gap: 10px; }
  .video-offset__cta { width: 100%; text-align: center; }
}

/* ---------- C2+ : bản phát triển của cover cinematic ---------- */
.video-facade--pro { aspect-ratio: 21 / 10; }
.video-facade--pro .video-cover__shade {
  background: linear-gradient(80deg, rgba(20,8,11,.93) 0%, rgba(110,7,22,.6) 48%, rgba(20,8,11,.22) 100%);
}
.video-facade--pro .video-cover__content { max-width: 44%; gap: 13px; }
.vc-desc {
  font-size: 14.5px; font-weight: 400; line-height: 1.75;
  color: rgba(255,255,255,.82);
}

/* Key "30 NĂM" outline góc phải trên */
.vc-ghost {
  position: absolute; top: 7%; right: 4.5%;
  text-align: right; line-height: .85; pointer-events: none;
}
.vc-ghost b {
  display: block;
  font-family: var(--font-display, var(--font));
  font-size: clamp(64px, 8.5vw, 128px); font-weight: 800; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.3);
}
.vc-ghost i {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  letter-spacing: .55em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Key "EST · 1995" góc trái dưới */
.vc-est {
  position: absolute; left: 5%; bottom: 8.5%;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display, var(--font));
  font-size: 19px; font-weight: 800; letter-spacing: .3em;
  color: rgba(255,255,255,.78); text-transform: uppercase;
}
.vc-est::before { content: ""; width: 54px; height: 2px; background: rgba(255,255,255,.5); }
@media (max-width: 640px) { .vc-est { font-size: 15px; } }

/* Nút play vòng chữ xoay */
.play-orbit {
  position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
  width: 158px; height: 158px;
  display: grid; place-items: center;
}
.play-orbit__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: orbitSpin 16s linear infinite; }
.play-orbit__ring text {
  font-size: 10px; font-weight: 700; letter-spacing: .3em;
  fill: rgba(255,255,255,.78); text-transform: uppercase;
}
.play-orbit__btn {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  display: grid; place-items: center;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.play-orbit__btn svg { width: 26px; height: 26px; margin-left: 4px; }
.video-facade--pro:hover .play-orbit__btn {
  background: var(--red); border-color: var(--red);
  transform: scale(1.08);
  box-shadow: 0 16px 40px rgba(200,16,46,.55);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .video-facade--pro { aspect-ratio: 16 / 10; }
  .video-facade--pro .video-cover__content { max-width: 56%; }
  .play-orbit { width: 128px; height: 128px; right: 5%; }
  .play-orbit__btn { width: 66px; height: 66px; }
  .vc-ghost { top: 5%; }
}
@media (max-width: 640px) {
  /*
   * Bố cục desktop để chữ bên trái, trang trí (số "30 NĂM", nút play) bên phải —
   * tách nhau theo chiều ngang. Khung xoay dọc trên mobile thì cả ba thứ dồn vào
   * cùng một cột hẹp và chồng lên nhau (nút play đè lên tiêu đề). Xếp lại thành
   * 3 tầng theo chiều dọc, mỗi tầng có khoảng riêng: số mờ ở góc trên — nút play
   * ở giữa — khối chữ ở đáy.
   */
  .video-facade--pro { aspect-ratio: 3 / 4; }

  /* Gradient chéo trái-phải của bản desktop chừa mảng giữa gần như sáng nguyên —
     đúng chỗ nút play và khối chữ mobile đi qua. Đổi thành gradient dọc tối dần
     xuống đáy, đúng hướng nội dung mobile xếp chồng. */
  .video-facade--pro .video-cover__shade {
    background: linear-gradient(190deg, rgba(20,8,11,.5) 0%, rgba(20,8,11,.14) 26%, rgba(20,8,11,.42) 50%, rgba(20,8,11,.96) 76%);
  }

  /* Tầng 1: số mờ thu nhỏ, nép hẳn vào góc để không tranh chỗ với nút play */
  .vc-ghost { top: 4%; right: 6%; }
  .vc-ghost b { font-size: 38px; -webkit-text-stroke: 1.5px rgba(255,255,255,.3); }
  .vc-ghost i { font-size: 9px; letter-spacing: .3em; }

  /* Tầng 2: nút play thu nhỏ, có toạ độ riêng thay vì trôi theo khoảng trống còn lại */
  .play-orbit { top: 14%; right: auto; left: 50%; width: 108px; height: 108px; transform: translateX(-50%); }
  .play-orbit__btn { width: 60px; height: 60px; }
  .play-orbit__btn svg { width: 20px; height: 20px; margin-left: 3px; }
  .play-orbit__ring text { font-size: 8px; letter-spacing: .22em; }

  /* Tầng 3: khối chữ — giới hạn số dòng mô tả để nội dung nhập dài không bị đẩy
     ngược lên tầng nút play phía trên */
  .video-facade--pro .video-cover__content { max-width: 88%; top: auto; bottom: 6%; transform: none; gap: 8px; }
  .video-facade--pro .video-cover__content strong { font-size: 22px; }
  .vc-desc {
    font-size: 13.5px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }

  /* Trùng thông tin với "· Từ 1995" đã có ở dòng nhỏ trên tiêu đề — bỏ bớt cho thoáng */
  .vc-est { display: none; }

  .video-facade--pro + .video-cover__chips, .video-facade--pro .video-cover__chips { display: none; }
}

/* ---------- Demo đại lý A: tab thương hiệu ---------- */
.dtabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--sec-head-mb); }
.dtab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  transition: .22s;
}
.dtab img { height: 20px; width: auto; }
.dtab em {
  font-style: normal; font-size: 12px; font-weight: 800;
  background: var(--bg-soft); color: var(--gray);
  padding: 2px 9px; border-radius: 999px;
}
.dtab:hover { border-color: var(--red); color: var(--red); }
.dtab.active {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 10px 24px rgba(200,16,46,.32);
}
.dtab.active img { filter: brightness(0) invert(1); }
.dtab.active em { background: rgba(255,255,255,.2); color: #fff; }

.dpanel { display: none; }
.dpanel.active { display: block; animation: dpanelIn .35s ease; }
@keyframes dpanelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dpanel__head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 24px;
}
.dpanel__head img { height: 34px; width: auto; }
.dpanel__head h2 { font-size: 21px; font-weight: 800; }
.dpanel__head span { font-size: 13.5px; color: var(--gray); }
.dpanel__head b { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--red); background: rgba(200,16,46,.08); padding: 8px 16px; border-radius: 999px; white-space: nowrap; }

/* ---------- Demo đại lý B: danh bạ chi nhánh ---------- */
.locator { display: grid; grid-template-columns: 400px 1fr; gap: 26px; align-items: start; }
.locator__list {
  max-height: 660px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
}
.locator__group-title {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-soft); color: var(--red);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.locator__group-title i { font-style: normal; color: var(--gray); font-weight: 700; }
.locator__item {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent; cursor: pointer; transition: .18s;
}
.locator__item:hover { background: var(--bg-soft); }
.locator__item.active { background: rgba(200,16,46,.06); border-left-color: var(--red); }
.locator__item b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.locator__item span { font-size: 12.5px; color: var(--gray); }
.locator__item.active b { color: var(--red); }

.locator__detail {
  position: sticky; top: 100px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow);
}
.locator__photo { aspect-ratio: 16 / 8; background-size: cover; background-position: center; transition: opacity .25s; }
.locator__body { padding: 28px 30px 30px; }
.locator__brand {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); background: rgba(200,16,46,.08);
  padding: 5px 12px; border-radius: 6px; margin-bottom: 12px;
}
.locator__name { font-size: 24px; font-weight: 800; margin-bottom: 14px; }
.locator__addr-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--gray); padding: 5px 0; }
.locator__addr-row svg { color: var(--red); flex: none; margin-top: 2px; }
.locator__phone { font-weight: 700; color: var(--ink); }
.locator__phone:hover { color: var(--red); }
.locator__detail .showroom__actions { margin-top: 20px; }

/* ---------- Demo đại lý C: showcase thương hiệu ---------- */
.bshow { padding: 52px 0; background: #fff; }
.bshow--alt { background: var(--bg-soft); }
.bshow__in { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: center; }
.bshow__logo { display: inline-flex; margin-bottom: 18px; }
.bshow__logo img { height: 40px; width: auto; display: block; }
/* Cùng cách xử lý với .net-card__logo--dark: logo Honda DreamWing là nét trắng nằm
   sẵn trên nền đen, để trần trên nền sáng sẽ ra một hộp đen. */
.bshow__logo--dark {
  background: #141519; border-radius: 10px; padding: 8px 12px;
}
.bshow__logo--dark img { mix-blend-mode: screen; }
.bshow__info h2 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.bshow__info p { font-size: 14.5px; color: var(--gray); margin-bottom: 16px; }
.bshow__count {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--red);
  background: rgba(200,16,46,.08); padding: 7px 16px; border-radius: 999px;
  margin: 0 10px 22px 0;   /* margin-right: khoảng cách với nút cạnh bên — hai phần tử
                              inline chỉ cách nhau đúng 1 khoảng trắng nếu không có nó */
}
.bshow__info .btn { display: inline-flex; }

/*
 * .bshow__gallery bọc cả dải cuộn lẫn thanh điều hướng bên dưới. Dải cuộn
 * (overflow-x: auto) cũng kéo theo overflow-y thành auto luôn dù không khai —
 * đúng theo spec CSS khi chỉ một trục đặt khác "visible" — nên bóng đổ khi
 * hover thẻ bị cắt phẳng ở mép trên/dưới nếu không chừa đủ khoảng trong đệm.
 * Cách chừa: giảm bóng xuống mức vừa đủ đẹp (không dùng --shadow-lg quá lớn)
 * rồi đặt padding khớp đúng độ toả của bóng đó.
 */
.bshow__gallery {
  display: flex; flex-direction: column; gap: 14px;
  /* Item lưới mặc định có min-width:auto — dải thẻ bên trong không co được nên
     đẩy cả khung này rộng bằng tổng bề ngang các thẻ, tràn khỏi cột lưới. */
  min-width: 0;
}
.bshow__strip {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 18px 4px 38px;
  /* Ẩn hẳn scrollbar mặc định của trình duyệt — thay bằng thanh .bshow__track tự vẽ bên dưới */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bshow__strip::-webkit-scrollbar { display: none; }
.bshow__strip { cursor: grab; }
/* Kéo tay mà chữ trong thẻ bị bôi xanh chọn thì rất vướng mắt — chặn chọn chữ khi đang kéo */
.bshow__strip.is-dragging { cursor: grabbing; user-select: none; }
.bshow__strip.is-dragging .bshow__card { user-select: none; }
.bshow__card {
  flex: 0 0 290px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.bshow--alt .bshow__card { background: #fff; }
.bshow__card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,22,27,.14); }
.bshow__photo { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.bshow__body { padding: 14px 16px 16px; }
.bshow__body h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.bshow__body span { font-size: 12.5px; color: var(--gray); }
/* Đại lý có website riêng: cả thẻ là liên kết. Mũi tên chéo cạnh tên là dấu hiệu
   quen thuộc cho "mở sang trang khác", để người xem biết trước khi bấm. */
.bshow__card--link { display: block; color: inherit; }
.bshow__card--link .bshow__body h3 { display: flex; align-items: center; gap: 6px; }
.bshow__out { flex: none; color: var(--gray-light); transition: color .2s, transform .2s; }
.bshow__card--link:hover { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.bshow__card--link:hover .bshow__body h3 { color: var(--red); }
.bshow__card--link:hover .bshow__out { color: var(--red); transform: translate(2px, -2px); }

/* Thanh điều hướng tự vẽ: mũi tên hai bên + vạch tiến trình ở giữa */
.bshow__nav { display: flex; align-items: center; gap: 12px; padding: 0 4px; margin-top: -18px; }
.bshow__arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.bshow__arrow svg { width: 16px; height: 16px; }
.bshow__arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
/* Hết thẻ ở đầu hoặc cuối thì mờ đi thay vì biến mất, để thanh không nhảy layout */
.bshow__arrow[disabled] { opacity: .35; cursor: default; }
.bshow__arrow[disabled]:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.bshow__track {
  position: relative; flex: 1; height: 4px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.bshow__thumb {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: inherit;
  background: var(--red);
  transition: transform .2s ease, width .2s ease;
}

@media (max-width: 992px) {
  .locator { grid-template-columns: 1fr; }
  .locator__detail { position: static; order: -1; }
  .locator__list { max-height: 420px; }
  .bshow__in { grid-template-columns: 1fr; gap: 24px; }
  .dpanel__head { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* Vuốt tay là chính trên điện thoại — giữ lại vạch tiến trình, bỏ mũi tên cho gọn */
  .bshow__arrow { display: none; }
  .bshow__nav { padding: 0 4px; }
}

/* ---------- Demo đại lý D: bản đồ chi nhánh ---------- */
/* Chip lọc nổi trong bản đồ, cột dọc góc trên trái (vùng bản đồ ít điểm) */
.map-chips {
  position: absolute; top: 14px; left: 14px; z-index: 1100;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
/* Bọc riêng các chip thương hiệu (khác .map-config) để mobile cuộn ngang được
   độc lập với khối cấu hình bên dưới, không cùng một hệ flex-wrap. */
.map-chip-row { display: flex; flex-direction: column; gap: 8px; }
.map-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--ink);
  box-shadow: 0 4px 14px rgba(15, 17, 22, .14);
  transition: .2s; cursor: pointer;
}
/* Cấu hình xem: bật/tắt ảnh & tên trên thẻ (tag thương hiệu luôn hiện) */
.map-config {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 18px;
}
.map-config__title {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray); background: rgba(255, 255, 255, .92);
  padding: 4px 11px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 17, 22, .08);
}
.map-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  box-shadow: 0 4px 14px rgba(15, 17, 22, .14);
  transition: .2s; cursor: pointer;
}
.map-toggle__track {
  position: relative; flex: none;
  width: 30px; height: 17px; border-radius: 999px;
  background: #C9CED6; transition: .2s;
}
.map-toggle__track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 17, 22, .25); transition: .2s;
}
.map-toggle[aria-pressed="true"] .map-toggle__track { background: var(--red); }
.map-toggle[aria-pressed="true"] .map-toggle__track::after { transform: translateX(13px); }
#dealer-map.map--no-img .mtip__v i { display: none; }
#dealer-map.map--no-name .mtip__v b { display: none; }
/* Tắt cả ảnh lẫn tên: thẻ chỉ còn tag thương hiệu — co bề rộng theo nội dung */
/* Tắt cả ảnh lẫn tên = ẩn hẳn thẻ, chỉ còn pin (mặc định trên mobile) */
#dealer-map.map--no-img.map--no-name .leaflet-tooltip.mtip { display: none; }

.map-chip i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.map-chip em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--gray); }
.map-chip:not(.active) { opacity: .45; filter: grayscale(.6); }
.map-chip:hover { border-color: var(--c); }
.map-chip.active { border-color: color-mix(in srgb, var(--c) 45%, transparent); }

.dealer-map-wrap {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
#dealer-map { height: 620px; width: 100%; background: #E8ECF0; z-index: 1; }
/*
 * Nền dự phòng (khi chưa có khoá CARTO) vốn nhiều màu. Lọc về tông xám nhạt cho
 * gần nền Positron của thiết kế: các điểm đại lý màu thương hiệu nổi lên trên
 * nền trung tính. Chỉ lọc lớp ô bản đồ — điểm, thẻ ảnh, nhãn nằm ở lớp khác nên
 * giữ nguyên màu.
 */
.map-tiles--du-phong { filter: grayscale(1) brightness(1.08) contrast(.88); }
.dealer-map-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 500; background: rgba(15,17,22,.75); color: #fff;
  font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 999px;
  pointer-events: none; backdrop-filter: blur(4px);
}
.map-note { margin-top: 14px; font-size: 13px; color: var(--gray); text-align: center; }

/* Pin & popup */
.mpin {
  display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c); border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.leaflet-popup-content-wrapper { border-radius: 14px; overflow: hidden; padding: 0; }
.leaflet-popup-content { margin: 0; width: 260px !important; font-family: var(--font); }
.mpop__photo { aspect-ratio: 16 / 8; background-size: cover; background-position: center; }
.mpop__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.mpop__brand {
  align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--c); padding: 3px 10px; border-radius: 5px;
}
.mpop__body b { font-size: 15px; line-height: 1.35; color: var(--ink); }
.mpop__body small { font-size: 12.5px; color: var(--gray); line-height: 1.5; }
.mpop__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mpop__actions a {
  font-size: 12.5px; font-weight: 700; color: var(--red);
  background: rgba(200,16,46,.08); padding: 7px 12px; border-radius: 8px;
  transition: .2s; text-decoration: none;
}
.mpop__actions a:hover { background: var(--red); color: #fff; }
.leaflet-container a.leaflet-popup-close-button { top: 6px; right: 6px; }

@media (max-width: 992px) { #dealer-map { height: 480px; } }
/*
 * Màn hẹp: cột chip nổi sẽ che mất bản đồ — chuyển hẳn xuống dưới bản đồ, thành
 * 2 khối tách bạch thay vì một hàng chip-wrap-center dễ để lọt 1 chip lẻ dồn
 * giữa (ví dụ "Xe đã qua sử dụng" khi số chip lẻ), và khối cấu hình đọc rõ là
 * MỘT nhóm cài đặt chứ không phải 3 nút rời rạc.
 */
@media (max-width: 700px) {
  .map-chips {
    position: static; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-top: 1px solid var(--line);
  }

  /* Chip thương hiệu: cuộn ngang một hàng duy nhất, không wrap — hết chỗ thì
     vuốt tiếp, không còn cảnh chip cuối bị dồn giữa một mình. */
  .map-chip-row {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; padding: 14px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .map-chip-row::-webkit-scrollbar { display: none; }
  .map-chip { flex: none; box-shadow: none; }

  /* Cấu hình xem: một khối cài đặt rõ ràng — tiêu đề nhỏ ở trên, 2 hàng bật/tắt
     đầy đủ chiều ngang bên dưới, nhãn bên trái công tắc bên phải. */
  .map-config {
    flex-direction: column; align-items: stretch; gap: 10px;
    margin: 0; padding: 14px;
    background: var(--bg-soft); border-top: 1px solid var(--line);
  }
  .map-config__title {
    background: none; box-shadow: none; padding: 0;
    align-self: flex-start;
  }
  .map-toggle {
    width: 100%; justify-content: space-between;
    box-shadow: none; border-color: var(--line); background: #fff;
  }
  /* Đưa công tắc ra sau nhãn chữ mà không đổi thứ tự HTML — thứ tự công tắc
     trước/nhãn sau vẫn giữ nguyên cho bản nổi trên desktop. */
  .map-toggle__track { order: 2; }

  .dealer-map-hint { display: none; } /* gợi ý "rê chuột" vô nghĩa trên cảm ứng, lại đè lên chip */
}

/* ---------- Demo D v2: chip chọn 1 + mini-card thường trực ---------- */
.map-chip:not(.active) { opacity: 1; filter: none; }
.map-chip.active {
  background: var(--c); border-color: var(--c); color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 35%, transparent);
}
.map-chip.active i { background: #fff; box-shadow: none; }
.map-chip.active em { color: rgba(255,255,255,.85); }

.leaflet-tooltip.mtip {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
  padding: 3px 8px 3px 3px;
}
.leaflet-tooltip.mtip::before { display: none; }
.mtip__in { display: flex; align-items: center; gap: 6px; font-family: var(--font); }
.mtip__in i { width: 26px; height: 26px; border-radius: 6px; background-size: cover; background-position: center; display: block; flex: none; }
.mtip__in b { font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- Demo D v3: mini-card dọc (popup thu nhỏ) ---------- */
.leaflet-tooltip.mtip { padding: 3px; border-radius: 9px; }
.mtip__v { display: flex; flex-direction: column; gap: 3px; width: 96px; font-family: var(--font); }
.mtip__v i {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 6px; background-size: cover; background-position: center;
}
.mtip__v em {
  align-self: flex-start; font-style: normal;
  font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--c); padding: 2px 5px; border-radius: 4px;
}
.mtip__v b {
  font-size: 9.5px; font-weight: 700; color: var(--ink);
  line-height: 1.3; white-space: normal;
}

/* ---------- Demo D v4: spotlight khi rê + panel chi tiết ---------- */
.leaflet-marker-icon, .leaflet-tooltip.mtip { transition: opacity .25s ease; }
.map-side {
  position: absolute; top: 16px; right: 16px; z-index: 1100;
  width: 310px; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,17,22,.28);
}
.map-side.pop { animation: sidePop .3s ease; }
@keyframes sidePop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.map-side__photo { aspect-ratio: 16 / 8; background-size: cover; background-position: center; background-color: #E8ECF0; }
.map-side__body { padding: 18px 20px 20px; }
.map-side__brand {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; padding: 4px 11px; border-radius: 5px; margin-bottom: 10px;
}
.map-side__name { font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.map-side__row { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--gray); padding: 3px 0; }
.map-side__row svg { color: var(--red); flex: none; margin-top: 2px; }
.map-side__phone { font-weight: 700; color: var(--ink); }
.map-side__phone:hover { color: var(--red); }
.map-side__actions { display: flex; gap: 8px; margin-top: 14px; }
.map-side__actions .btn { flex: 1; justify-content: center; }
@media (max-width: 640px) {
  .map-side { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
  .map-side__photo { aspect-ratio: 16 / 6; }
}

/* ==========================================================================
   Trang Lịch sử — timeline "xương sống trung tâm" (bản chốt từ demo B)
   ========================================================================== */
/* Nền: quầng gradient thương hiệu ghim theo màn hình (luôn thấy khi cuộn)
   + lưới chấm mờ chạy dọc hai mép, chừa sạch cột nội dung ở giữa */
.hdb-bg {
  position: relative;
  background:
    radial-gradient(52vw 60vh at 4% 18%, color-mix(in srgb, var(--red) 7%, transparent), transparent 68%),
    radial-gradient(55vw 65vh at 98% 35%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 70%),
    radial-gradient(48vw 55vh at 8% 92%, color-mix(in srgb, var(--red) 6%, transparent), transparent 68%),
    var(--bg-soft);
  background-attachment: fixed, fixed, fixed, scroll;
}
.hdb-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1.2px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 26%, transparent 74%, #000);
  mask-image: linear-gradient(to right, #000, transparent 26%, transparent 74%, #000);
}
.hdb-bg > .container { position: relative; z-index: 1; }
.hdb-bg { overflow: hidden; }
/* Chữ watermark mờ trên nền: trộn kiểu bóng mờ & viền outline, xen ngang/dọc */
.hdb-bg__words { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.hdbw {
  position: absolute; white-space: nowrap; line-height: 1;
  font-weight: 800; letter-spacing: .01em; text-transform: uppercase;
  font-size: clamp(64px, 8.5vw, 132px);
  color: color-mix(in srgb, var(--ink) 4.5%, transparent);
}
.hdbw--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 9%, transparent);
}
.hdbw--vert {
  writing-mode: vertical-rl;
  font-size: clamp(38px, 4.2vw, 68px);
  letter-spacing: .06em;
}
.hdbw--vert.hdbw--outline { -webkit-text-stroke-width: 1px; }
.hdbw--big {
  font-size: clamp(110px, 14vw, 210px);
  color: color-mix(in srgb, var(--red) 6%, transparent);
}
@media (max-width: 760px) {
  .hdbw { font-size: clamp(44px, 12vw, 72px); }
  .hdbw--big { font-size: clamp(70px, 18vw, 110px); }
  .hdbw--vert { display: none; } /* màn hẹp: bỏ chữ dọc cho đỡ rối */
}
.hdb { position: relative; max-width: 980px; margin-inline: auto; padding: 20px 0 8px; }
.hdb::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 3px; background: var(--line); transform: translateX(-50%); border-radius: 2px;
}
.hdb__progress {
  position: absolute; left: 50%; top: 0; z-index: 1;
  width: 3px; height: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--red) 55%, transparent), var(--red));
  transform: translateX(-50%); border-radius: 2px;
}
/* Mũi tên dẫn đường ở đầu vạch tiến độ (chỉ xuống theo hướng chạy) */
.hdb__progress::after {
  content: ''; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 14px; background: var(--red);
  clip-path: polygon(50% 100%, 0 0, 50% 32%, 100% 0);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--red) 65%, transparent));
}
.hdb-era { position: relative; z-index: 2; text-align: center; padding: 26px 0 34px; }
.hdb-era span {
  display: inline-block; background: var(--dark); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 20px; border-radius: 999px; box-shadow: var(--shadow);
}
.hdb-item { position: relative; width: 50%; padding: 0 44px 34px; }
.hdb-item--l { left: 0; }
.hdb-item--r { left: 50%; }
.hdb-item__dot {
  position: absolute; top: 6px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gray-light); transition: .3s;
}
.hdb-item--l .hdb-item__dot { right: -7.5px; }
.hdb-item--r .hdb-item__dot { left: -7.5px; }
.hdb-item__dot.on {
  border-color: var(--red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 18%, transparent);
  animation: hdbDotPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes hdbDotPop {
  0% { transform: scale(.3); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Năm lớn phía đối diện thẻ, bám sát trục */
.hdb-item__big {
  position: absolute; top: 0; width: 220px; line-height: 1;
}
.hdb-item--l .hdb-item__big { left: calc(100% + 34px); text-align: left; }
.hdb-item--r .hdb-item__big { right: calc(100% + 34px); text-align: right; }
.hdb-item__big b {
  display: block; font-size: 52px; font-weight: 800; letter-spacing: -.03em;
  color: var(--red);
}
.hdb-item__big i {
  display: block; margin-top: 6px;
  font-size: 20px; font-weight: 800; font-style: normal; color: var(--gray-light);
}

/* Animation: chỉ khi vạch tiến độ chạy qua mốc (JS thêm .in vào .hdb-item)
   thì thẻ mới trượt vào từ đúng phía của nó, năm nổi lên sau một nhịp. */
.hdb-card, .hdb-item__big {
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}
.hdb-item__big { transition-delay: .18s; }
.hdb-item:not(.in) .hdb-card { opacity: 0; }
.hdb-item--l:not(.in) .hdb-card { transform: translateX(-48px); }
.hdb-item--r:not(.in) .hdb-card { transform: translateX(48px); }
.hdb-item:not(.in) .hdb-item__big { opacity: 0; transform: translateY(22px) scale(.85); }
/* Nhãn kỷ nguyên trên trục cũng chờ vạch chạy tới mới pop ra */
.hdb-era span { transition: opacity .5s cubic-bezier(.34, 1.56, .64, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.hdb-era:not(.in) span { opacity: 0; transform: scale(.7); }
@media (prefers-reduced-motion: reduce) {
  .hdb-card, .hdb-item__big, .hdb-era span { transition: none; }
  .hdb-item__dot.on { animation: none; }
}
.hdb-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.hdb-card__photo { aspect-ratio: 16 / 6.5; background-size: cover; background-position: center; }
.hdb-card__body { padding: 18px 20px 20px; }
.hdb-card__body h3 { font-size: 16.5px; line-height: 1.35; margin-bottom: 8px; }
.hdb-card__body li {
  position: relative; padding-left: 15px; font-size: 13.5px; color: var(--gray);
  line-height: 1.6; margin-bottom: 5px;
}
.hdb-card__body li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}
@media (max-width: 760px) {
  .hdb::before, .hdb__progress { left: 10px; transform: none; }
  .hdb-item { width: 100%; left: 0; padding: 0 0 36px 40px; }
  .hdb-item--l .hdb-item__dot, .hdb-item--r .hdb-item__dot { left: 3px; right: auto; }
  .hdb-era { text-align: left; padding-left: 40px; }
  /* Năm lớn không còn chỗ bên trục — đưa lên trên thẻ */
  .hdb-item--l .hdb-item__big, .hdb-item--r .hdb-item__big {
    position: static; display: flex; align-items: baseline; gap: 8px;
    width: auto; text-align: left; margin-bottom: 10px;
  }
  .hdb-item__big b { font-size: 32px; }
  .hdb-item__big i { margin-top: 0; font-size: 16px; }
  .hdb-item--l:not(.in) .hdb-card, .hdb-item--r:not(.in) .hdb-card { transform: translateY(24px); }
}

/* ==========================================================================
   Khối số liệu trang chủ — bản chốt "tách thoáng" (phương án B):
   bỏ khung thẻ, tiêu đề dẫn, phân đoạn banner ↔ video bằng nhịp trắng đều
   (các rule dưới cố ý đặt cuối file để đè nhóm .stats--flat phía trên)
   ========================================================================== */
.stats--flat { padding: var(--block-y) 0 0; background: #fff; }
.stats--flat .stats__grid { background: none; border: 0; box-shadow: none; }
.stats--flat .stats__grid::before { display: none; }
.stats--flat .stat { padding: 20px 28px; }
.stats--flat + .video-cover-sec { padding-top: var(--block-y); }
.stats__head { text-align: center; margin-bottom: var(--sec-head-mb); }
.stats__head span {
  display: inline-block; font-size: 13px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--red) 35%, transparent);
}
@media (max-width: 700px) {
}

/* ==========================================================================
   Section Hệ thống đại lý trang chủ — bản chốt "spotlight":
   danh sách hãng bên trái, panel ảnh đổi theo hover bên phải
   ========================================================================== */
.spot { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch; }
.spot__list li { border-bottom: 1px solid var(--line); }
.spot__list li:first-child { border-top: 1px solid var(--line); }
.spot__list a {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 10px; transition: padding .25s ease;
}
.spot__idx { font-size: 12.5px; font-weight: 800; color: var(--gray-light); letter-spacing: .04em; flex: none; }
.spot__list b { font-size: 19px; font-weight: 800; color: var(--ink); transition: color .2s; }
.spot__count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--gray); flex: none; }
.spot__list svg { flex: none; color: var(--gray-light); opacity: 0; transform: translateX(-8px); transition: .25s ease; }
.spot__list li.on a { padding-left: 18px; }
.spot__list li.on b { color: var(--red); }
.spot__list li.on svg { opacity: 1; transform: none; color: var(--red); }
.spot__view {
  position: relative; border-radius: 20px; overflow: hidden;
  min-height: 420px; box-shadow: var(--shadow-lg);
}
.spot__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04); transition: opacity .45s ease, transform .6s ease;
}
.spot__img.on { opacity: 1; transform: none; }
.spot__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 12, 16, .78));
}
.spot__img::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--bc, var(--red)); z-index: 2;
}
.spot__desc {
  position: absolute; left: 24px; right: 24px; bottom: 20px; z-index: 2;
  color: #fff; font-size: 14.5px; line-height: 1.6; font-weight: 500;
}
@media (max-width: 900px) {
  .spot { display: block; }
  .spot__view { display: none; }
}
/* ==========================================================================
   Đối tác chiến lược — mốc hợp tác 1998 → 2014 → 2023 (bản chốt)
   Hướng thị giác: KHÔNG đóng khung. Không viền cứng, không thẻ nổi rõ mép —
   ảnh tan dần xuống nền, thông tin đặt trên nền trắng, chiều sâu tạo bằng
   bóng đổ mềm & rộng ám màu thương hiệu (thay cho bóng xám hộp).
   ========================================================================== */
.ptn-d { background: linear-gradient(180deg, #fff, #FAFBFD 55%, #fff); }
/*
 * Băng chuyền ba thẻ mỗi màn; đối tác thứ tư trở đi thì trượt ngang — cùng luật
 * với khối thương hiệu trang Giới thiệu (.brd3). Đủ ba thẻ thì JS gắn
 * .ptsl--static, giấu nút và chấm, trông y như lưới ba cột cũ.
 *
 * Trước đây khối này là lưới ba cột cố định. Bọc nó vào băng chuyền mà giữ
 * nguyên lưới thì cả khung trượt chỉ chiếm ô đầu của lưới: mỗi lần hiện đúng
 * một thẻ ở một phần ba bên trái, hai phần ba còn lại trắng trơn.
 *
 * Khoảng cách giữa hai thẻ tạo bằng đệm của từng tấm (2 × --ptnd-pad = 32px,
 * đúng bằng gap của lưới cũ) để scroll-snap dừng đúng mép.
 */
.ptnd {
  --per: 3;
  --ptnd-pad: 16px;
  --ptnd-air: 24px;
  /* Bù đệm hai bên của tấm để mép thẻ đầu thẳng hàng với tiêu đề phía trên */
  margin: 0 calc(var(--ptnd-pad) * -1);
}
/*
 * Khung cuộn ngang (overflow-x: auto) cắt luôn theo chiều dọc: bóng đổ mềm của
 * thẻ lan ~80px xuống dưới khi rê chuột, ảnh nhấc lên 6px — để khung ôm sát là
 * bị xén thẳng thành cạnh hộp. Chừa đệm trong khung rồi kéo lại bằng lề âm,
 * cùng cách .brd3 đang làm.
 */
.ptnd .ptsl__track {
  gap: 0;
  padding: 32px var(--ptnd-air) 84px;
  margin: -24px calc(var(--ptnd-air) * -1) -60px;
  /* Không khai báo thì tấm dừng ở mép đệm, lệch khỏi lưới trang */
  scroll-padding-inline: var(--ptnd-air);
}
.ptnd .ptsl__slide { flex: 0 0 calc(100% / var(--per)); padding: 0 var(--ptnd-pad); }
.ptnd-step { position: relative; z-index: 0; text-align: center; }
/* Quầng sáng bầu dục dưới mỗi cột — đọc như ánh sáng hắt, không có cạnh hộp */
.ptnd-step::before {
  content: ''; position: absolute; z-index: -1;
  left: -6%; right: -6%; top: 24%; bottom: -4%;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--bc) 16%, transparent), transparent 68%);
  opacity: 0; filter: blur(14px);
  transition: opacity .5s ease;
  pointer-events: none;
}
.ptnd-step:hover::before { opacity: 1; }

/* --- Ảnh: bo góc lớn, không viền/khung; đáy ảnh mờ dần hoà vào nền --- */
.ptnd-step__photo {
  position: relative; height: 168px; border-radius: 22px; overflow: hidden;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
  /* bóng nhạt & rất nhoè, lệch xuống dưới — gợi độ nổi chứ không viền quanh khối */
  filter: drop-shadow(0 20px 30px rgba(16, 20, 28, .10));
}
.ptnd-step__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  /* mép dưới tan dần — bỏ cảm giác ảnh bị cắt trong khung */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
  mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.ptnd-step:hover .ptnd-step__photo {
  transform: translateY(-6px);
  filter: drop-shadow(0 30px 44px rgba(16, 20, 28, .14));
}
.ptnd-step:hover .ptnd-step__img { transform: scale(1.05); }
/* Logo hãng nổi trên ảnh. Đế trắng do CSS vẽ để cả ba đồng bộ:
   PNG Toyota/Mitsubishi vốn có nền trắng, Honda nền trong suốt — đế này gộp chúng về một kiểu.
   box-sizing: content-box để height là chiều cao logo thật, không tính padding. */
/* Logo hãng nổi trên ảnh. Đế trắng do CSS vẽ để cả ba đồng bộ:
   PNG Toyota/Mitsubishi vốn có nền trắng, Honda nền trong suốt — đế này gộp chúng về một kiểu.
   Khung cố định (không phải auto) để ba đế bằng nhau tuyệt đối dù logo khác tỷ lệ. */
.ptnd-step__logo {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  box-sizing: content-box; width: 118px; height: 50px;
  object-fit: contain; z-index: 2;
  background: #fff; padding: 8px 16px; border-radius: 14px;
  box-shadow: 0 8px 22px rgba(16, 20, 28, .16), 0 1px 3px rgba(16, 20, 28, .08);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.ptnd-step:hover .ptnd-step__logo {
  transform: translateX(-50%) translateY(-4px);
  box-shadow: 0 14px 30px rgba(16, 20, 28, .2), 0 1px 3px rgba(16, 20, 28, .08);
}

/* --- Năm + chấm mốc trên trục --- */
.ptnd-step__year {
  display: block; margin: 16px 0 10px;
  font-size: 38px; font-weight: 800; letter-spacing: -.03em;
  color: var(--bc, var(--red)); line-height: 1;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.ptnd-step:hover .ptnd-step__year { transform: translateY(-2px); }
/* Hàng chấm mốc trải hết bề ngang cột (trong suốt) — nhờ vậy đường nối tính được
   đúng khoảng cách tâm-đến-tâm mà không phải cắt bằng overflow */
.ptnd-step__dot { display: block; position: relative; z-index: 2; width: 100%; height: 13px; }
.ptnd-step__dot::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--bc, var(--red));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bc) 13%, transparent);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.ptnd-step:hover .ptnd-step__dot::before {
  transform: translateX(-50%) scale(1.18);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--bc) 15%, transparent),
              0 0 24px color-mix(in srgb, var(--bc) 40%, transparent);
}
/*
 * Nối tâm chấm này sang tâm chấm kế: đúng một thẻ + đệm hai bên của tấm.
 * Xét "tấm cuối" chứ không xét thẻ: mỗi thẻ nằm riêng trong một tấm nên luôn là
 * con cuối của tấm đó — chọn theo thẻ thì không thẻ nào có đường nối.
 */
.ptnd .ptsl__slide:not(:last-child) .ptnd-step__dot::after {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: -1;
  width: calc(100% + 2 * var(--ptnd-pad)); height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 28%, transparent), var(--line) 55%);
}

/* --- Thông tin: nền trắng, không viền; chiều sâu bằng bóng mềm ám màu hãng --- */
/* Nền trắng gần như hoà vào nền section; độ nổi đến từ bóng nhoè lệch xuống,
   không dùng spread âm (spread âm bó bóng sát mép → lộ hình chữ nhật) */
.ptnd-step__card {
  margin-top: 26px; padding: 26px 24px 6px;
  background: #fff; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04),
              0 14px 34px rgba(16, 20, 28, .06);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.ptnd-step:hover .ptnd-step__card {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(16, 20, 28, .05),
              0 26px 56px rgba(16, 20, 28, .10);
}
.ptnd-step__card > b { display: block; font-size: 19px; font-weight: 800; margin-bottom: 7px; }
.ptnd-step__card > p { font-size: 13.5px; color: var(--gray); line-height: 1.55; }

/* Cột mốc khởi đầu */
.ptnd-step__first {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--bc) 5%, transparent);
  font-size: 12.5px; color: var(--gray); line-height: 1.4;
}
.ptnd-step__first svg { color: var(--bc, var(--red)); flex: none; }
.ptnd-step__first b { font-weight: 700; color: var(--ink); }

/* Hai chỉ số — phân cách bằng khoảng trắng, không kẻ ô */
.ptnd-step__facts { display: flex; justify-content: center; gap: 40px; margin: 20px 0 4px; }
.ptnd-step__facts > span { display: block; }
.ptnd-step__facts b {
  display: block; font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--bc, var(--red)); letter-spacing: -.02em;
}
.ptnd-step__facts i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-light);
}
.ptnd-step__card a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 18px; padding: 14px 0; font-size: 13px; font-weight: 700;
  color: var(--gray); transition: color .25s ease, gap .25s ease;
}
.ptnd-step__card a:hover { color: var(--bc, var(--red)); gap: 11px; }
.ptnd-step:hover .ptnd-step__card a { color: var(--ink); }

/* Màn hẹp bớt số thẻ mỗi màn thay vì xếp chồng — cùng nhịp với .brd3 */
@media (max-width: 1024px) { .ptnd { --per: 2; } }
@media (max-width: 860px) {
  .ptnd-step__photo { height: 190px; }
  .ptnd-step__facts { gap: 48px; }
}
@media (max-width: 700px) { .ptnd { --per: 1; } }

/* ==========================================================================
   Tuyển dụng — trang Cơ hội nghề nghiệp & Back To Home
   ========================================================================== */

/* ---------- Lưới lợi ích (Cơ hội nghề nghiệp) ---------- */
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.perk {
  position: relative; padding: 30px 26px 28px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 14px 34px rgba(16, 20, 28, .06);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.perk:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16, 20, 28, .05), 0 26px 56px rgba(16, 20, 28, .1); }
.perk__num {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: var(--red); margin-bottom: 14px;
}
.perk h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; line-height: 1.35; }
.perk p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
@media (max-width: 980px) { .perk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perk-grid { grid-template-columns: 1fr; } }

/* ---------- Danh sách vị trí tuyển dụng ---------- */
.joblist { display: flex; flex-direction: column; gap: 22px; }
.job {
  background: #fff; border-radius: 20px; padding: 30px 32px 28px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 16px 40px rgba(16, 20, 28, .07);
  border-top: 3px solid var(--red);
}
.job__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line);
}
.job__head h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.job__unit { font-size: 13.5px; color: var(--gray); }
.job__type {
  flex: none; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent);
  padding: 7px 15px; border-radius: 999px;
}
.job__body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.job__col h4 {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-light); margin-bottom: 12px;
}
.job__col li {
  position: relative; padding-left: 18px; font-size: 14px; color: var(--ink);
  line-height: 1.6; margin-bottom: 8px;
}
.job__col li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.job__shift {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 22px 0 20px; padding: 12px 16px; border-radius: 12px;
  background: var(--bg-soft); font-size: 13px; color: var(--gray);
}
.job__shift svg { color: var(--red); flex: none; }
@media (max-width: 760px) {
  .job { padding: 24px 22px; }
  .job__body { grid-template-columns: 1fr; gap: 22px; }
  .job__head { flex-direction: column; gap: 12px; }
}

/* ---------- Khối phúc lợi chung ---------- */
.jobperk {
  margin-top: 26px; padding: 30px 32px;
  background: linear-gradient(135deg, var(--dark), var(--dark-2));
  border-radius: 20px; color: #fff;
}
.jobperk h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.jobperk ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.jobperk li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.jobperk svg { color: var(--gold); flex: none; margin-top: 3px; }
@media (max-width: 760px) { .jobperk { padding: 24px 22px; } .jobperk ul { grid-template-columns: 1fr; } }

/* ---------- Địa điểm làm việc ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.loc {
  padding: 20px 22px; background: #fff; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 12px 28px rgba(16, 20, 28, .05);
}
.loc b { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 8px; }
.loc span {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--gray); line-height: 1.55;
}
.loc svg { color: var(--red); flex: none; margin-top: 3px; }
@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } }

/* ---------- Khối nộp hồ sơ ---------- */
.apply { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: stretch; }
.apply__info, .apply__side {
  background: #fff; border-radius: 20px; padding: 34px 34px 32px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 16px 40px rgba(16, 20, 28, .07);
}
.apply__info h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 6px 0 10px; }
.apply__info > p { font-size: 14.5px; color: var(--gray); line-height: 1.65; margin-bottom: 22px; }
.apply__contact li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink);
}
.apply__contact li:last-child { border-bottom: 0; }
.apply__contact svg { color: var(--red); flex: none; }
.apply__contact a { font-weight: 700; }
.apply__contact a:hover { color: var(--red); }
.apply__contact em { font-style: normal; font-size: 12.5px; color: var(--gray-light); }
.apply__side {
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(150deg, color-mix(in srgb, var(--red) 7%, #fff), #fff);
}
.apply__side h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.apply__side p { font-size: 14px; color: var(--gray); line-height: 1.65; margin-bottom: 20px; }
.apply__side .btn { margin-top: auto; }
@media (max-width: 860px) { .apply { grid-template-columns: 1fr; } }

/* ---------- Back To Home ---------- */
.bth-intro { max-width: 860px; margin-inline: auto; text-align: center; }
.bth-lead { font-size: clamp(17px, 2vw, 20px); font-weight: 600; color: var(--ink); line-height: 1.65; margin-bottom: 16px; }
.bth-intro p { font-size: 15px; color: var(--gray); line-height: 1.75; }

.bth-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bth-role {
  text-align: center; padding: 34px 26px 30px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 16px 40px rgba(16, 20, 28, .07);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.bth-role:hover { transform: translateY(-5px); }
.bth-role__icon {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 18px 5px 18px 5px; color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, transparent);
}
.bth-role h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.bth-role p { font-size: 13.5px; color: var(--gray); line-height: 1.6; }
@media (max-width: 860px) { .bth-roles { grid-template-columns: 1fr; } }

.bth-why { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.bth-why__text > p { font-size: 15px; color: var(--gray); line-height: 1.75; margin-bottom: 16px; }
.bth-why__quote {
  padding-left: 20px; border-left: 3px solid var(--red);
  font-size: 15.5px; font-style: italic; color: var(--ink); line-height: 1.7;
}
.bth-why__list { display: flex; flex-direction: column; gap: 14px; }
.bth-why__list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; background: #fff; border-radius: 14px;
  font-size: 14px; line-height: 1.6; color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 10px 26px rgba(16, 20, 28, .05);
}
.bth-why__list svg { color: var(--red); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .bth-why { grid-template-columns: 1fr; gap: 32px; } }

.bth-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bth-contact {
  position: relative; padding: 26px 24px 22px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 14px 34px rgba(16, 20, 28, .06);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.bth-contact:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16, 20, 28, .05), 0 26px 56px rgba(16, 20, 28, .1); }
.bth-contact__idx {
  position: absolute; top: 22px; right: 22px;
  font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.bth-contact h3 { font-size: 16px; font-weight: 800; line-height: 1.35; margin-bottom: 6px; padding-right: 30px; }
.bth-contact__person { display: block; font-size: 13.5px; font-weight: 700; color: var(--red); margin-bottom: 12px; }
.bth-contact__addr {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--gray); line-height: 1.55; margin-bottom: 14px;
}
.bth-contact__addr svg { color: var(--gray-light); flex: none; margin-top: 3px; }
.bth-contact__links { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.bth-contact__links a {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  word-break: break-all; transition: color .2s;
}
.bth-contact__links a:hover { color: var(--red); }
.bth-contact__links svg { color: var(--red); flex: none; }
@media (max-width: 900px) { .bth-contacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bth-contacts { grid-template-columns: 1fr; } }

/* ==========================================================================
   Trang Tin tức & sự kiện
   ========================================================================== */

/* ---------- Bộ lọc chuyên mục ---------- */
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.news-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: .22s;
}
.news-chip em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--gray-light); }
.news-chip:hover { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.news-chip.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--red) 28%, transparent); }
.news-chip.active em { color: rgba(255, 255, 255, .82); }

/* ---------- Bài nổi bật ---------- */
.news-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: #fff; border-radius: 22px; overflow: hidden; margin-bottom: 26px;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 18px 44px rgba(16, 20, 28, .07);
}
.news-lead__media { position: relative; min-height: 320px; overflow: hidden; }
/* Chỉ nhắm ảnh nền bằng class riêng — KHÔNG dùng "> span" vì badge cũng là span */
.news-lead__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.news-lead:hover .news-lead__img { transform: scale(1.04); }
.news-lead__badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 6px 14px; border-radius: 999px;
}
.news-lead__body { padding: 38px 40px; display: flex; flex-direction: column; align-items: flex-start; }
.news-lead__body h2 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; margin: 12px 0 12px; }
.news-lead__body p { font-size: 14.5px; color: var(--gray); line-height: 1.7; margin-bottom: 22px; }
.news-lead__body .btn { margin-top: auto; }
@media (max-width: 860px) {
  .news-lead { grid-template-columns: 1fr; }
  .news-lead__media { min-height: 220px; }
  .news-lead__body { padding: 26px 24px; }
}

/* ---------- Meta dùng chung ---------- */
.news-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.news-cat {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent);
  padding: 5px 12px; border-radius: 999px;
}
.news-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-light); font-weight: 600; }
.news-date svg { flex: none; }

/* Lưới bài viết dùng lại .news + .post của trang chủ — không định nghĩa thêm kiểu thẻ riêng.
   Chỉ cắt gọn phần tóm tắt cho các thẻ đều nhau. */
.news-page .post__body p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-empty { text-align: center; padding: 40px 0; color: var(--gray); font-size: 15px; }
/* ==========================================================================
   Trang Giới thiệu — bố cục chốt "chữ lớn":
   từ khoá & số làm điểm nhấn ở triết lý, tuyên ngôn lớn ở tầm nhìn,
   5 chữ T cỡ lớn ở giá trị cốt lõi (điểm nhấn chính của trang)
   ========================================================================== */
.abd-phi { border-top: 1px solid var(--line); }
.abd-row {
  display: grid; grid-template-columns: 74px 260px 1fr; align-items: center; gap: 26px;
  padding: 26px 12px; border-bottom: 1px solid var(--line);
  transition: background .3s ease, padding-left .35s cubic-bezier(.22, 1, .36, 1);
}
.abd-row:hover { background: #fff; padding-left: 26px; }
.abd-row__num {
  font-size: 34px; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--red) 45%, transparent);
  transition: -webkit-text-stroke-color .3s ease, color .3s ease;
}
.abd-row:hover .abd-row__num { color: var(--red); -webkit-text-stroke-color: transparent; }
.abd-row__key i { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 4px; }
.abd-row__key b { display: block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.15; color: var(--ink); transition: color .3s ease; }
.abd-row:hover .abd-row__key b { color: var(--red); }
.abd-row > p { font-size: 14px; color: var(--gray); line-height: 1.75; }
@media (max-width: 900px) {
  .abd-row { grid-template-columns: 56px 1fr; gap: 14px 18px; }
  .abd-row > p { grid-column: 1 / -1; }
}

.abd-vision {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--dark), var(--dark-2));
}
.abd-vision .container { position: relative; z-index: 1; }
.abd-vision__in { max-width: 940px; margin-inline: auto; text-align: center; }
.abd-vision__statement {
  font-size: clamp(24px, 3.6vw, 42px); font-weight: 800; line-height: 1.4;
  color: #fff; margin: 14px 0 20px; letter-spacing: -.01em;
}
.abd-vision__statement b { color: var(--red); font-weight: 800; }
.abd-vision__note { font-size: 14.5px; color: var(--gray-light); line-height: 1.85; max-width: 760px; margin-inline: auto; }

.abd-mission { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.abd-mission__item { padding: 30px 28px 28px; background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(16,20,28,.04), 0 14px 34px rgba(16,20,28,.06); }
.abd-mission__item > span {
  display: block; font-size: 44px; font-weight: 800; line-height: 1; margin-bottom: 14px;
  color: transparent; -webkit-text-stroke: 1.6px color-mix(in srgb, var(--red) 50%, transparent);
}
.abd-mission__item h3 { font-size: 18px; font-weight: 800; margin-bottom: 9px; }
.abd-mission__item p { font-size: 13.5px; color: var(--gray); line-height: 1.7; }
@media (max-width: 860px) { .abd-mission { grid-template-columns: 1fr; } }

.abd-values-sec { position: relative; overflow: hidden; }
.abd-wm {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(220px, 34vw, 460px); font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--red) 7%, transparent);
  pointer-events: none; user-select: none; z-index: 0;
}
.abd-values-sec .container { position: relative; z-index: 1; }
.abd-values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.abd-value { text-align: center; }
.abd-value__t {
  display: block; position: relative; font-size: clamp(64px, 8vw, 96px); font-weight: 800;
  line-height: 1; color: var(--red); letter-spacing: -.04em; margin-bottom: 12px;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), text-shadow .4s ease;
}
.abd-value__t i {
  font-style: normal; font-size: .34em; vertical-align: super; margin-left: 2px;
  color: color-mix(in srgb, var(--red) 55%, transparent);
}
.abd-value:hover .abd-value__t { transform: translateY(-6px); text-shadow: 0 16px 30px color-mix(in srgb, var(--red) 35%, transparent); }
.abd-value h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.abd-value p { font-size: 13px; color: var(--gray); line-height: 1.6; }
@media (max-width: 900px) { .abd-values { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; } }
@media (max-width: 560px) { .abd-values { grid-template-columns: 1fr 1fr; } }

/* ---- Nền khối Tầm nhìn: đường chân trời phối cảnh (nhìn về phía trước) ---- */
.vis3-road { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vis3-road__sun {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(420px, 60vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--red) 32%, transparent), transparent 62%);
}
/* lưới phối cảnh: các đường hội tụ về điểm tụ ở giữa */
.vis3-road__grid {
  position: absolute; left: 50%; top: 52%; width: 200%; height: 62%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, color-mix(in srgb, var(--red) 26%, transparent) 78px 80px),
    repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--red) 16%, transparent) 46px 47px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 55%, transparent);
  transform: translateX(-50%) perspective(300px) rotateX(62deg);
  transform-origin: 50% 0;
}

/* ---- Đối tác 3: rê chuột hiện ảnh showroom phía sau logo ---- */
/* ---- Đối tác phân phối ----
   Nghỉ  : logo chiếm trọn thẻ, không đế, thẻ trắng phẳng.
   Hover : logo THU NHỎ về đế trắng ở giữa, ảnh showroom hiện phía sau, chip số điểm bán trượt lên.
   Dùng transform:scale trên cả cụm logo (không đổi width/height) để co giãn mượt. */
/* Ba thẻ mỗi màn; thêm thương hiệu thứ tư trở đi thì trượt ngang.
   Khoảng cách giữa các thẻ tạo bằng padding của tấm để scroll-snap ăn đúng mép. */
.brd3 {
  --per: 3;
  --brd-gap: 10px;
  --brd-air: 22px;
  /* Bù phần đệm hai bên của tấm để mép thẻ đầu thẳng hàng với tiêu đề bên trên */
  margin: 0 calc(var(--brd-gap) * -1);
}

/*
 * overflow-x: auto cắt luôn theo chiều dọc, nên bóng đổ và cú nhấc 6px khi rê
 * chuột sẽ bị xén mất nếu khung cuộn ôm sát thẻ. Chừa lề trong khung rồi kéo
 * lại bằng margin âm: thẻ vẫn thẳng hàng với các khối khác, mà hiệu ứng có chỗ thở.
 */
.brd3 .ptsl__track {
  gap: 0;
  padding: var(--brd-air) var(--brd-air) 60px;
  margin: calc(var(--brd-air) * -1) calc(var(--brd-air) * -1) -42px;
  /* Nếu không khai báo, tấm sẽ dừng ở mép padding và lệch so với lưới trang */
  scroll-padding-inline: var(--brd-air);
}
.brd3 .ptsl__slide {
  flex: 0 0 calc(100% / var(--per));
  padding: 0 var(--brd-gap);
}

.brd3 .ptsl__dots, .ptnd .ptsl__dots { position: static; transform: none; margin-top: 4px; justify-content: center; }
.brd3 .ptsl__dot i, .ptnd .ptsl__dot i { background: rgba(16, 20, 28, .18); }
.brd3 .ptsl__dot:hover i, .ptnd .ptsl__dot:hover i { background: rgba(16, 20, 28, .36); }
.brd3 .ptsl__dot.on i, .ptnd .ptsl__dot.on i { background: var(--red); }

/* Nút chuyển ra hẳn ngoài mép thẻ để không che logo */
.brd3 .ptsl__nav, .ptnd .ptsl__nav {
  opacity: 1;
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(16, 20, 28, .16);
}
.brd3 .ptsl__nav--prev, .ptnd .ptsl__nav--prev { left: -56px; }
.brd3 .ptsl__nav--next, .ptnd .ptsl__nav--next { right: -56px; }
.brd3 .ptsl__nav:hover, .ptnd .ptsl__nav:hover { background: var(--red); color: #fff; border-color: transparent; }

/*
 * Màn hẹp không còn chỗ trống hai bên để đặt nút mà không đè lên thẻ. Bỏ nút,
 * giữ chấm điều hướng và thao tác vuốt — vốn là cách quen thuộc ở cỡ màn này.
 */
@media (max-width: 1260px) {
  .brd3 .ptsl__nav, .ptnd .ptsl__nav { display: none; }
}
.brd3__item {
  position: relative; overflow: hidden; border-radius: 22px; min-height: 240px;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 14px 34px rgba(16, 20, 28, .06);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.brd3__item:hover { transform: translateY(-6px); box-shadow: 0 28px 62px color-mix(in srgb, var(--bc) 28%, transparent); }
.brd3__photo {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  /* Ảnh nền hiện cùng nhịp với cú thu nhỏ của logo; riêng cú zoom giữ chậm hơn
     để hậu cảnh còn trôi nhẹ sau khi mọi thứ đã vào chỗ. */
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.brd3__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 19, .62), rgba(12, 14, 19, .82));
}
.brd3__item:hover .brd3__photo { opacity: 1; transform: none; }

/* Trạng thái nghỉ: logo cỡ lớn, nền trong suốt (hoà vào thẻ trắng) */
.brd3__logo {
  grid-area: 1 / 1; position: relative; z-index: 2;
  display: grid; place-items: center;
  background: transparent; border-radius: 16px; padding: 16px 22px;
  box-shadow: 0 0 0 0 rgba(7, 11, 17, 0);
  /*
   * Ba thuộc tính phải chạy cùng nhịp. Trước đây nền và bóng dùng .4s ease trong
   * khi cú thu nhỏ dùng cubic-bezier(.22,1,.36,1) — đường cong này đi gần hết
   * quãng ngay trong 1/4 thời gian đầu, nên logo đã thu nhỏ xong mà đế trắng mới
   * hiện được một nửa: mắt thấy một khoảng nền trắng lấp ló lệch pha với logo.
   * Dùng chung một đường cong và một thời lượng thì đế hiện đúng lúc logo thu.
   */
  transition: background .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s cubic-bezier(.22, 1, .36, 1),
              transform .5s cubic-bezier(.22, 1, .36, 1);
}
.brd3__logo img { width: 250px; height: 108px; object-fit: contain; display: block; }
/* Hover: thu nhỏ còn ~58% và hiện đế trắng */
.brd3__item:hover .brd3__logo {
  transform: scale(.58) translateY(-26px);
  background: #fff;
  box-shadow: 0 18px 40px rgba(7, 11, 17, .34);
}
/*
 * Logo nét sáng nằm sẵn trên nền đen (Honda DreamWing): cả thẻ chuyển sang nền
 * đậm chứ không chỉ một tấm nhỏ sau logo — nếu không, logo bị đóng khung trong
 * một hộp đen nhỏ hơn hẳn logo các thương hiệu khác, nhìn lệch hàng.
 *
 * Tấm nền sau logo vẫn giữ đúng màu thẻ (không để trong suốt): mix-blend-mode
 * trộn với nền của phần tử cha gần nhất, mà .brd3__logo có z-index nên tự tạo
 * tầng riêng — bỏ nền đi là ảnh hết chỗ để trộn và nền đen hiện nguyên hình.
 * Cùng màu với thẻ nên mắt không thấy ranh giới.
 */
.brd3__item--dark { background: #141519; }
/*
 * isolation: isolate chốt phạm vi trộn màu lại trong đúng tấm nền này. Không có
 * nó, lúc thẻ đang chuyển động trình duyệt có thể gộp tầng và cho ảnh trộn nhầm
 * với ảnh nền showroom phía sau — screen gặp nền sáng thì loang trắng, logo biến
 * mất trong chớp mắt.
 */
.brd3__logo--dark { background: #141519; box-shadow: none; isolation: isolate; }
.brd3__logo--dark img { mix-blend-mode: screen; }
/* Rê chuột: ảnh nền hiện ra, tấm logo thu nhỏ — giữ nền đậm thay cho đế trắng */
.brd3__item:hover .brd3__logo--dark {
  background: #141519;
  box-shadow: 0 18px 40px rgba(7, 11, 17, .42);
}
.brd3__go {
  grid-area: 1 / 1; align-self: end; justify-self: center; margin-bottom: 26px;
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--bc, var(--red)); padding: 7px 15px; border-radius: 999px;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .4s ease .08s, transform .45s cubic-bezier(.22, 1, .36, 1) .08s;
}
.brd3__item:hover .brd3__go { opacity: 1; transform: none; }
@media (max-width: 1024px) { .brd3 { --per: 2; } }
@media (max-width: 700px) {
  .brd3 { --per: 1; }
  .brd3__item { min-height: 190px; }
  .brd3__logo img { width: 210px; height: 88px; }
  /* Cảm ứng không có hover — giữ trạng thái nghỉ: logo lớn, không ảnh nền */
}


/* ==========================================================================
   TRANG TIN TỨC — sidebar hệ thống + lọc danh mục (theo cách vận hành thật)
   ========================================================================== */
.news-layout { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; }

/* --- Sidebar: Danh sách hệ thống --- */
.news-side__toggle { display: none; }
.news-side__list {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; position: sticky; top: 96px;
}
.news-side__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); transition: .18s;
}
.news-side__item:last-child { border-bottom: 0; }
.news-side__item:first-child { background: var(--red); color: #fff; font-weight: 700; }
.news-side__item:first-child.is-active { background: var(--red); }
.news-side__item:not(:first-child):hover { background: var(--bg-soft); color: var(--red); padding-left: 22px; }
.news-side__item em {
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gray-light);
  background: var(--bg-soft); padding: 2px 8px; border-radius: 999px; flex: none;
}
.news-side__item.is-active:not(:first-child) {
  background: rgba(200,16,46,.06); color: var(--red);
  box-shadow: inset 3px 0 0 var(--red);
}
.news-side__item.is-active em { background: var(--red); color: #fff; }
.news-side__item:first-child em { background: rgba(255,255,255,.22); color: #fff; }

/* --- Lọc danh mục --- */
.news-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.news-cat {
  padding: 9px 17px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); transition: .2s;
}
.news-cat:hover { border-color: var(--red); color: var(--red); }
.news-cat.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

.news-result { font-size: 14px; color: var(--gray); margin-bottom: 22px; }
.news-result b { color: var(--ink); }
.news-result__clear {
  display: inline-block; margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--red);
  border-bottom: 1px solid currentColor;
}

/* --- Lưới bài --- */
.news--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-page .post__meta-cat {
  font-size: 12px; font-weight: 700; color: var(--red);
  background: rgba(200,16,46,.08); padding: 3px 9px; border-radius: 5px;
}
.news-page .post__media .ph { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }

/* --- Phân trang --- */
.news-paging { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.news-pg {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 15px;
  border-radius: 10px; border: 1.5px solid var(--line); background: #fff;
  font-size: 14.5px; font-weight: 600; color: var(--ink); transition: .2s;
}
a.news-pg:hover { border-color: var(--red); color: var(--red); }
.news-pg.is-current { background: var(--red); border-color: var(--red); color: #fff; }
/* Dấu ngắt quãng: chỉ là ký hiệu, không phải nút — bỏ viền và nền để không ai bấm nhầm.
   Bám theo .news-paging để thắng cả rule nới rộng nút ở khổ màn hình nhỏ bên dưới. */
.news-paging .news-pg--gap {
  min-width: 20px; padding: 0 2px; border-color: transparent;
  background: none; color: var(--gray); font-weight: 700; letter-spacing: 1px;
}

/* --- Trạng thái rỗng --- */
.news-empty {
  text-align: center; padding: 64px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; color: var(--gray);
}
.news-empty svg { color: var(--gray-light); margin-bottom: 14px; }
.news-empty h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.news-empty p { margin-bottom: 18px; }

@media (max-width: 1100px) {
  .news--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .news-layout { grid-template-columns: 1fr; gap: 20px; }
  .news-side__list { position: static; display: none; }
  .news-side__list.open { display: block; }
  .news-side__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 14px 18px; border-radius: 12px;
    background: var(--red); color: #fff; font-size: 15px; font-weight: 700;
  }
  .news-side__toggle svg { transition: transform .25s; }
  .news-side__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .news-side__toggle + .news-side__list { margin-top: 10px; }
}
@media (max-width: 640px) {
  .news--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DEMO TIN TỨC — 3 phương án UI (xoá sau khi chốt)
   ========================================================================== */

/* ---------- Bố cục Newsroom cho trang tin tức ---------- */
.nr-wrap { background: #fff; padding: 36px 0 56px; }
.nr-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.nr-side { position: sticky; top: 96px; display: grid; gap: 26px; }
.nr-side__title { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-light); margin-bottom: 10px; }
.nr-side__nav { display: grid; }
.nr-side__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 0; font-size: 14px; font-weight: 500; color: var(--gray);
  border-bottom: 1px solid var(--line); transition: .18s;
}
.nr-side__link:last-child { border-bottom: 0; }
.nr-side__link:hover { color: var(--ink); }
.nr-side__link em { font-style: normal; font-size: 11.5px; color: var(--gray-light); }
.nr-side__link.is-active { color: var(--red); font-weight: 700; }
.nr-side__link.is-active em { color: var(--red); }

.nr-head { padding-bottom: 20px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.nr-head h1 { font-family: var(--font-display, var(--font)); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.nr-head p { margin-top: 6px; font-size: 14px; color: var(--gray); }
.nr-head p b { color: var(--ink); }
.nr-head a { color: var(--red); font-weight: 700; border-bottom: 1px solid currentColor; }

/* Danh sách bài: lưới 3 thẻ mỗi hàng, dùng lại thẻ .post của trang chủ nên chỉ
   cần lo phần khoảng cách và số cột, còn dáng thẻ thừa hưởng sẵn. */
.nr-grid { margin-top: 26px; }
/* Cột lọc bên trái ăn mất 268px, khung bài còn lại khá hẹp — trong quãng này hạ
   xuống 2 thẻ mỗi hàng cho thẻ đủ rộng đọc được. Dưới 1000px cột lọc đã nhảy lên
   trên nên khung bài chiếm trọn bề ngang, trả lưới về bậc chung của .news. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .nr-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .nr-layout { grid-template-columns: 1fr; gap: 26px; }
  .nr-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nr-side { grid-template-columns: 1fr; }
}

/* ---------- Trang tin tức chính thức (bố cục Newsroom) ---------- */
.nr-side__toggle { display: none; }
.nr-wrap { padding-top: 36px; }

@media (max-width: 1000px) {
  .nr-side { position: static; display: block; }
  .nr-side__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 14px 18px; border-radius: 14px 5px 14px 5px;
    background: var(--red); color: #fff; font-size: 15px; font-weight: 700;
  }
  .nr-side__toggle svg { transition: transform .25s; }
  .nr-side__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nr-side__inner { display: none; margin-top: 12px; }
  .nr-side__inner.open { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .nr-side__inner.open { grid-template-columns: 1fr; }
}

/* Nút "xem tất cả" đặt dưới lưới, dùng cho khối có tiêu đề canh giữa */
.sec-more { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Nội dung widget ở chân trang ------------------------------------
   Ba cột chân trang cho người quản trị tự soạn bằng widget "Văn bản", nên phải
   lo sẵn dáng cho những thẻ họ có thể chèn: đoạn văn, danh sách, ảnh, liên kết.
   Đáng chú ý: cả site đang reset `ul, ol { list-style: none }`, không khai lại ở
   đây thì danh sách gõ trong widget mất sạch dấu đầu dòng, người dùng tưởng gõ
   hỏng. */
.footer__widget + .footer__widget { margin-top: 30px; }
.footer__widget p { font-size: 14.5px; line-height: 1.75; margin-bottom: 12px; }
.footer__widget p:last-child { margin-bottom: 0; }
/* Chỉ danh sách người dùng tự gõ trong trình soạn thảo mới cần dấu đầu dòng —
   những danh sách đó ra từ TinyMCE nên không mang class nào. Danh sách nạp sẵn
   có class riêng của theme (.footer__links) thì giữ nguyên kiểu cũ, nếu không
   cột 2 và 4 có chấm tròn còn cột 3 thì không, nhìn lệch hẳn. */
.footer__widget ul:not([class]),
.footer__widget ol:not([class]) { padding-left: 18px; margin-bottom: 12px; }
.footer__widget ul:not([class]) { list-style: disc; }
.footer__widget ol:not([class]) { list-style: decimal; }
.footer__widget li { font-size: 14.5px; line-height: 1.7; }
.footer__widget ul:not([class]) li + li,
.footer__widget ol:not([class]) li + li { margin-top: 6px; }
.footer__widget li::marker { color: rgba(255, 255, 255, .32); }
.footer__widget strong,
.footer__widget b { color: #fff; font-weight: 700; }
/* Liên kết trong đoạn văn cần tự phân biệt được — khác với cột danh sách vốn đã
   rõ nhờ mỗi liên kết một dòng. */
.footer__widget a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: 3px;
  transition: .2s;
}
.footer__widget a:hover { text-decoration-color: #fff; }
/* Danh sách nạp sẵn (mang class footer__links) giữ đúng dáng gốc: liên kết không
   gạch chân, màu xám sáng dần khi rê — kế thừa từ .footer__links phía trên. */
.footer__widget .footer__links a { color: inherit; text-decoration: none; }
.footer__widget .footer__links a:hover { color: #fff; }

/* Icon của cột Liên hệ vẽ bằng CSS theo class từng dòng, không nằm trong nội
   dung widget — SVG dán vào widget Văn bản sẽ bị trình soạn thảo trực quan xoá
   ngay lần sửa đầu tiên, còn icon CSS thì sửa chữ thoải mái không đụng gì tới.
   Dòng mới tự thêm không có class thì đơn giản là không có icon. */
.footer__widget li[class*="ft-ic"] { position: relative; padding-left: 29px; }
.footer__widget li[class*="ft-ic"]::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 17px; height: 17px;
  background: var(--red);
  -webkit-mask: var(--ft-ic) center / contain no-repeat;
  mask: var(--ft-ic) center / contain no-repeat;
}
.footer__widget li.ft-ic--diachi { --ft-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.footer__widget li.ft-ic--hotline { --ft-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.footer__widget li.ft-ic--email { --ft-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpolyline points='3 7 12 13 21 7'/%3E%3C/svg%3E"); }
.footer__widget li.ft-ic--gio { --ft-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.footer__widget img {
  max-width: 100%; height: auto;
  display: block; margin: 12px 0;
  border-radius: 10px 3px 10px 3px;
}
/* Ảnh căn trái/phải bằng nút của trình soạn thảo vẫn phải nằm gọn trong cột */
.footer__widget .alignleft { float: left; margin: 4px 16px 10px 0; }
.footer__widget .alignright { float: right; margin: 4px 0 10px 16px; }
.footer__widget .aligncenter { margin-left: auto; margin-right: auto; }
.footer__widget::after { content: ""; display: block; clear: both; }
.footer__widget .wp-caption { max-width: 100%; }
.footer__widget .wp-caption-text { font-size: 12.5px; color: var(--gray-light); margin-top: 4px; }

/* ---------- Chừa chỗ cho thanh quản trị WordPress ---------------------------
   Người đang đăng nhập thấy thanh #wpadminbar ghim cứng ở đỉnh màn hình. Đầu
   trang cũng ghim ở top:0 nên hai cái chồng lên nhau — phải đẩy xuống đúng chiều
   cao thanh đó. WordPress đổi chiều cao theo bề ngang màn hình: 32px ở máy tính,
   46px ở máy bảng, còn dưới 600px thì thanh không ghim nữa mà cuộn theo trang
   nên trả về 0. Để ở biến chung để mấy khối ghim khác (bộ lọc trang Tin tức)
   cùng ăn theo, khỏi phải chỉnh từng chỗ. */
:root { --sticky-top: 0px; }
body.admin-bar { --sticky-top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --sticky-top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar { --sticky-top: 0px; }
}
.header { top: var(--sticky-top); }
.nr-side { top: calc(var(--sticky-top) + 96px); }

/* ---------- Hộp thoại liên hệ (nút "Liên hệ ngay" ở đầu trang) ---------- */
.ct-modal {
  position: fixed; inset: 0; z-index: 400;
  display: none;
  background: rgba(11, 15, 21, .62);
  backdrop-filter: blur(4px);
  /* Biểu mẫu cao hơn màn hình ở máy nhỏ nên chính lớp phủ này phải cuộn được;
     để cuộn ở tấm bên trong thì trên iOS hay bị kẹt đà cuộn. */
  overflow-y: auto;
  padding: 20px 16px;
}
.ct-modal.open { display: flex; }
.ct-modal__panel {
  position: relative;
  width: min(540px, 100%);
  /* margin:auto chứ không phải align-items:center — hai cách đều canh giữa, nhưng
     khi biểu mẫu cao hơn màn hình (điện thoại, cửa sổ thấp) thì canh bằng
     align-items sẽ đẩy phần đầu hộp ra ngoài vùng cuộn, mất luôn tiêu đề và nút
     đóng. Lề tự động thì lúc đó tự về 0 và hộp bắt đầu từ mép trên. */
  margin: auto;
  animation: ct-modal-in .28s ease;
}
/* Bản thân .contact-form đã là một tấm trắng có viền và bóng. Trong hộp thoại thì
   bóp lại cho vừa đủ: biểu mẫu ở trang Liên hệ nằm giữa một trang rộng nên thoáng
   là hợp, còn ở đây nó là toàn bộ nội dung người dùng nhìn thấy — để nguyên nhịp
   đó thì hộp cao gần 700px, đầy khoảng trống và tràn màn hình laptop. */
.ct-modal__panel .contact-form {
  padding: 26px 26px 24px;
  border-radius: 18px 6px 18px 6px;
  box-shadow: 0 30px 80px rgba(7, 11, 17, .3);
}
.ct-modal__panel .contact-form h3 { font-size: 19px; }
.ct-modal__panel .contact-form > p { font-size: 13.5px; margin-bottom: 16px; }
.ct-modal__panel .form-grid { gap: 12px 14px; }
.ct-modal__panel .form-field { gap: 5px; }
.ct-modal__panel .form-field label { font-size: 12.5px; }
.ct-modal__panel .form-field input,
.ct-modal__panel .form-field select,
.ct-modal__panel .form-field textarea {
  min-height: 42px; padding: 10px 13px; font-size: 14px;
}
.ct-modal__panel .form-field textarea { min-height: 84px; }
/* Chỗ báo lỗi chỉ chiếm chỗ khi thật sự có lỗi. Ở trang Liên hệ nó luôn giữ sẵn
   19px cho khỏi giật khi lỗi hiện ra, nhưng nhân với bốn ô là gần 80px trống
   giữa hộp thoại — đổi lại một cú xê dịch nhỏ lúc nhập sai là đáng. */
.ct-modal__panel .field-error:empty { display: none; }
.ct-modal__panel .form-status:empty { display: none; }
.ct-modal__panel .contact-form .btn { margin-top: 14px; min-height: 46px; }
.ct-modal__panel .form-note { margin-bottom: 14px; }
.ct-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px 3px 10px 3px;
  display: grid; place-items: center;
  background: var(--bg-soft); color: var(--gray);
  border: 1px solid var(--line);
  transition: .2s;
}
.ct-modal__close:hover { background: var(--red); border-color: var(--red); color: #fff; }
/* Chừa chỗ cho nút đóng để nó không đè lên tiêu đề biểu mẫu */
.ct-modal__panel .contact-form h3 { padding-right: 42px; }
@keyframes ct-modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .ct-modal { padding: 12px 10px; }
  .ct-modal__panel .contact-form { padding: 22px 18px 20px; }
  /* Một cột thì hai ô không còn kề nhau, nới dọc lại một chút cho dễ đọc */
  .ct-modal__panel .form-grid { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-modal__panel { animation: none; }
}

/* ---------- Banner đầu trang: khớp chiều rộng với các section khác ---------- */
.hbanner--image { background: transparent; border-bottom: 0; padding: 24px 0 0; }
/* Lớp phủ gradient phải bám theo ảnh trong container, không phủ tràn màn hình */
.hbanner--image::after { display: none; }
/* Từng banner là một tấm trong băng chuyền, nên bo góc và bóng đặt ở thẻ <a>
   của mỗi tấm chứ không ở khung ngoài. */
.hbanner--image .ptsl__slide > a {
  display: block;
  position: relative;
  border-radius: 20px 6px 20px 6px;   /* bo góc "lá" đồng bộ thẻ .post */
  overflow: hidden;
}
/* Bóng ở khung ngoài, không ở từng tấm — xem chú thích tại .vcov__slider */
.hbanner--image .ptsl {
  border-radius: 20px 6px 20px 6px;
  box-shadow: 0 18px 44px rgba(7,11,17,.14);
}
.hbanner--image .ptsl__slide > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,11,17,.12), transparent 16% 84%, rgba(7,11,17,.12));
}
.hbanner--image img { border-radius: inherit; }

/* ==========================================================================
   RESPONSIVE — rà soát theo checklist UI/UX Pro Max
   (1) Không cuộn ngang  (2) Vùng chạm ≥44px  (3) Bản đồ đọc được trên mobile
   ========================================================================== */

/* --- (1) Chặn cuộn ngang ---------------------------------------------------
   Quầng sáng .ptnd-step::before tràn ±6% mỗi bên; khi lưới còn 1 cột (mobile,
   tablet) phần tràn đó vượt khỏi viewport và tạo thanh cuộn ngang.
   Dùng overflow-x: clip cho section (khác `hidden`: không tạo scroll container
   nên position: sticky bên trong vẫn hoạt động). */
.ptn-d { overflow-x: clip; }

/* Lưới an toàn chung — chặn mọi tràn ngang phát sinh về sau */
html { overflow-x: clip; }

@media (max-width: 640px) {
  /* Quầng sáng thu về trong lòng cột để không đội chiều rộng trang */
  .ptnd-step::before { left: 0; right: 0; }
}

/* --- (2) Vùng chạm trên thiết bị cảm ứng ------------------------------------
   Chuẩn: tối thiểu 44×44px cho mọi phần tử bấm được. Dùng padding thay vì
   min-height để không phá vỡ nhịp chữ, và chỉ áp ở thiết bị không có hover. */
@media (hover: none), (max-width: 900px) {
  /* Link ở footer */
  .footer__links a,
  .footer__contact a,
  .footer__bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer__links li + li { margin-top: 2px; }

  /* Liên kết "Đọc tiếp / Xem chi tiết" trong thẻ */
  .post__more,
  .net-card__link {
    min-height: 44px;
    align-items: center;
  }

  /* Breadcrumb và chip lọc */
  .breadcrumb a,
  .breadcrumb span,
  .news-cat,
  .map-chip,
  .filter-bar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Bộ lọc trong sidebar tin tức */
  .nr-side__link { padding-top: 12px; padding-bottom: 12px; }

  /* Nút phân trang */
  .news-pg { min-width: 44px; height: 44px; }

  /* Nút zoom của bản đồ Leaflet (mặc định 30px) */
  .leaflet-touch .leaflet-bar a,
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
  }

  /* Icon mạng xã hội ở footer */
  .footer__social a { width: 44px; height: 44px; }
}

/* --- (3) Bản đồ đại lý trên màn hình nhỏ ------------------------------------
   Ở desktop mỗi điểm kèm một thẻ nhỏ hiện thường trực. Trên mobile 25 thẻ đó
   chồng lên nhau, che hết bản đồ và không đọc được thẻ nào. Vì vậy dưới 900px
   chỉ giữ pin; người dùng chạm vào pin sẽ mở panel chi tiết (đã có sẵn). */
@media (max-width: 900px) {
  #dealer-map { height: 60vh; min-height: 380px; }
  /* Panel chi tiết trượt lên từ đáy, chừa chỗ cho ngón tay */
  .map-side {
    top: auto; bottom: 12px; left: 12px; right: 12px; width: auto;
    max-height: 62%; overflow-y: auto;
  }
  .map-side__photo { aspect-ratio: 16 / 6; }
  .dealer-map-hint { bottom: auto; top: 12px; font-size: 11.5px; }
}

/* Công tắc cấu hình bản đồ — đủ 44px trên thiết bị chạm */
@media (hover: none), (max-width: 900px) {
  .map-toggle { min-height: 44px; }
}

/* Chỉ dẫn thao tác khác nhau giữa chuột và cảm ứng */
.only-touch { display: none; }
@media (hover: none) {
  .only-mouse { display: none; }
  .only-touch { display: inline; }
}

/* Link gọi / gửi mail luôn đủ vùng chạm (trừ khi nằm trong đoạn văn) */
@media (hover: none), (max-width: 900px) {
  a[href^="tel:"]:not(p a),
  a[href^="mailto:"]:not(p a) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   TRANG CHI TIẾT BÀI VIẾT (single.php)
   Nội dung do người viết soạn trong wp-admin nên phải chịu được mọi thứ trình
   soạn thảo sinh ra: ảnh, danh sách, trích dẫn, bảng, video nhúng.
   ========================================================================== */

.page-hero--post .page-hero__in { max-width: 860px; }
.page-hero--post h1 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.25; }

.post-meta-top {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 10px; font-size: 14px; color: var(--gray);
}
.post-meta-top__cat {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 999px; background: var(--red); color: #fff;
  font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
}
.post-meta-top__cat:hover { filter: brightness(1.08); }

.single__in { max-width: 860px; }

.single__cover {
  margin: 0 0 32px;
  border-radius: 20px 6px 20px 6px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(7, 11, 17, .14);
}
.single__cover img { display: block; width: 100%; height: auto; }

.single__body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.single__body > * + * { margin-top: 20px; }
.single__body h2 { font-size: 26px; line-height: 1.3; margin-top: 40px; }
.single__body h3 { font-size: 21px; line-height: 1.35; margin-top: 32px; }
.single__body p { margin: 0; }
.single__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.single__body img {
  max-width: 100%; height: auto; display: block; margin: 28px auto;
  border-radius: 14px 4px 14px 4px;
}
.single__body figure { margin: 28px 0; }
.single__body figcaption { margin-top: 8px; font-size: 14px; color: var(--gray); text-align: center; }
/*
 * Ảnh có chú thích. Thêm chú thích là WordPress bọc ảnh trong
 * <figure class="wp-caption" style="width: 900px"> — chiều rộng cứng lấy theo
 * cỡ ảnh lúc chèn (chọn "Kích thước đầy đủ" thì lên tới 1920px, 2048px). Cột
 * chữ chỉ rộng 860px, điện thoại còn ~340px, nên khung tràn ra ngoài và kéo
 * ảnh bên trong phóng theo, trong khi ảnh không chú thích vẫn co vừa cột.
 *
 * Không xoá chiều rộng đó đi: ảnh nhỏ (300px) có chú thích thì nhờ nó mà dòng
 * chú thích nằm gọn dưới ảnh thay vì dàn ra hết cột. Chỉ chặn trần bằng cột
 * chữ, và căn giữa cho giống hệt cách ảnh thường đang hiện.
 */
.single__body .wp-caption { max-width: 100%; margin: 28px auto; }
.single__body .wp-caption img { margin: 0 auto; }
.single__body ul,
.single__body ol { padding-left: 22px; }
.single__body li + li { margin-top: 8px; }
.single__body blockquote {
  margin: 28px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--red);
  font-size: 18px; font-style: italic; color: var(--gray);
}
.single__body iframe,
.single__body video { max-width: 100%; border-radius: 14px; }
.single__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.single__body th,
.single__body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }

/* Bảng rộng phải cuộn được trong khung của nó, không đẩy cả trang chạy ngang */
.single__body > table { display: block; overflow-x: auto; }

/* Lời nhắn thay chỗ nội dung của Trang cũ không dựng lại được */
.single__legacy {
  margin: 0; padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--gray); font-size: 15.5px; line-height: 1.75;
}

/* Phân trang trong một bài dài (thẻ <!--nextpage-->) — chỉ hiện khi bài có cắt trang */
.single__pages {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px;
}
.single__pages > span:first-child { margin-right: 4px; font-weight: 600; color: var(--gray); }
.single__pages span, .single__pages a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
}
/* Trang đang xem không phải thẻ <a> nên nhận nền đậm để phân biệt */
.single__pages > span:not(:first-child) { background: var(--red); color: #fff; font-weight: 700; }
.single__pages a > span { border: 1px solid var(--line); color: var(--ink); }
.single__pages a:hover > span { border-color: var(--red); color: var(--red); }

.single__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
}
.single__unit {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px; color: var(--gray);
}
.single__unit:hover { color: var(--red); }

/* Ảnh thẻ bài viết phủ kín khung khi bấm được */
.post__link { display: block; height: 100%; }

/* ==========================================================================
   THÔNG BÁO CỦA BIỂU MẪU LIÊN HỆ
   ========================================================================== */

.form-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 20px; padding: 12px 14px;
  border-radius: 12px 4px 12px 4px;
  font-size: 14.5px; line-height: 1.5;
}
.form-note svg { flex: none; margin-top: 1px; }
.form-note--ok { background: rgba(14, 159, 110, .1); color: #0B7A54; }
.form-note--err { background: rgba(200, 16, 46, .08); color: var(--red); }


/* ==========================================================================
   KHỐI "CHÚNG TÔI LÀ AI" — chữ nằm trong khung ảnh, ảnh chuyển được
   Lớp phủ đậm dần về bên trái để chữ luôn đọc được, bất kể khách thay ảnh nào.
   ========================================================================== */

.abx { position: relative; }

.abx__media {
  border-radius: 20px 6px 20px 6px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(7, 11, 17, .16);
}

.abx__slide { position: relative; height: 580px; }
.abx__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abx__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(12, 14, 18, .92) 0%,
    rgba(12, 14, 18, .78) 34%,
    rgba(12, 14, 18, .30) 62%,
    rgba(12, 14, 18, .12) 100%);
}

/* Chưa chọn ảnh nào — nền tối để chữ vẫn đọc được */
.abx__media--empty {
  display: grid;
  place-items: center;
  height: 580px;
  background: var(--ink);
  color: rgba(255, 255, 255, .5);
}

.abx__body {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: min(56%, 620px);
  padding: 48px 40px 48px 52px;
  color: #fff;
  /* Không chắn chuột: nút chuyển ảnh nằm dưới lớp này vẫn bấm được */
  pointer-events: none;
}
.abx__body h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -.01em;
}
.abx__lead {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 15.5px;
  line-height: 1.7;
}

.abx__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .94);
}
.abx__list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
}
.abx__list svg { flex: none; margin-top: 3px; color: #fff; }

.eyebrow--light { color: rgba(255, 255, 255, .82); }
.eyebrow--light::before { background: rgba(255, 255, 255, .55); }

.abx__badge {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 16px 26px;
  border-radius: 14px 4px 14px 4px;
  background: var(--red);
  color: #fff;
  text-align: center;
  box-shadow: 0 14px 34px rgba(200, 16, 46, .34);
}
.abx__badge b { font-size: 26px; line-height: 1; }
.abx__badge span {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}

/* Nút chuyển ảnh dời thành cặp ở góc trên phải: vị trí mặc định của băng chuyền
   (neo giữa hai mép) không dùng được ở đây vì cột chữ chiếm nửa trái ảnh — mũi
   tên trái sẽ đè thẳng lên chữ. Góc trên phải trống hoàn toàn: dưới phải là huy
   hiệu số nổi bật, dưới giữa là chấm điều hướng. */
.abx .ptsl__nav--prev,
.abx .ptsl__nav--next { top: 22px; }
.abx .ptsl__nav--prev { left: auto; right: 74px; transform: none; }
.abx .ptsl__nav--next { right: 18px; transform: rotate(180deg); }

@media (max-width: 1024px) {
  .abx__body { width: 64%; padding: 36px 30px; }
}

@media (max-width: 820px) {
  /* Hết chỗ đè chữ lên ảnh: xếp ảnh trên, chữ dưới nhưng vẫn liền một khối */
  .abx__slide,
  .abx__media--empty { height: 340px; }

  .abx__media { border-radius: 20px 6px 0 0; }

  .abx__body {
    position: static;
    width: auto;
    padding: 26px 22px 30px;
    background: var(--ink);
    border-radius: 0 0 20px 6px;
    pointer-events: auto;
  }

  .abx__badge {
    right: 18px;
    bottom: auto;
    top: 300px;
    padding: 12px 18px;
  }
  .abx__badge b { font-size: 21px; }

  .abx__list { grid-template-columns: 1fr; }
}

/* Băng chuyền vừa đủ một màn — không còn gì để chuyển nên giấu nút và chấm */
.ptsl--static .ptsl__nav,
.ptsl--static .ptsl__dots { display: none; }