/* ============================================================
   LADA Express — site.css
   Nền giao diện mới của website công khai (đợt làm lại 2026-08).
   Token bám design system LADA (.serena/memories/design-system/):
   brand đỏ #ED1B2F, neutral xám lạnh, semantic, grid 4px, radius 8.
   Stylesheet chính của site (theme cũ lada.css/ladav2.css đã gỡ hẳn
   khi khép sóng 2); mọi class mang tiền tố ld-.
   ============================================================ */

/* ---------- Font: Be Vietnam Pro (self-host) ---------- */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-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-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-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: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-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-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-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: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-600-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-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-600-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: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-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-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/be-vietnam-pro/be-vietnam-pro-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;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --lada-red-500: #ED1B2F;
  --lada-red-600: #D3192A;
  --lada-red-050: #FDE8EB;
  --lada-yellow-500: #FFCB05;
  --lada-yellow-100: #FFF5CC;
  --lada-black-900: #231F20;

  /* Neutral */
  --gray-900: #15171A;
  --gray-800: #2A2F36;
  --gray-700: #434A54;
  --gray-600: #667085;
  --gray-500: #98A2B3;
  --gray-400: #C9D0DA;
  --gray-300: #DDE3EA;
  --gray-200: #EDF1F5;
  --gray-100: #F6F8FA;
  --gray-050: #FAFBFC;
  --white: #FFFFFF;

  /* Semantic */
  --success-500: #12B76A; --success-100: #DDF7EA;
  --warning-500: #F79009; --warning-100: #FFF0D6;
  --error-500: #F04438;   --error-100: #FEE4E2;
  --info-500: #2E90FA;    --info-100: #DCEEFF;

  /* Typography — scale design system; web dùng cỡ 15-16 cho thân bài marketing */
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: 2rem;     /* 32/40 700 */
  --fs-h1: 1.75rem;       /* 28/36 700 */
  --fs-h2: 1.5rem;        /* 24/32 700 */
  --fs-h3: 1.25rem;       /* 20/28 600 */
  --fs-h4: 1.125rem;      /* 18/26 600 */
  --fs-title: 1rem;       /* 16/24 600 */
  --fs-body: .9375rem;    /* 15 — thân bài web */
  --fs-sm: .875rem;       /* 14 */
  --fs-caption: .75rem;   /* 12 */

  /* Spacing (grid 4px) */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px;

  /* Radius — 8 mặc định */
  --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-12: 12px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .12);

  /* Motion */
  --transition-fast: 140ms ease-out;
  --transition-med: 200ms ease-out;

  /* Layout */
  --header-h: 68px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
}

.ld-container-narrow { max-width: 880px; margin-inline: auto; }

:is(.ld-btn, .ld-nav a, .ld-mobile-nav a, .ld-burger, .ld-hotline, .ld-footer a):focus-visible {
  outline: 2px solid var(--lada-red-500);
  outline-offset: 2px;
}

/* ---------- Nút ---------- */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: 44px;
  padding: 0 var(--sp-20);
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ld-btn--primary { background: var(--lada-red-500); color: var(--white); }
.ld-btn--primary:hover, .ld-btn--primary:focus-visible { background: var(--lada-red-600); color: var(--white); }
.ld-btn--secondary { background: var(--white); border-color: var(--gray-300); color: var(--gray-900); }
.ld-btn--secondary:hover { background: var(--gray-100); color: var(--gray-900); }
.ld-btn--ghost { background: transparent; color: var(--gray-700); }
.ld-btn--ghost:hover { background: var(--gray-100); color: var(--gray-900); }
.ld-btn--sm { height: 36px; padding: 0 var(--sp-16); font-size: var(--fs-sm); }
.ld-btn--lg { height: 52px; padding: 0 var(--sp-24); font-size: 1rem; }
.ld-btn:disabled, .ld-btn.disabled { background: var(--gray-200); border-color: transparent; color: var(--gray-500); pointer-events: none; }

/* ---------- Card ---------- */
.ld-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-8);
}
.ld-card--pad { padding: var(--sp-20); }
.ld-card--hover { transition: border-color var(--transition-med), box-shadow var(--transition-med), transform var(--transition-med); }
.ld-card--hover:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* ---------- Badge ---------- */
.ld-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.ld-badge--brand   { background: var(--lada-red-050); color: var(--lada-red-500); }
.ld-badge--neutral { background: var(--gray-200); color: var(--gray-700); }
.ld-badge--success { background: var(--success-100); color: var(--success-500); }
.ld-badge--warning { background: var(--warning-100); color: var(--warning-500); }
.ld-badge--error   { background: var(--error-100); color: var(--error-500); }
.ld-badge--info    { background: var(--info-100); color: var(--info-500); }

