/* Font tự lưu trên hforged.vn (Archivo, Oswald, Inter — latin + vietnamese; bỏ latin-ext vì
   dải ký tự của nó trùng chữ tiếng Việt nên trước đây trang nào cũng tải thừa ~135KB). */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/archivo-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/archivo-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/archivo-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/archivo-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Tokens ===== */
:root{
  --bg: #0a0a0b;
  --bg-alt: #121214;
  --surface: #1a1a1d;
  --surface-2: #232326;
  --border: #2c2c30;
  --text: #f2f2f0;
  --text-dim: #a8a8ac;
  --accent: #e10600;
  --accent-2: #c0c0c0;
  --radius: 10px;
  --container: 1240px;
  --font-display: "Archivo", "Oswald", sans-serif;
  --font-head: "Oswald", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); text-transform: uppercase; margin:0; letter-spacing: -0.01em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 15px 30px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight:600;
  font-size: 0.85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background:#ff1a12; }
.btn-outline{ border-color: var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--accent-2); }
.btn-block{ width:100%; }

/* ===== Language toggle ===== */
.lang-toggle{
  display:flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
}
.lang-btn{
  background:transparent;
  border:none;
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight:600;
  letter-spacing: .04em;
  padding: 8px 14px;
  cursor:pointer;
}
.lang-btn.active{ background: var(--accent); color:#fff; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(10,10,11,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  height: 84px;
}
.logo{
  display:flex; align-items:center;
  flex-shrink:0;
}
.logo-img{
  height: 60px;
  width: auto;
  display:block;
}
.nav{ display:flex; gap: 30px; }
.nav a{
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight:600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s ease;
}
.nav a:hover{ color: var(--text); }
.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-cta{ padding: 10px 20px; font-size: .74rem; }
.nav-toggle{
  display:none;
  flex-direction: column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.nav-toggle span{
  width: 24px; height: 2px; background: var(--text); display:block;
}

/* ===== Eyebrow / section labels ===== */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  color: #ff4a3f;  /* đỏ sáng hơn --accent để chữ nhỏ đủ tương phản trên nền tối */
  font-family: var(--font-head);
  font-weight:600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78rem;
  margin: 0 0 20px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background: var(--accent); }

/* ===== Hero ===== */
.hero{
  position: relative;
  overflow: hidden;
  padding: 150px 0 110px;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 82% 15%, rgba(225,6,0,0.16), transparent 55%),
    radial-gradient(circle at 5% 95%, rgba(192,192,192,0.06), transparent 45%);
  z-index:0;
}
.hero-photo{
  position:absolute; inset:0;
  z-index:0;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.55) saturate(1.05);
}
.hero-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.25) 40%, rgba(10,10,11,.8) 100%);
}
.hero-inner{ position: relative; z-index:1; text-align:center; }
.hero-text{ max-width: 720px; margin: 0 auto; }
.hero-text h1{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .96;
  margin-bottom: 26px;
}
.hero-title-1{ display:block; color: var(--text); }
.hero-title-mid{
  display:block;
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
  margin-top:-0.05em;
}
@supports not (-webkit-text-stroke: 1px black) {
  .hero-title-mid{ color: var(--text); }
}
.hero-title-2{ display:block; color: var(--accent); margin-top:-0.05em; }
.hero-sub{
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 36px;
}
.hero-vertical{
  position:absolute;
  right: 32px;
  top: 150px;
  writing-mode: vertical-rl;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight:600;
  letter-spacing: .18em;
  color: var(--text-dim);
  text-transform: uppercase;
  z-index:1;
}
.hero-scroll{
  position:absolute;
  right:32px; bottom:40px;
  display:flex; align-items:center; gap:14px;
  z-index:1;
}
.hero-scroll-line{ width:1px; height:48px; background: var(--border); }
.hero-scroll span{
  font-family: var(--font-head);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
}

/* ===== Trust strip ===== */
.trust-strip{
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  overflow:hidden;
}
.trust-inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: 14px;
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight:600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trust-inner .dot{ color: var(--accent); }