/* ---------- Section ---------- */
.ld-section { padding: var(--sp-64) 0; }
.ld-section--alt { background: var(--gray-100); }
.ld-section__head { max-width: 720px; margin: 0 auto var(--sp-40); text-align: center; }
.ld-eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-8);
  color: var(--lada-red-600); /* 600 thay 500: đạt contrast AA 4.5:1 trên nền trắng/gray-050 */
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ld-section__title { margin: 0 0 var(--sp-12); font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; color: var(--gray-900); }
.ld-section__desc { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--gray-600); }
@media (max-width: 767.98px) {
  .ld-section { padding: var(--sp-48) 0; }
  .ld-section__title { font-size: var(--fs-h3); }
}

/* ---------- Header ---------- */
.ld-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--transition-med);
}
.ld-header--scrolled { box-shadow: var(--shadow-sm); }
.ld-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  height: var(--header-h);
}
.ld-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.ld-header__logo img { height: 40px; width: auto; }

.ld-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ld-nav a {
  display: inline-block;
  padding: var(--sp-8) 14px;
  border-radius: var(--radius-6);
  color: var(--gray-700);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.ld-nav a:hover { background: var(--gray-100); color: var(--gray-900); }
.ld-nav a.active { color: var(--lada-red-500); }

.ld-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-left: auto;
}

/* Hotline nổi bật */
.ld-hotline { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ld-hotline__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lada-red-050);
  color: var(--lada-red-500);
  font-size: var(--fs-title);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ld-hotline:hover .ld-hotline__icon { background: var(--lada-red-500); color: var(--white); }
.ld-hotline__label { display: block; color: var(--gray-600); font-size: var(--fs-caption); line-height: 18px; }
.ld-hotline__number { display: block; color: var(--lada-red-500); font-size: 1.0625rem; font-weight: 700; line-height: 22px; }

/* Burger mobile */
.ld-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-6);
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-title);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ld-burger:hover { background: var(--gray-100); }

/* ---------- Offcanvas mobile ---------- */
.ld-offcanvas { --bs-offcanvas-width: min(320px, 86vw); }
.ld-offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-16) var(--sp-20);
  border-bottom: 1px solid var(--gray-200);
}
.ld-offcanvas__head img { height: 36px; width: auto; }
.ld-offcanvas__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}
.ld-mobile-nav { margin: 0; padding: var(--sp-8) var(--sp-20); list-style: none; }
.ld-mobile-nav a {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-800);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
}
.ld-mobile-nav li:last-child a { border-bottom: 0; }
.ld-mobile-nav a:hover, .ld-mobile-nav a.active { color: var(--lada-red-500); }
.ld-offcanvas__foot { margin-top: auto; padding: var(--sp-20); border-top: 1px solid var(--gray-200); }
.ld-offcanvas__copy { margin: var(--sp-12) 0 0; color: var(--gray-500); font-size: var(--fs-caption); text-align: center; }

/* ---------- Footer ---------- */
.ld-footer { background: var(--gray-100); border-top: 1px solid var(--gray-200); }
.ld-footer__top { padding: var(--sp-48) 0 var(--sp-24); }
.ld-footer__logo img { height: 48px; width: auto; }
.ld-footer__desc { margin: var(--sp-16) 0 0; max-width: 360px; color: var(--gray-600); font-size: var(--fs-body); line-height: 1.6; }
.ld-footer__contact { margin: var(--sp-16) 0 0; padding: 0; list-style: none; }
.ld-footer__contact li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--sp-8);
  color: var(--gray-600);
  font-size: var(--fs-body);
}
.ld-footer__contact i { color: var(--lada-red-500); font-size: var(--fs-sm); flex-shrink: 0; }
.ld-footer__contact a { color: inherit; text-decoration: none; }
.ld-footer__contact a:hover { color: var(--lada-red-500); }
.ld-footer__hotline { font-weight: 700; color: var(--lada-red-600) !important; }

.ld-footer__title {
  margin: 0 0 var(--sp-16);
  color: var(--gray-900);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ld-footer__links { margin: 0; padding: 0; list-style: none; }
.ld-footer__links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--gray-600);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.ld-footer__links a:hover { color: var(--lada-red-500); }

.ld-socials { display: flex; gap: var(--sp-8); margin-top: var(--sp-20); }
.ld-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.ld-socials a:hover { background: var(--lada-red-500); border-color: var(--lada-red-500); color: var(--white); }

.ld-footer__bottom { padding: var(--sp-16) 0; border-top: 1px solid var(--gray-200); }
.ld-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-24);
}
.ld-footer__copy { margin: 0; color: var(--gray-600); font-size: 13px; }
.ld-footer__bottom-links { display: flex; gap: var(--sp-24); margin: 0; padding: 0; list-style: none; }
.ld-footer__bottom-links a { color: var(--gray-500); font-size: 13px; text-decoration: none; }
.ld-footer__bottom-links a:hover { color: var(--lada-red-500); }

@media (max-width: 991.98px) {
  .ld-footer__top { padding: var(--sp-40) 0 var(--sp-16); }
  .ld-footer__col { margin-bottom: var(--sp-24); }
}

/* ============================================================
   Trang chủ (W-6)
   ============================================================ */

/* ---------- Hero ---------- */
.ld-hero {
  padding: var(--sp-48) 0 var(--sp-64);
  background: linear-gradient(180deg, var(--gray-050), var(--white));
}
.ld-hero__title {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gray-900);
}
.ld-hero__desc { margin: 0 0 var(--sp-24); font-size: 1rem; line-height: 1.7; color: var(--gray-600); }
.ld-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.ld-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-24);
  margin: var(--sp-24) 0 0;
  padding: 0;
  list-style: none;
}
.ld-hero__trust li { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--gray-700); font-size: var(--fs-sm); font-weight: 500; }
.ld-hero__trust i { color: var(--success-500); }
.ld-hero__img { width: 100%; height: auto; border-radius: var(--radius-12); box-shadow: var(--shadow-md); }
@media (max-width: 991.98px) {
  .ld-hero { padding: var(--sp-32) 0 var(--sp-48); }
  .ld-hero__title { font-size: var(--fs-h1); }
}

/* ---------- Card media (dịch vụ + tin tức) ---------- */
.ld-media-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ld-media-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-100); }
.ld-media-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-media-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--sp-20); }
.ld-media-card__title { margin: 0 0 var(--sp-8); font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; }
.ld-media-card__title a { color: var(--gray-900); text-decoration: none; transition: color var(--transition-fast); }
.ld-media-card:hover .ld-media-card__title a { color: var(--lada-red-500); }
.ld-media-card__title a:focus-visible { outline: 2px solid var(--lada-red-500); outline-offset: 2px; }
.ld-media-card__title--sm { font-size: var(--fs-title); }
.ld-media-card__desc { margin: 0 0 var(--sp-16); font-size: var(--fs-body); line-height: 1.6; color: var(--gray-600); }
.ld-media-card__more,
.ld-media-card__meta { display: inline-flex; align-items: center; gap: var(--sp-8); margin-top: auto; }
.ld-media-card__more { color: var(--lada-red-600); font-size: var(--fs-sm); font-weight: 600; }
.ld-media-card__meta { color: var(--gray-600); font-size: var(--fs-caption); }

.ld-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.ld-section__cta { margin-top: var(--sp-40); text-align: center; }

/* ---------- Giới thiệu + số liệu ---------- */
.ld-about__title { margin: 0 0 var(--sp-16); font-size: var(--fs-h2); font-weight: 700; color: var(--gray-900); }
.ld-about__text { color: var(--gray-600); font-size: var(--fs-body); line-height: 1.7; }
.ld-about__text p { margin: 0 0 var(--sp-12); }
.ld-about__cta { margin-top: var(--sp-24); }
.ld-about__img { width: 100%; height: auto; border-radius: var(--radius-12); }
.ld-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-16);
  margin-top: var(--sp-48);
  padding: var(--sp-24);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-12);
}
.ld-stat { text-align: center; }
.ld-stat__value { display: block; font-size: var(--fs-h2); font-weight: 700; color: var(--lada-red-500); }
.ld-stat__label { display: block; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--gray-600); }

/* ---------- Testimonial ---------- */
.ld-testimonial { display: flex; flex-direction: column; height: 100%; }
.ld-testimonial__stars { display: flex; gap: 3px; margin-bottom: var(--sp-12); color: var(--lada-yellow-500); font-size: var(--fs-sm); }
.ld-testimonial__quote { flex-grow: 1; margin: 0 0 var(--sp-20); font-size: var(--fs-body); line-height: 1.7; color: var(--gray-700); }
.ld-testimonial__author { display: flex; align-items: center; gap: var(--sp-12); padding-top: var(--sp-16); border-top: 1px solid var(--gray-100); }
.ld-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ld-testimonial__name { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--gray-900); }
.ld-testimonial__role { display: block; font-size: var(--fs-caption); color: var(--gray-600); }