/* ===== Sections ===== */
.section{ padding: 120px 0; }
.section-alt{ background: var(--bg-alt); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 48px;
  margin-bottom: 56px;
}
.section-head-titles h2{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: .92;
}
.section-head-titles .line-2{ display:block; margin-top:-0.06em; }
.section-head-body{
  max-width: 360px;
  color: var(--text-dim);
  font-size: 1rem;
  text-align:right;
}
.section-head-link{
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight:600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  white-space:nowrap;
}

/* ===== Numbered product grid ===== */
.numbered-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.numbered-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.n-item{
  border-radius: var(--radius);
  display:flex;
  flex-direction:column;
  transition: background .2s ease;
}
a.n-item:hover{ background: var(--surface); }
a.n-item:hover .n-item-media{ opacity:.9; }
.n-item-media{
  height: 236px;
  margin: 20px 20px 0;
  border-radius: 6px;
  position:relative;
  overflow:hidden;
}
.n-item-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  padding: 14px;
}
.n-item-body{ padding: 18px 20px 26px; }
.tag{
  display:inline-block;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight:600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.tag-own{ background: rgba(225,6,0,0.16); color:#ff8c84; }
.tag-dist{ background: var(--surface-2); color: var(--text-dim); border:1px solid var(--border); }
.n-item-body h2, .n-item-body h3{
  font-family: var(--font-head);
  font-weight:700;
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.n-item-body p{ color: var(--text-dim); font-size: .88rem; margin:0; }

/* Homepage teaser: drop the boxed-grid border lines for a seamless single block */
#homeProductTeaser{
  border-top: none;
  border-left: none;
  gap: 28px;
}
#homeProductTeaser .n-item{
  border-right: none;
  border-bottom: none;
}

/* Card has a real photo/logo — flat dark stage instead of the decorative
   gradient, so the image's own background (usually solid black) blends in
   seamlessly instead of showing a mismatched color seam around it. */
/* Logo/ảnh có nền đen (AL13, HRE…): "lighten" làm nền đen hoà vào nền ô (cả khi hover),
   không lộ khung vuông; mọi logo cùng khoảng đệm. */
.n-item-media.has-photo{ background: transparent; }
.n-item-media.has-photo img{ mix-blend-mode: lighten; padding: 26px 32px; }
/* Ảnh bìa sản phẩm dạng ảnh chụp (…-cover.jpg, đúng tỷ lệ ô): phủ kín ô, không đệm, không hoà trộn */
.n-item-media.has-photo img[src*="-cover"]{ mix-blend-mode: normal; padding: 0; object-fit: cover; }
/* Hãng chưa có logo: tên hãng dạng chữ */
.n-item-media.is-wordmark{ display:flex; align-items:center; justify-content:center; }
.n-item-wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  color: #e9e9e7;
  padding: 0 20px;
}