/* ---------- Dải CTA cuối trang ---------- */
.ld-cta-band { padding: var(--sp-48) 0; background: linear-gradient(135deg, var(--lada-red-600), var(--lada-red-500)); }
.ld-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-24); }
.ld-cta-band__title { margin: 0 0 var(--sp-8); font-size: var(--fs-h2); font-weight: 700; color: var(--white); }
.ld-cta-band__desc { margin: 0; max-width: 560px; font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .85); }
.ld-cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-24); }
.ld-cta-band__btn { background: var(--white); color: var(--lada-red-600); }
.ld-cta-band__btn:hover { background: var(--gray-100); color: var(--lada-red-600); }
.ld-cta-band__btn:focus-visible,
.ld-cta-band__phone:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.ld-cta-band__phone { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--white); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.ld-cta-band__phone:hover { color: var(--lada-yellow-500); }

/* ============================================================
   Trang trong (W-8): page-head, breadcrumb, prose, card bài viết,
   form, TOC, chip, việc làm, trang lỗi
   ============================================================ */

/* ---------- Page head ---------- */
.ld-page-head {
  padding: var(--sp-24) 0 var(--sp-32);
  background: var(--gray-050);
  border-bottom: 1px solid var(--gray-200);
}
.ld-page-head__title { margin: var(--sp-12) 0 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; color: var(--gray-900); }
.ld-page-head__desc { margin: var(--sp-8) 0 0; max-width: 720px; color: var(--gray-600); font-size: var(--fs-body); line-height: 1.6; }
@media (max-width: 767.98px) {
  .ld-page-head { padding: var(--sp-16) 0 var(--sp-24); }
  .ld-page-head__title { font-size: var(--fs-h2); }
}

/* ---------- Breadcrumb ---------- */
.ld-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}
.ld-breadcrumb li { display: inline-flex; align-items: center; }
.ld-breadcrumb li + li::before { content: "/"; margin: 0 var(--sp-8); color: var(--gray-400); }
.ld-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-600); text-decoration: none; transition: color var(--transition-fast); }
.ld-breadcrumb a:hover { color: var(--lada-red-500); }
.ld-breadcrumb .current { color: var(--gray-900); font-weight: 500; }

/* ---------- Prose (nội dung CMS qua Html.Raw) ---------- */
.ld-prose { font-size: var(--fs-body); line-height: 1.75; color: var(--gray-800); overflow-wrap: break-word; }
.ld-prose h2 { margin: var(--sp-32) 0 var(--sp-12); font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; color: var(--gray-900); }
.ld-prose h3 { margin: var(--sp-24) 0 var(--sp-8); font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; color: var(--gray-900); }
.ld-prose h4 { margin: var(--sp-20) 0 var(--sp-8); font-size: var(--fs-title); font-weight: 600; color: var(--gray-900); }
.ld-prose p { margin: 0 0 var(--sp-16); }
.ld-prose ul, .ld-prose ol { margin: 0 0 var(--sp-16); padding-left: 22px; }
.ld-prose li { margin-bottom: var(--sp-4); }
.ld-prose img { max-width: 100%; height: auto; border-radius: var(--radius-8); }
.ld-prose a { color: var(--lada-red-500); text-decoration: underline; text-underline-offset: 2px; }
.ld-prose a:hover { color: var(--lada-red-600); }
.ld-prose blockquote {
  margin: var(--sp-20) 0;
  padding: var(--sp-12) var(--sp-20);
  border-left: 3px solid var(--lada-red-500);
  background: var(--gray-050);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
  color: var(--gray-700);
}
.ld-prose table { display: block; overflow-x: auto; width: 100%; margin: 0 0 var(--sp-16); border-collapse: collapse; font-size: var(--fs-sm); }
.ld-prose th, .ld-prose td { padding: 10px 14px; border: 1px solid var(--gray-300); text-align: left; }
.ld-prose th { background: var(--gray-100); font-weight: 600; color: var(--gray-900); }

/* ---------- Card bài viết (dọc) ---------- */
.ld-post-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ld-post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-100); }
.ld-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-med); }
.ld-post-card:hover .ld-post-card__media img { transform: scale(1.04); }
.ld-post-card__body { display: flex; flex-direction: column; gap: var(--sp-8); flex-grow: 1; padding: var(--sp-16); }
.ld-post-card__title { margin: 0; font-size: var(--fs-title); font-weight: 600; line-height: 1.45; }
.ld-post-card--featured .ld-post-card__title { font-size: var(--fs-h4); }
.ld-post-card__title a {
  color: var(--gray-900);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ld-post-card__title a:hover { color: var(--lada-red-500); }
.ld-post-card__excerpt {
  margin: 0;
  color: var(--gray-600);
  font-size: var(--fs-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Card bài viết (ngang, danh sách phụ) ---------- */
.ld-post-row { display: flex; gap: var(--sp-12); padding: var(--sp-8) 0; }
.ld-post-row__media {
  display: block;
  flex: 0 0 128px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-8);
  background: var(--gray-100);
}
.ld-post-row__media img { width: 100%; height: 100%; object-fit: cover; }
.ld-post-row__body { min-width: 0; }
.ld-post-row__title { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.ld-post-row__title a {
  color: var(--gray-900);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ld-post-row__title a:hover { color: var(--lada-red-500); }

/* ---------- Meta (ngày, thời gian đọc...) ---------- */
.ld-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-16); margin: 0; color: var(--gray-600); font-size: var(--fs-caption); }
.ld-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ld-meta i { font-size: 11px; }

/* ---------- Chip (tag, anchor danh mục) ---------- */
.ld-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.ld-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.ld-chip:hover { border-color: var(--lada-red-500); background: var(--lada-red-050); color: var(--lada-red-500); }

/* ---------- Đầu mục section trong trang danh sách ---------- */
.ld-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-20); }
.ld-list-head__title { margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--gray-900); scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Bài viết chi tiết ---------- */
.ld-article__title { margin: 0 0 var(--sp-12); font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; color: var(--gray-900); }
.ld-article__sapo { margin: 0 0 var(--sp-20); color: var(--gray-700); font-size: var(--fs-h4); font-weight: 500; line-height: 1.55; }
.ld-article__thumb { width: 100%; height: auto; border-radius: var(--radius-8); margin-bottom: var(--sp-24); }
@media (max-width: 767.98px) {
  .ld-article__title { font-size: var(--fs-h2); }
  .ld-article__sapo { font-size: var(--fs-title); }
}

/* ---------- TOC ---------- */
.ld-toc {
  margin: 0 0 var(--sp-24);
  padding: var(--sp-16) var(--sp-20);
  background: var(--gray-050);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-8);
}
.ld-toc__title { display: flex; align-items: center; gap: var(--sp-8); margin: 0; font-size: var(--fs-title); font-weight: 600; color: var(--gray-900); cursor: pointer; }
.ld-toc ul { display: none; margin: var(--sp-12) 0 0; padding-left: 20px; }
.ld-toc ul.active { display: block; }
.ld-toc ul ul { display: block; margin-top: 0; }
.ld-toc li { margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.ld-toc a { color: var(--gray-700); text-decoration: none; }
.ld-toc a:hover { color: var(--lada-red-500); }
/* Biến thể TOC tĩnh (side nav trang Topic) — luôn mở, không toggle */
.ld-toc--static .ld-toc__title { cursor: default; }
.ld-toc--static ul { display: block; }

/* ---------- Form ---------- */
.ld-label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--gray-800); }
.ld-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-8);
  background: var(--white);
  color: var(--gray-900);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ld-input:focus { outline: none; border-color: var(--lada-red-500); box-shadow: 0 0 0 3px var(--lada-red-050); }
.ld-input::placeholder { color: var(--gray-500); }
.ld-field { margin-bottom: var(--sp-16); }
.ld-error { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--error-500); }
.ld-error:empty { display: none; }
.ld-help { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--gray-600); }

/* ---------- Card liên hệ / hotline ---------- */
.ld-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lada-red-050);
  color: var(--lada-red-500);
  font-size: var(--fs-title);
}
.ld-tel-link { color: var(--lada-red-500); font-weight: 700; text-decoration: none; }
.ld-tel-link:hover { color: var(--lada-red-600); }
.ld-sidebar-sticky { position: sticky; top: calc(var(--header-h) + 16px); }

/* ---------- Card việc làm ---------- */
.ld-job-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-20); }
.ld-job-card__title { margin: 0 0 var(--sp-8); font-size: var(--fs-h4); font-weight: 600; }
.ld-job-card__title a { color: var(--gray-900); text-decoration: none; }
.ld-job-card__title a:hover { color: var(--lada-red-500); }
@media (max-width: 575.98px) {
  .ld-job-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Trang lỗi (404 / lỗi hệ thống) ---------- */
.ld-errorpage { padding: var(--sp-64) 0; text-align: center; }
.ld-errorpage__code { margin: 0; font-size: clamp(72px, 16vw, 128px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--lada-red-500); }
.ld-errorpage__title { margin: var(--sp-16) 0 0; font-size: var(--fs-h2); font-weight: 700; color: var(--gray-900); }
.ld-errorpage__desc { max-width: 480px; margin: var(--sp-12) auto 0; color: var(--gray-600); font-size: var(--fs-body); line-height: 1.6; }
.ld-errorpage__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12); margin-top: var(--sp-32); }

/* ============================================================
   Dịch vụ + Giới thiệu (W-7): checklist, benefit card, tab bảng
   giá, bảng, quy trình bước, card giá xe
   ============================================================ */