.media-eu{ background: radial-gradient(circle at 70% 20%, #3a4a5a, #16161a 70%); }
.media-asia{ background: radial-gradient(circle at 70% 20%, #6a1210, #16161a 70%); }
.media-us{ background: radial-gradient(circle at 70% 20%, #4a4a4f, #16161a 70%); }
.article-wheels{ background: radial-gradient(circle at 70% 20%, #5a6068, #16161a 70%); }
.article-brake{ background: radial-gradient(circle at 70% 20%, #7a1a1a, #16161a 70%); }

/* ===== Selected builds (regions + stat) ===== */
.builds-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.build-tile{
  border-radius: var(--radius);
  height: 260px;
  position:relative;
  display:flex; align-items:flex-end;
  padding: 22px;
  overflow:hidden;
  transition: transform .2s ease;
}
a.build-tile:hover{ transform: translateY(-4px); }
.build-tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.build-tile h3{
  position:relative; z-index:1;
  font-family: var(--font-head);
  font-weight:700;
  font-size: 1.05rem;
  text-transform:uppercase;
}
.build-tile img ~ h3{
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.build-tile:has(img:not([hidden]))::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent 60%);
  z-index:0;
}
.build-stat{
  background: var(--accent);
  color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-start;
}
.build-stat .stat-num{
  font-family: var(--font-display);
  font-weight:900;
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 6px;
}
.build-stat .stat-label{
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight:600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}

/* ===== Gallery (region filter + admin-fed grid) ===== */
.gallery-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.tab-btn{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight:600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tab-btn:hover{ color: var(--text); border-color: #3a3a3f; }
.tab-btn.active{ background: var(--accent); border-color: var(--accent); color:#fff; }

.container-wide{ max-width: calc(var(--container) * 1.05); }
.container-narrow{ max-width: 760px; }

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery-pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:32px;
}
.gallery-pagination .page-btn{
  min-width:38px;
  padding:8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-head);
  font-size:.85rem;
  cursor:pointer;
}
.gallery-pagination .page-btn:hover{ color: var(--accent); border-color: var(--accent); }
.gallery-pagination .page-btn.active{ background: var(--accent); border-color: var(--accent); color:#fff; }
.gallery-item{
  position:relative;
  margin:0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background: var(--surface-2);
  transition: border-color .2s ease;
}
.gallery-item:hover{ border-color: var(--accent); }
.gallery-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index:0;
  transition: transform .3s ease;
}
.gallery-item:hover img{ transform: scale(1.04); }
.gallery-item-caption{
  position:relative;
  z-index:1;
  width:100%;
  padding: 14px 16px;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight:600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
}
.empty-note{
  text-align:center;
  color: var(--text-dim);
  font-size: .9rem;
  padding: 32px 0 0;
}
.empty-note code{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .85em;
}

/* ===== Video ===== */
.video-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.related-videos{ margin-top: 48px; }
.related-videos h2{ font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 20px; }
.related-videos > p{ margin-top: 16px; }
.related-videos .video-grid{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px){ .related-videos .video-grid{ grid-template-columns: 1fr; } }
.video-item{
  position:relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow:hidden;
}
.video-item iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ===== Configurator ===== */
.configurator{
  display:flex;
  flex-direction:column;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.configurator-controls{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  justify-content:center;
}
.configurator-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight:600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex: 1 1 220px;
}
.configurator-field select{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 12px 14px;
  border-radius: 8px;
  cursor:pointer;
}
.configurator-field select:focus{ outline: 1px solid var(--accent); }
.configurator-preview{
  position:relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.configurator-preview img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
}
.configurator-preview .empty-note{ padding: 0 32px; }

/* ===== Features (Why choose us) ===== */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.feature{
  background: var(--bg);
  padding: 32px 26px;
}
.feature h3{
  font-family: var(--font-head);
  font-weight:700;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.feature p{ color: var(--text-dim); font-size: .88rem; margin:0; }

/* ===== CTA split ===== */
.cta-split{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 48px;
  flex-wrap:wrap;
}
.cta-split h2{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height:.94;
}
.cta-split h2 .line-2{ color: var(--accent); margin-top:-0.05em; display:block; }
.cta-split-right{ max-width: 380px; }
.cta-split-right p{ color: var(--text-dim); margin-bottom: 16px; }
.cta-arrow-link{
  font-family: var(--font-head);
  font-weight:600;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
}

/* ===== Contact ===== */
.contact-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:start;
}
.contact-section .eyebrow{ justify-content:flex-start; }
.contact-list{ display:flex; flex-direction:column; gap:18px; margin-top: 32px; }
.contact-list li{
  display:flex; flex-direction:column; gap:4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.contact-list strong{ font-family: var(--font-head); text-transform: uppercase; font-size: .8rem; font-weight:600; letter-spacing:.05em; color: var(--text-dim); }
.contact-list span{ font-size: 1rem; }

.contact-form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display:flex; flex-direction:column; gap:18px;
}
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size: .85rem; color: var(--text-dim); }
.form-row input,
.form-row select,
.form-row textarea{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .95rem;
  resize: vertical;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--accent);
}
.form-note{ min-height: 20px; font-size: .88rem; color: #4ade80; margin:0; text-align:center; }

/* ===== Footer ===== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 64px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 44px;
}
.footer-brand .logo{ margin-bottom: 14px; }
.footer-brand p{ color: var(--text-dim); font-size: .88rem; max-width: 260px; }
.footer-col-label{
  font-family: var(--font-head);
  font-size: .76rem;
  font-weight:600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.footer-col p, .footer-col a{
  display:block;
  font-size: .9rem;
  margin-bottom: 8px;
}
.footer-col a:hover{ color: var(--accent); }

.social-links{ display:flex; flex-direction:column; gap:12px; }
.social-link{
  display:flex; align-items:center; gap:10px;
  color: var(--text-dim);
  font-size: .9rem;
  transition: color .2s ease;
}
.social-link svg{ width:20px; height:20px; flex-shrink:0; }
.social-link:hover{ color: var(--accent); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: .8rem;
}
.footer-bottom .slogan{
  font-family: var(--font-head);
  font-weight:600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .74rem;
}

/* ===== Album detail page ===== */
.album-back-link{
  display:inline-block;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight:600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.album-back-link:hover{ color: var(--accent); }
.album-title{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height:.98;
  margin-bottom: 10px;
}
.album-meta{ color: var(--text-dim); margin-bottom: 40px; }
.album-photo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.album-photo-grid img{
  width:100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display:block;
  cursor: zoom-in;
}

/* ===== Article (Tìm hiểu / blog) page ===== */
.article-cover{
  height: 300px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 40px;
  overflow: hidden;
}
.article-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-body{ max-width: 760px; }
.article-body p{ margin: 0 0 20px; color: var(--text-dim); font-size: 1rem; }
.article-body strong{ color: var(--text); font-weight:600; }
.article-body h2{
  font-family: var(--font-head);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.4rem;
  font-weight:600;
  color: var(--text);
  margin: 40px 0 16px;
}
.article-body h3{
  font-family: var(--font-head);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.1rem;
  font-weight:600;
  color: var(--text);
  margin: 28px 0 12px;
}
.article-body ul, .article-body ol{
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--text-dim);
}
.article-body ul{ list-style: disc; }
.article-body ol{ list-style: decimal; }
.article-body li{ margin-bottom: 8px; }
.article-body a{ color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover{ color: var(--text); }
.article-table-wrap{ overflow-x: auto; margin: 0 0 28px; }
.article-body table{ width:100%; border-collapse: collapse; font-size:.92rem; }
.article-body th, .article-body td{ border:1px solid var(--border); padding: 10px 14px; text-align:left; color: var(--text-dim); }
.article-body th{ color: var(--text); font-family: var(--font-head); font-weight:600; background: var(--surface); }
.article-cta{
  max-width: 760px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px 32px;
  margin-top: 8px;
}
.article-cta p{ margin: 0 0 16px; color: var(--text-dim); }
.article-cta .btn + .btn{ margin-left: 10px; }
.article-cover picture{ display:block; height:100%; }
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px;
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight:600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.breadcrumb a:hover{ color: var(--accent); }
.article-explore{
  max-width: 760px;
  display:flex; flex-wrap:wrap; align-items:center; gap: 10px 18px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  color: var(--text-dim);
}
.article-explore a{ color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.article-explore a:hover{ color: var(--accent); }
.article-related{ margin-top: 72px; }
.article-related h2{
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin-bottom: 20px;
}
@media (max-width:600px){
  .article-cover{ height: 180px; }
  .article-cta{ padding: 22px 20px; }
  .article-cta .btn{ display:flex; width:100%; justify-content:center; }
  .article-cta .btn + .btn{ margin: 10px 0 0; }
}

/* ===== Wheel catalog (Vossen/HRE/AL13/Brixton full model list) ===== */
.wc-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:28px;
}
.wc-series-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.wc-series-filter .tab-btn{ font-size:.72rem; padding:8px 14px; }
.wc-count{ color:var(--text-dim); font-size:.85rem; }
.wc-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.wc-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--surface);
  transition: border-color .2s ease, transform .2s ease;
}
.wc-card:hover{ border-color: var(--accent-2); transform: translateY(-2px); }
.wc-card-media{
  aspect-ratio: 1/1;
  background:#0a0a0b;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: zoom-in;
  overflow:hidden;
}
.wc-card-media img{ width:100%; height:100%; object-fit:contain; padding:10px; }
/* Caliper: ảnh đã đưa về khung vuông cùng màu nền của ảnh → phủ kín ô, không lộ viền */
.is-brake .wc-card-media img{ padding:0; object-fit:cover; }
.wc-card-body{ padding:14px 16px 18px; }
.wc-card-body h3{
  font-family: var(--font-head);
  text-transform:none;
  letter-spacing:normal;
  font-size:.95rem;
  font-weight:600;
  margin-bottom:4px;
}
.wc-card-body p{ color:var(--text-dim); font-size:.78rem; margin:0; }
.wc-card-body .wc-specs{ margin-top:4px; color:var(--text-dim); opacity:.8; }
@media (max-width:900px){
  .wc-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:560px){
  .wc-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Zalo floating chat button ===== */
.zalo-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0068FF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.zalo-float:hover{ transform: scale(1.06); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.zalo-float svg{ width: 30px; height: 30px; color: #fff; }
.zalo-float-label{
  position: absolute;
  right: 66px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.zalo-float:hover .zalo-float-label{ opacity:1; transform: translateX(0); }
@media (max-width:600px){
  .zalo-float{ right:14px; bottom:14px; width:50px; height:50px; }
  .zalo-float svg{ width:26px; height:26px; }
  .zalo-float-label{ display:none; }
}

/* ===== Lightbox (album/product photo viewer) ===== */
.lightbox-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background: rgba(10,10,11,.94);
  align-items:center;
  justify-content:center;
  padding: 60px 20px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width:auto;
  height:auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  object-fit: contain;
  display:block;
}
.lightbox-close{
  position:absolute;
  top:18px; right:18px;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--surface, #18181b);
  border:1px solid var(--border);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background: var(--surface, #18181b);
  border:1px solid var(--border);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-prev{ left:18px; }
.lightbox-next{ right:18px; }
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--accent); border-color: var(--accent); }
@media (max-width:600px){
  .lightbox-overlay{ padding:70px 12px; }
  .lightbox-nav{ width:40px; height:40px; font-size:1.4rem; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
  .lightbox-close{ width:38px; height:38px; top:10px; right:10px; }
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero-vertical, .hero-scroll{ display:none; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-head-body{ text-align:left; max-width:100%; }
  .numbered-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .builds-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .video-grid{ grid-template-columns: repeat(2,1fr); }
  .album-photo-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-inner{ grid-template-columns: 1fr; }
  .cta-split{ flex-direction:column; align-items:flex-start; }
  .header-inner{ height: 64px; }
  .logo-img{ height: 44px; }
  .lang-btn{ min-height: 40px; padding: 10px 14px; }
  .nav-toggle{ min-width: 44px; min-height: 44px; align-items:center; justify-content:center; padding: 10px; }
  .nav{
    position:absolute; top:64px; left:0; right:0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction:column;
    padding: 8px 24px 16px;
    gap: 0;
    display:none;
  }
  .nav a{ display:block; padding: 14px 0; font-size: .9rem; border-bottom: 1px solid var(--border); }
  .nav a:last-child{ border-bottom: none; }
  .nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }

  /* Hero photo: on desktop this is a full-bleed absolute background behind
     the centered text, which works because the hero stays wide/short. On a
     phone the 3-line headline stacks tall, making the section taller than
     it is wide — object-fit:cover then crops hard off the photo's left and
     right, cutting the car in half. Below this width, stop using the photo
     as a background and lay it out as its own fixed-aspect-ratio banner
     above the text instead, so its width sets its height (not the text). */
  .hero{ padding: 0 0 56px; }
  .hero-photo{
    position: static;
    aspect-ratio: 16 / 10;
  }
  .hero-photo::after{ content: none; }
  .hero-inner{ padding-top: 40px; }
}
@media (max-width: 560px){
  .feature-grid{ grid-template-columns: 1fr; }
  .numbered-grid{ grid-template-columns: 1fr !important; }
  .builds-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .gallery-grid, .video-grid, .builds-grid, .album-photo-grid{ grid-template-columns: 1fr; }
}

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ===== Blog readability: sentence-case titles, photo covers ===== */
#articleTitle{
  text-transform: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0;
}
.n-item-body h2{ text-transform: none; line-height: 1.3; }
#blogGrid .n-item-body h2, #homeBlogTeaser .n-item-body h3, .article-related .n-item-body h3{
  text-transform: none; line-height: 1.3;
}
/* Ảnh bìa blog phần lớn là logo/ảnh sản phẩm — hiển thị trọn, không cắt */
.article-cover{ background:#0a0a0b; }
.article-cover img{ object-fit: contain; padding: 16px; }
/* Signature: second heading line in the silver outline used by the hero */
.section-head-titles .line-2{ color: var(--accent-2); }
.seo-intro .article-body h2, .seo-intro h2{ margin-top:0; }
.seo-intro p{ font-size:.95rem; }

/* ===== Tra thông số mâm theo xe (thong-so-mam-*.html) ===== */
.fit-title{
  text-transform: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 10px;
}
.fit-specs{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 8px 0 36px;
}
.fit-spec{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
}
.fit-spec span{
  display:block;
  font-family: var(--font-head); font-size: .76rem; font-weight:600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 6px;
}
.fit-spec strong{ font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.fit-photos{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 28px; }
.fit-photo{ position:relative; display:block; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio: 4/3; }
.fit-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.fit-photo:hover img{ transform: scale(1.04); }
.fit-photo span{
  position:absolute; left:0; right:0; bottom:0; padding: 22px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  font-size: .78rem; color:#fff; line-height:1.3;
}
.article-body .fit-photo{ text-decoration:none; }
.fit-disclaimer{ font-size: .85rem !important; opacity: .8; }
.fit-related{ margin-top: 48px; }
.fit-related h2{ font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 14px; }
.fit-related div{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 18px; }
.fit-related div a{
  border:1px solid var(--border); border-radius: 999px; padding: 8px 14px;
  font-size: .85rem; color: var(--text-dim);
}
.fit-related div a:hover{ border-color: var(--accent); color: var(--text); }
.fit-related p a{ color: var(--accent); }
.fit-search input{
  width:100%; max-width: 560px; display:block; margin: 0 auto 18px;
  background: var(--surface); border:1px solid var(--border); border-radius: 999px;
  color: var(--text); font: inherit; padding: 14px 20px;
}
.fit-search input:focus{ outline:none; border-color: var(--accent); }
.fit-brands{ display:flex; flex-wrap:wrap; justify-content:center; gap: 8px; margin-bottom: 28px; }
.fit-brands .tab-btn{ font-size: .74rem; padding: 9px 14px; }
.fit-table td a{ color: var(--text); }
.fit-table td a:hover{ color: var(--accent); }
.fit-table td small{ display:block; color: var(--text-dim); font-size: .78rem; margin-top: 2px; }
.fit-table td:not(:first-child){ white-space: nowrap; font-variant-numeric: tabular-nums; }
.fit-table tr[hidden]{ display:none; }
@media (max-width:600px){
  .fit-specs{ grid-template-columns: repeat(2, 1fr); }
  .fit-photos{ grid-template-columns: repeat(2, 1fr); }
  .fit-table th:nth-child(4), .fit-table td:nth-child(4){ display:none; }
}
.fit-cta-box{
  border:1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: 24px 28px; margin: 0 auto 28px; max-width: 760px; text-align:center;
}
.fit-cta-box p{ color: var(--text-dim); margin: 0 0 16px; }
.fit-cta-box p strong{ color: var(--text); }
.fit-quick{ display:flex; flex-wrap:wrap; justify-content:center; gap: 8px; margin-top: 18px; }
.fit-quick a{ border:1px solid var(--border); border-radius:999px; padding: 7px 13px; font-size:.82rem; color: var(--text-dim); }
.fit-quick a:hover{ border-color: var(--accent); color: var(--text); }
.fit-table{ width:100%; border-collapse: collapse; font-size: .95rem; }
.fit-table th{
  text-align:left; font-family: var(--font-head); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim);
  padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.fit-table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); vertical-align: middle; }
.fit-table tbody tr:hover{ background: var(--surface); }
.fit-table-wrap{ border:1px solid var(--border); border-radius: var(--radius); }

/* Bộ chọn Hãng → Năm → Dòng xe */
.fit-finder{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.fit-finder-fields{ display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items:end; }
.fit-finder label span{
  display:flex; gap:6px; align-items:baseline;
  font-size: .82rem; color: var(--text-dim); margin-bottom: 6px;
}
.fit-finder label em{ font-style:normal; font-size:.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fit-finder select{
  width:100%; height: 48px; padding: 0 40px 0 14px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: .95rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a8a8ac' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center;
  cursor: pointer;
}
.fit-finder select:focus{ outline:none; border-color: var(--accent); }
.fit-finder select:disabled{ opacity:.45; cursor:not-allowed; }
.fit-finder .btn{ height: 48px; white-space: nowrap; }
.fit-finder .btn:disabled{ opacity:.5; cursor:not-allowed; }
.fit-or{ text-align:center; color: var(--text-dim); font-size:.85rem; margin: 26px 0 14px; }
.fit-home{ padding-top: 72px; padding-bottom: 72px; }
.fit-home-head{ text-align:center; max-width: 680px; margin: 0 auto 28px; }
.fit-home-head .eyebrow{ justify-content:center; }
.fit-home-head h2{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 8px 0 12px; }
.fit-home-head p{ color: var(--text-dim); }
.fit-home-all{ text-align:center; margin-top: 18px; }
.fit-home-all a{ color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
/* Bảng size lốp/mâm zin */
.fit-oe td span{ display:block; white-space: nowrap; }
.fit-oe td span + span{ margin-top: 4px; }
.fit-oe td:first-child{ color: var(--text); font-weight:600; }
.fit-empty{ border:1px dashed var(--border); border-radius: var(--radius); padding: 16px 18px; }
@media (max-width: 900px){
  .fit-finder-fields{ grid-template-columns: 1fr; }
  .fit-finder .btn{ width:100%; justify-content:center; }
}
@media (max-width: 600px){
  .fit-specs{ grid-template-columns: repeat(2, 1fr); }
  .fit-oe td span{ white-space: normal; }
}
.zalo-link{ display:inline-flex; align-items:center; gap:8px; color: var(--text); }
.zalo-link svg{ width:20px; height:20px; color:#0068ff; }
.zalo-link:hover{ color: var(--accent); }

/* Video Gallery: ảnh bìa + nút Play, bấm mới tải YouTube */
.video-facade{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; }
.video-facade img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.85; transition: opacity .2s ease; }
.video-facade:hover img{ opacity:1; }
.video-play{
  position:absolute; left:50%; top:50%; width:68px; height:48px; transform:translate(-50%,-50%);
  background: var(--accent); border-radius: 12px;
}
.video-play::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  border-style:solid; border-width:10px 0 10px 17px; border-color: transparent transparent transparent #fff;
}
/* Ảnh lưới album: giữ chỗ trước khi ảnh tải (tránh giật trang) */
.album-photo-grid img{ aspect-ratio: 3 / 2; object-fit: cover; }
.article-tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 20px 0 0; font-size:.85rem; color: var(--text-dim); }
.article-tags .tag{ border:1px solid var(--border); border-radius:999px; padding:3px 10px; }