/* Neo anchor trong trang không bị header sticky che */
.ld-section[id], .ld-hero[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- Checklist (bullet tick trong card dịch vụ) ---------- */
.ld-checklist { margin: 0 0 var(--sp-16); padding: 0; list-style: none; }
.ld-checklist li {
  position: relative;
  margin-bottom: var(--sp-8);
  padding-left: 26px;
  color: var(--gray-700);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ld-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success-100);
  color: var(--success-500);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- Benefit card (tiện ích / cam kết / loại hàng / giá trị cốt lõi) ---------- */
.ld-benefit { height: 100%; }
.ld-benefit .ld-icon-circle { margin-bottom: var(--sp-12); font-weight: 600; }
.ld-benefit__title { margin: 0 0 var(--sp-8); font-size: var(--fs-h4); font-weight: 600; color: var(--gray-900); }
.ld-benefit__desc { margin: 0; color: var(--gray-600); font-size: var(--fs-body); line-height: 1.6; }
.ld-benefit--row { display: flex; gap: var(--sp-16); align-items: flex-start; }
.ld-benefit--row .ld-icon-circle { margin-bottom: 0; }

/* ---------- Tab bảng giá ---------- */
.ld-tabs { gap: var(--sp-8); margin-bottom: var(--sp-24); border: 0; }
.ld-tab {
  height: 40px;
  padding: 0 var(--sp-20);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ld-tab:hover { border-color: var(--lada-red-500); color: var(--lada-red-500); }
.ld-tab.active { background: var(--lada-red-500); border-color: var(--lada-red-500); color: var(--white); }
.ld-tab:focus-visible { outline: 2px solid var(--lada-red-500); outline-offset: 2px; }

/* ---------- Bảng dữ liệu (bảng giá) ---------- */
.ld-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--fs-body);
}
.ld-table th, .ld-table td { padding: 12px 16px; border: 1px solid var(--gray-200); text-align: left; }
.ld-table th { background: var(--gray-100); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-900); white-space: nowrap; }
.ld-table td { color: var(--gray-800); }
.ld-table tbody tr:hover { background: var(--gray-050); }

/* ---------- Quy trình bước ---------- */
.ld-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-24) var(--sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ld-step;
}
.ld-steps--3 { max-width: 960px; margin-inline: auto; }
.ld-step { text-align: center; }
.ld-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-12);
  border-radius: 50%;
  background: var(--lada-red-500);
  color: var(--white);
  font-size: var(--fs-title);
  font-weight: 700;
}
.ld-step__title { margin: 0 0 var(--sp-8); font-size: var(--fs-title); font-weight: 600; color: var(--gray-900); }
.ld-step__desc { margin: 0; color: var(--gray-600); font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- Card giá xe (Detail-Bike) ---------- */
.ld-price-card { display: flex; flex-direction: column; height: 100%; padding: var(--sp-24); }
.ld-price-card__title { margin: 0 0 var(--sp-8); font-size: var(--fs-h4); font-weight: 600; color: var(--gray-900); }
.ld-price-card__desc { flex-grow: 1; margin: 0 0 var(--sp-16); color: var(--gray-600); font-size: var(--fs-sm); line-height: 1.6; }
.ld-price-card__price { margin: 0; padding-top: var(--sp-12); border-top: 1px solid var(--gray-100); font-size: var(--fs-h2); font-weight: 700; color: var(--lada-red-600); }
.ld-price-card__price span { font-size: var(--fs-body); font-weight: 600; color: var(--gray-600); }

/* ============================================================
   Nút nổi (hotline + cuộn lên) — chuyển từ lada.css/ladav2.css
   khi gỡ hẳn theme cũ (khép nợ W-8). #scrollUp giữ nguyên id +
   class toggle scrollUpVisible vì lada.js điều khiển theo contract đó.
   ============================================================ */
.ld-float-hotline {
  position: fixed;
  right: 58px;
  bottom: 130px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--lada-red-500);
  color: var(--white);
  font-size: 20px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.ld-float-hotline:hover, .ld-float-hotline:focus-visible { background: var(--lada-red-600); color: var(--white); transform: translateY(-2px); }
.ld-float-hotline:focus-visible { outline: 2px solid var(--lada-red-500); outline-offset: 2px; }

#scrollUp { display: none; }
#scrollUp.scrollUpVisible {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-8);
  background: var(--white);
  color: var(--gray-700);
  font-size: var(--fs-title);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
#scrollUp.scrollUpVisible:hover { background: var(--gray-100); color: var(--gray-900); transform: translateY(-2px); }
#scrollUp:focus-visible { outline: 2px solid var(--lada-red-500); outline-offset: 2px; }

/* ============================================================
   W-11 — Mạng lưới bưu cục (/mang-luoi + chi tiết)
   ============================================================ */
.ld-network-filter { max-width: 420px; margin-bottom: var(--sp-32); }

.ld-network-city { margin-bottom: var(--sp-40); }
.ld-network-city[hidden] { display: none; }
.ld-network-city__title {
  margin: 0 0 var(--sp-16);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--gray-200);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--gray-900);
}
.ld-network-city__title span { font-size: var(--fs-sm); font-weight: 500; color: var(--gray-600); }

.ld-agency-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); height: 100%; }
.ld-agency-card__title { margin: 0; font-size: var(--fs-h4); font-weight: 600; }
.ld-agency-card__title a { color: var(--gray-900); text-decoration: none; }
.ld-agency-card__title a:hover { color: var(--lada-red-600); }
.ld-agency-card__address { flex-grow: 1; margin: 0; color: var(--gray-600); font-size: var(--fs-sm); line-height: 1.6; }
.ld-agency-card__address i { margin-right: 4px; color: var(--gray-500); }
.ld-agency-card .ld-tel-link { font-size: var(--fs-sm); }

.ld-network-empty { margin: 0; color: var(--gray-700); font-size: var(--fs-body); line-height: 1.6; }

.ld-agency-detail .ld-agency-info { margin: var(--sp-16) 0 var(--sp-24); }
.ld-agency-info > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--sp-8) var(--sp-16);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--gray-100);
}
.ld-agency-info > div:last-child { border-bottom: 0; }
.ld-agency-info dt { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); }
.ld-agency-info dd { margin: 0; color: var(--gray-800); font-size: var(--fs-body); line-height: 1.6; }
@media (max-width: 575.98px) {
  .ld-agency-info > div { grid-template-columns: 1fr; gap: 2px; }
}

.ld-agency-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.ld-agency-actions .ld-btn i { margin-right: 6px; }

.ld-agency-related { margin-top: var(--sp-32); }
.ld-agency-related__title { margin: 0 0 var(--sp-12); font-size: var(--fs-h3); font-weight: 700; color: var(--gray-900); }
.ld-agency-related__list { margin: 0; padding: 0; list-style: none; }
.ld-agency-related__list li { padding: var(--sp-8) 0; border-bottom: 1px solid var(--gray-100); font-size: var(--fs-body); }
.ld-agency-related__list li:last-child { border-bottom: 0; }
.ld-agency-related__list a { color: var(--gray-900); font-weight: 600; text-decoration: none; }
.ld-agency-related__list a:hover { color: var(--lada-red-600); }
.ld-agency-related__list span { color: var(--gray-600); font-size: var(--fs-sm); }

.ld-agency-back { margin: var(--sp-32) 0 0; }
.ld-agency-back a { color: var(--gray-700); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.ld-agency-back a:hover { color: var(--lada-red-600); }
.ld-agency-back i { margin-right: 4px; }

/* ============================================================
   Tra cứu vận đơn (W-9): ô tra cứu hero + form + kết quả + timeline
   ============================================================ */
.ld-hero__track {
  display: flex;
  gap: var(--sp-8);
  max-width: 460px;
  margin-bottom: var(--sp-16);
}
.ld-hero__track .ld-input { flex: 1; min-width: 0; height: 52px; }

.ld-track-form { margin-bottom: var(--sp-24); }
.ld-track-form__row { display: flex; gap: var(--sp-12); }
.ld-track-form__row .ld-input { flex: 1; min-width: 0; }

.ld-track-empty {
  padding: var(--sp-32) var(--sp-20);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-8);
  text-align: center;
  color: var(--gray-700);
}
.ld-track-empty i { font-size: 28px; color: var(--gray-500); margin-bottom: var(--sp-12); }
.ld-track-empty__title { margin-bottom: var(--sp-8); font-size: var(--fs-title); color: var(--gray-900); }
.ld-track-empty__hint { font-size: var(--fs-sm); }
.ld-track-empty__hint a { color: var(--lada-red-600); font-weight: 600; }

.ld-track-result__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  margin-bottom: var(--sp-12);
}
.ld-track-result__code { font-size: var(--fs-title); color: var(--gray-900); margin-bottom: 2px; }
.ld-track-result__meta { font-size: var(--fs-sm); color: var(--gray-600); }
.ld-track-result__route {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--radius-8);
  background: var(--gray-100);
  color: var(--gray-800);
  font-weight: 500;
  margin-bottom: var(--sp-16);
}
.ld-track-result__route > i:first-child { color: var(--lada-red-500); }
.ld-track-result__arrow { color: var(--gray-500); }
.ld-track-result__subtitle { font-size: var(--fs-title); color: var(--gray-900); margin-bottom: var(--sp-12); }

.ld-timeline { list-style: none; margin: 0; padding: 0; }
.ld-timeline__item {
  position: relative;
  display: flex;
  gap: var(--sp-16);
  padding: 0 0 var(--sp-20) var(--sp-24);
}
.ld-timeline__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gray-400);
}
.ld-timeline__item:first-child::before { background: var(--lada-red-500); }
.ld-timeline__item::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: 2px;
  width: 2px;
  background: var(--gray-200);
}
.ld-timeline__item:last-child::after { display: none; }
.ld-timeline__item:last-child { padding-bottom: 0; }
.ld-timeline__time {
  flex: 0 0 122px;
  font-size: var(--fs-sm);
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}
.ld-timeline__label { color: var(--gray-800); font-weight: 500; }
.ld-timeline__item:first-child .ld-timeline__label { color: var(--gray-900); font-weight: 600; }

@media (max-width: 575.98px) {
  .ld-track-form__row { flex-direction: column; }
  .ld-timeline__item { flex-direction: column; gap: 2px; }
  .ld-timeline__time { flex-basis: auto; }
}

/* ====== Phân trang (W-13 — trang kết quả tìm kiếm) ====== */
.ld-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); margin-top: var(--sp-32); }
.ld-pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--sp-12);
  border: 1px solid var(--gray-300); border-radius: var(--radius-8);
  background: var(--white); color: var(--gray-800);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ld-pagination__link:hover { border-color: var(--lada-red-500); color: var(--lada-red-500); background: var(--lada-red-050); }
.ld-pagination__link--active { border-color: var(--lada-red-500); background: var(--lada-red-500); color: var(--white); pointer-events: none; }
.ld-pagination__ellipsis { display: inline-flex; align-items: center; padding: 0 var(--sp-4); color: var(--gray-500); }

/* ============================================================
   W-10 — Bảng giá / ước tính cước (/bang-gia)
   ============================================================ */
.ld-quote-card__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h4); font-weight: 600; color: var(--gray-900); }
.ld-quote-card__hint { margin: 0 0 var(--sp-20); font-size: var(--fs-sm); color: var(--gray-600); }

.ld-quote-result {
  margin-top: var(--sp-24);
  padding: var(--sp-20);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-8);
  background: var(--gray-050);
}
.ld-quote-result--error { border-color: var(--lada-red-500); background: var(--lada-red-050); color: var(--gray-800); }
.ld-quote-result__label { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--gray-600); }
.ld-quote-result__fee { margin: 0 0 var(--sp-8); font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--lada-red-600); }
.ld-quote-result__route { margin: 0 0 var(--sp-4); font-weight: 600; color: var(--gray-900); }
.ld-quote-result__route i { margin: 0 var(--sp-4); color: var(--gray-500); }
.ld-quote-result__meta { margin: 0 0 var(--sp-12); font-size: var(--fs-sm); color: var(--gray-600); }
.ld-quote-result__note { margin: 0; padding-top: var(--sp-12); border-top: 1px solid var(--gray-200); font-size: var(--fs-sm); color: var(--gray-600); }
.ld-quote-result__note a { color: var(--lada-red-600); font-weight: 600; }

.ld-price-table__title { margin: 0 0 var(--sp-12); font-size: var(--fs-title); font-weight: 600; color: var(--gray-900); }
.ld-price-note { margin: var(--sp-24) 0 0; font-size: var(--fs-sm); color: var(--gray-600); text-align: center; }
.ld-price-cta { margin-top: var(--sp-24); text-align: center; }

/* ---------- Câu hỏi thường gặp (details/summary thuần, không cần JS) ---------- */
.ld-faq { display: flex; flex-direction: column; gap: var(--sp-12); }
.ld-faq__item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-8);
  background: var(--white);
  overflow: hidden;
}
.ld-faq__question {
  display: flex;
  gap: var(--sp-12);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-16) var(--sp-20);
  font-weight: 600;
  color: var(--gray-900);
  cursor: pointer;
  list-style: none;
}
.ld-faq__question::-webkit-details-marker { display: none; }
.ld-faq__question::after {
  content: "\f078";
  flex: 0 0 auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: var(--fs-sm);
  color: var(--gray-500);
  transition: transform var(--transition-fast);
}
.ld-faq__item[open] .ld-faq__question::after { transform: rotate(180deg); }
.ld-faq__question:hover { color: var(--lada-red-600); }
.ld-faq__question:focus-visible { outline: 2px solid var(--lada-red-500); outline-offset: -2px; }
.ld-faq__answer { padding: 0 var(--sp-20) var(--sp-16); color: var(--gray-700); line-height: 1.7; }