:root {
  --red: #e71922;
  --red-dark: #c80f18;
  --ink: #202124;
  --muted: #666b73;
  --line: #ececef;
  --surface: #ffffff;
  --shadow: 0 16px 42px rgba(30, 34, 42, .10);
  --container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* margin, font-family, color, background: đã set ở style.css (load sau nên luôn thắng) — bỏ khỏi đây để tránh trùng lặp */
body {
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

.site-header {
  height: 106px;
  background: rgba(255,255,255,.96);
  position: relative;
  z-index: 20;
}
.nav-wrap { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { flex: 0 0 132px; }
.brand img { width: auto; height: 92px; object-fit: contain; object-position: center; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 35px; margin-left: auto; }
.main-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 650;
  padding: 43px 0 37px;
  transition: color .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 25px;
  height: 3px;
  border-radius: 10px;
  background: var(--red);
  transition: left .2s ease, right .2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--red); }
.main-nav a:hover::after, .main-nav a.active::after { left: 0; right: 0; }

/* Submenu styles */
.nav-item-with-dropdown {
  position: relative;
}

.nav-link-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 43px 0 37px;
  font-size: 14px;
  font-weight: 650;
  transition: color .2s ease;
}

.nav-item-with-dropdown:hover .nav-link-dropdown {
  color: var(--red);
}

.dropdown-arrow {
  font-size: 12px;
  color: var(--red);
  margin-left: 8px;
  transition: transform .2s ease, color .2s ease;
  display: inline-block;
  opacity: 0.8;
}

.nav-item-with-dropdown:hover .dropdown-arrow {
  transform: translateY(3px);
  opacity: 1;
  color: var(--red);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  min-width: 200px;
  max-height: 500px;
  overflow-y: auto;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, margin-top .25s ease;
  z-index: 100;
  display: none;
}

.nav-item-with-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  display: block;
  margin-top: 8px;
}

.dropdown-menu a {
  display: block;
  padding: 14px 18px;
  color: #202124;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f3f5f8;
  transition: background .2s ease, color .2s ease;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.dropdown-menu a:hover {
  background: #f8f9fa;
  color: var(--red);
  padding-left: 22px;
}

.dropdown-menu a::after {
  display: none;
}


/* Breadcrumb dropdown navigation */
.dropdown-level {
  display: flex;
  flex-direction: column;
}

a.dropdown-item {
  display: block;
  padding: 14px 18px;
  color: #202124;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f3f5f8;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
  cursor: pointer;
  background: transparent;
  text-align: left;
  text-decoration: none;
}

a.dropdown-item:last-child {
  border-bottom: none;
}

a.dropdown-item:hover {
  background: #f8f9fa;
  color: var(--red);
  padding-left: 22px;
}

.dropdown-back {
  display: block;
  width: 100%;
  padding: 14px 18px;
  color: #202124;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid #f3f5f8;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
  text-align: left;
}

.dropdown-back:hover {
  background: #f8f9fa;
  color: var(--red);
  padding-left: 22px;
}


.menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 9px; cursor: pointer; z-index: 21; }
.menu-toggle span { display: block; height: 2px; background: #222; margin: 5px 0; transition: .2s ease; }
.menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(12px, 12px); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }

.hero {
  min-height: 620px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(90deg, #f3f5f8 0 48%, #fff 77%);
}
.hero-video {
  position: absolute;
  inset: 0 auto 0 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -3;
}
.hero-wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,.44) 56%, rgba(255,255,255,.96) 72%, #fff 100%),
    linear-gradient(0deg, rgba(255,255,255,.1), rgba(255,255,255,.1));
}
.hero::after {
  content: "";
  position: absolute;
  right: -180px; bottom: -140px;
  width: 620px; height: 320px;
  background: radial-gradient(ellipse at center, rgba(218,225,232,.55), transparent 68%);
  z-index: -1;
}
.hero-inner { min-height: 620px; position: relative; display: flex; align-items: center; justify-content: flex-end; }
.hero-content { width: 48%; padding-left: 28px; margin-top: -25px; }
.eyebrow {
  margin: 0 0 15px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 14px;
  font-weight: 850;
}
.hero h1 {
  margin: 0;
  font-size: clamp(50px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-transform: uppercase;
  font-weight: 900;
}
.hero-title-line { display: block; white-space: nowrap; }
.hero h1 .hero-title-dark { color: #202124; }
.hero h1 .hero-title-accent { color: var(--red); }
.hero-copy { max-width: 540px; font-size: 17px; line-height: 1.62; margin: 21px 0 29px; color: #45484d; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn {
  min-height: 50px;
  padding: 0 27px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--red); box-shadow: 0 13px 28px rgba(231,25,34,.22); }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 16px 32px rgba(231,25,34,.29); }
.btn-light { background: rgba(255,255,255,.9); border: 1px solid #dddfe3; box-shadow: 0 8px 22px rgba(37,43,54,.06); }
.play { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font-size: 9px; padding-left: 2px; }
.scroll-hint { position: absolute; left: 50%; bottom: 29px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 13px; color: #fff; font-size: 12px; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.mouse { width: 20px; height: 31px; border: 2px solid rgba(255,255,255,.9); border-radius: 12px; position: relative; }
.mouse i { position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; border-radius: 4px; background: #fff; transform: translateX(-50%); animation: wheel 1.5s infinite; }
@keyframes wheel { 0% { opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,9px)} }

.services-section {
  position: relative;
  margin-top: -1px;
  padding: 45px 0 30px;
  border-radius: 44px 44px 0 0;
  background: #fff;
  overflow: hidden;
}
.dot-pattern { position: absolute; top: 20px; width: 270px; height: 250px; opacity: .45; background-image: radial-gradient(#dcdfe4 1.1px, transparent 1.1px); background-size: 7px 7px; mask-image: radial-gradient(ellipse at center, #000 24%, transparent 72%); }
.dot-left { left: 10px; }
.dot-right { right: 10px; }
.section-heading { text-align: center; position: relative; z-index: 1; }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading h2 { margin: 0; font-size: 35px; line-height: 1.1; text-transform: uppercase; letter-spacing: -.025em; }
.heading-mark { display: block; width: 50px; height: 4px; margin: 15px auto 15px; background: linear-gradient(90deg, #d7d7da 50%, var(--red) 50%); border-radius: 10px; }
.section-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.service-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 38px; }
.service-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid #ececee; border-radius: 16px; background: white; overflow: hidden; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; }
.service-card a, .project-card a { cursor: pointer; }
.service-card:hover { transform: translateY(-7px); box-shadow: 0 22px 50px rgba(30,34,42,.14); }
.service-card > img { width: 100%; height: 205px; object-fit: cover; }
.service-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 48px 24px 23px; min-height: 230px; }
.service-icon { position: absolute; left: 24px; top: -20px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--red); color: #fff; box-shadow: 0 8px 18px rgba(231,25,34,.23); }
.service-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-body h3 { margin: 0 0 12px; text-transform: uppercase; font-size: 18px; line-height: 1.18; letter-spacing: .01em; }
.service-body p { margin: 0 0 21px; color: #565b63; font-size: 13px; line-height: 1.55; }
.service-body a { width: fit-content; color: var(--red); font-weight: 800; font-size: 13px; display: inline-flex; gap: 10px; align-items: center; }
.service-body a span { transition: transform .2s; }
.service-body a:hover span { transform: translateX(4px); }

.partners { text-align: center; margin-top: 36px; }
.partners .eyebrow { margin-bottom: 23px; }



@media (max-width: 1100px) {
  .container { width: min(var(--container), calc(100% - 34px)); }
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 13px; }
  .brand { flex-basis: 112px; }
  .brand img { width: auto; height: 78px; }

  .hero-content { width: 49%; }
  .service-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .service-body { padding-inline: 18px; }
  .service-body h3 { font-size: 16px; }
  
  
}

@media (max-width: 900px) {
  .site-header { height: 80px; position: sticky; top: 0; box-shadow: 0 4px 16px rgba(25,28,35,.06); }
  .nav-wrap { gap: 12px; }
  .brand { margin-right: auto; flex-basis: auto; }
  .brand img { width: auto; height: 64px; }

  .menu-toggle { display: block; margin-left: auto; }
  .main-nav { position: absolute; top: 80px; left: 0; right: 0; margin: 0; padding: 16px 24px 24px; background: #fff; display: grid; gap: 0; box-shadow: 0 18px 25px rgba(30,34,42,.10); transform: translateY(-15px); opacity: 0; visibility: hidden; transition: .2s ease; max-height: calc(100vh - 80px); overflow-y: auto; }
  .main-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid #f0f0f1; }
  .main-nav a::after { display: none; }
  
  /* Dropdown mobile styles */
  .nav-item-with-dropdown {
    width: 100%;
  }
  
  .nav-link-dropdown {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f1;
    font-size: 14px;
    font-weight: 650;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background .15s ease, color .15s ease;
  }
  
  .nav-link-dropdown:hover {
    background: rgba(231,25,34,.03);
    color: var(--red);
  }
  
  .dropdown-arrow {
    font-size: 14px !important;
    color: var(--red) !important;
    margin-left: 12px;
    display: block !important;
    flex-shrink: 0;
    transition: transform .2s ease, color .2s ease;
    opacity: 0.85;
  }
  
  .nav-item-with-dropdown.expanded .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
  }
  
  .dropdown-menu {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    display: none !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
  }
  
  .nav-item-with-dropdown.expanded .dropdown-menu {
    opacity: 1;
    visibility: visible;
    display: block !important;
    max-height: 600px;
    overflow-y: visible;
  }

  
  .dropdown-menu a {
    padding: 12px 0 12px 20px;
    border-bottom: 1px solid #f3f5f8;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
  }
  
  .dropdown-menu a:hover {
    color: var(--red);
    background: rgba(231,25,34,.05);
    padding-left: 26px;
  }
  
  /* Submenu mobile */
  
  .hero { min-height: 720px; background: #fff; }
  .hero-video { width: 100%; height: 390px; bottom: auto; object-position: center 48%; }
  .hero-wash { background: linear-gradient(0deg, #fff 4%, rgba(255,255,255,.2) 35%, transparent 58%); }
  .hero-inner { min-height: 720px; align-items: flex-end; justify-content: flex-start; padding-bottom: 72px; }
  .hero-content { width: 100%; padding: 0; margin: 0; background: rgba(255,255,255,.96); border-radius: 22px; padding: 26px; box-shadow: 0 15px 45px rgba(28,32,39,.12); }
  .hero h1 { font-size: clamp(44px, 8vw, 62px); }
  .hero-copy { font-size: 16px; }
  .scroll-hint { display: none; }
  .services-section { border-radius: 30px 30px 0 0; padding-top: 42px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  
}

@media (max-width: 620px) {
  .container { width: min(100% - 24px, var(--container)); }
  .hero { min-height: 690px; }
  .hero-video { height: 335px; object-fit: cover; object-position: 44% center; }
  .hero-inner { min-height: 690px; padding-bottom: 35px; }
  .hero-content { padding: 23px 20px; }
  .eyebrow { font-size: 12px; }
  .hero h1 { font-size: clamp(38px, 11vw, 50px); line-height: 1.02; }
  .hero-copy { margin: 16px 0 22px; font-size: 15px; line-height: 1.55; }
  .hero-actions { gap: 10px; }
  .btn { min-height: 46px; padding-inline: 19px; font-size: 13px; }
  .section-heading h2 { font-size: 28px; }
  .section-heading > p:last-child br { display: none; }
  .service-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .service-card > img { height: 230px; }
  .service-body { min-height: auto; }
  
  
  .dot-pattern { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Banner trang chủ chỉ dùng hình ảnh quảng bá, không chèn chữ hoặc nút lên ảnh. */
.hero { min-height: clamp(340px, 45vw, 620px); background: #eceef1; }
.hero-video { inset: 0; width: 100%; height: 100%; object-position: center; }
.hero-wash, .hero::after, .hero-inner, .hero-content, .scroll-hint { display: none !important; }

@media (max-width: 600px) {
  .hero { min-height: 340px; }
  .hero-video { height: 100%; object-position: 42% center; }
}



/* ---------- Đối tác doanh nghiệp ---------- */
.partners-section {
  padding: 0 0 58px;
  background: #fff;
}
.partners-section .partners {
  margin-top: 0;
}

@media (max-width: 620px) {
  .partners-section {
    padding-bottom: 44px;
  }
}


.partner-marquee {
  position: relative;
  overflow: hidden;
  padding: 10px 0 18px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

.partner-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: partner-scroll 30s linear infinite;
}

.partner-set {
  flex: 0 0 auto;
  display: flex;
  gap: 18px;
  padding-right: 18px;
}

.partner-set span {
  flex: 0 0 220px;
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 16px 22px;
  border: 1px solid #efeff1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(35,40,50,.08);
  color: #85888e;
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -.02em;
  filter: grayscale(1);
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.partner-set span:hover {
  color: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 15px 32px rgba(35,40,50,.12);
}

.partner-marquee:hover .partner-track {
  animation-play-state: paused;
}

@keyframes partner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .partner-set span {
    flex-basis: 190px;
    min-height: 82px;
    font-size: 17px;
  }
}

@media (max-width: 620px) {
  .partner-marquee {
    padding-bottom: 12px;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 8%,
      #000 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 8%,
      #000 92%,
      transparent 100%
    );
  }

  .partner-track {
    animation-duration: 23s;
  }

  .partner-set {
    gap: 12px;
    padding-right: 12px;
  }

  .partner-set span {
    flex-basis: 155px;
    min-height: 70px;
    padding: 12px 16px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .partner-marquee::-webkit-scrollbar {
    display: none;
  }

  .partner-track {
    animation: none !important;
  }

  .partner-set[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Về Loan Trường ---------- */
.about-loan-section {
  position: relative;
  padding: 48px 0 72px;
  background: #fff;
  overflow: hidden;
}

.about-loan-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.22fr);
  gap: 46px;
  align-items: center;
  padding: 54px 50px 62px;
  border: 1px solid #f0f1f2;
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 20%, rgba(234,236,239,.52), transparent 28%),
    #fff;
  box-shadow: 0 16px 46px rgba(30,34,42,.10);
  overflow: hidden;
}

.about-loan-shell::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 17%;
  width: 45%;
  height: 280px;
  opacity: .42;
  pointer-events: none;
  background-image: radial-gradient(#d9dde2 1.1px, transparent 1.1px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 22%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 22%, transparent 72%);
}

.about-loan-copy,
.about-loan-visual {
  position: relative;
  z-index: 1;
}

.about-loan-eyebrow {
  margin: 0;
  color: var(--red);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.about-loan-mark {
  display: block;
  width: 52px;
  height: 3px;
  margin: 15px 0 23px;
  border-radius: 99px;
  background: var(--red);
}

.about-loan-copy h2 {
  margin: 0;
  max-width: 590px;
  font-size: clamp(40px, 4.15vw, 58px);
  line-height: 1.12;
  letter-spacing: -.045em;
  color: #050505;
}

.about-loan-description {
  max-width: 610px;
  margin: 24px 0 0;
  color: #40444a;
  font-size: 14.5px;
  line-height: 1.75;
}

.about-loan-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.about-loan-value {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 16px 10px;
  text-align: center;
  border: 1px solid #e9eaec;
  border-radius: 11px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 18px rgba(30,34,42,.06);
}

.about-loan-value svg {
  width: 38px;
  height: 38px;
  color: var(--red);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-loan-value strong {
  font-size: 13.5px;
  line-height: 1.25;
}

.about-loan-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.about-loan-actions .btn {
  min-height: 48px;
  border: 1px solid #cfd1d5;
}

.about-loan-actions .btn-light {
  background: #fff;
  color: #191a1d;
  box-shadow: none;
}

.about-loan-visual {
  min-width: 0;
  padding-bottom: 56px;
}

.about-loan-photo {
  width: 100%;
  height: 510px;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
}

.about-loan-stats {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 20px 12px;
  border: 1px solid #ececee;
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 35px rgba(30,34,42,.14);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.about-loan-stat {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-rows: 50px 44px;
  align-content: center;
  justify-items: center;
  padding: 0 16px;
  text-align: center;
}

.about-loan-stat:not(:last-child) {
  border-right: 1px solid #e4e5e7;
}

.about-loan-stat strong {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 50px;
  color: var(--red);
  font-size: clamp(25px, 2.05vw, 34px);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.about-loan-stat span {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 112px;
  min-height: 44px;
  margin-top: 10px;
  color: #4a4e54;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .about-loan-shell {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 38px 54px;
  }

  .about-loan-copy h2,
  .about-loan-description {
    max-width: 760px;
  }

  .about-loan-photo {
    height: 480px;
  }
}


@media (max-width: 900px) and (min-width: 701px) {
  .about-loan-stats {
    left: 24px;
    right: 24px;
    padding: 18px 10px;
  }

  .about-loan-stat {
    min-height: 104px;
    grid-template-rows: 46px 42px;
    padding-inline: 10px;
  }

  .about-loan-stat strong {
    font-size: 30px;
  }

  .about-loan-stat span {
    font-size: 11.5px;
  }
}

@media (max-width: 700px) {
  .about-loan-section {
    padding: 34px 0 54px;
  }

  .about-loan-shell {
    gap: 28px;
    padding: 32px 20px 26px;
    border-radius: 21px;
  }

  .about-loan-shell::before {
    display: none;
  }

  .about-loan-copy h2 {
    font-size: 36px;
  }

  .about-loan-description {
    font-size: 14px;
  }

  .about-loan-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-loan-value {
    min-height: 104px;
  }

  .about-loan-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-loan-actions .btn {
    width: 100%;
  }

  .about-loan-visual {
    padding-bottom: 0;
  }

  .about-loan-photo {
    height: 310px;
    border-radius: 16px;
  }

  .about-loan-stats {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: -26px 10px 0;
    padding: 10px;
    border-radius: 14px;
  }

  .about-loan-stat {
    min-height: 104px;
    grid-template-rows: 44px 42px;
    padding: 12px 8px;
  }

  .about-loan-stat:nth-child(2) {
    border-right: 0;
  }

  .about-loan-stat:nth-child(-n+2) {
    border-bottom: 1px solid #e4e5e7;
  }

  .about-loan-stat strong {
    font-size: 27px;
  }

  .about-loan-stat span {
    max-width: 100px;
    margin-top: 9px;
    font-size: 11.5px;
  }
}

/* ---------- Featured projects ---------- */
.projects-section { padding: 58px 0 64px; background: #fff; }
.project-filters { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 30px; margin-top: 38px; }
.filter-tab {
  border: 0; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 750; color: #45484d;
  padding: 12px 22px; border-radius: 999px; transition: background .2s ease, color .2s ease;
}
.filter-tab:hover { color: var(--red); }
.filter-tab.active { background: var(--red); color: #fff; box-shadow: 0 10px 22px rgba(231,25,34,.24); }
.project-carousel { position: relative; margin-top: 34px; }
.project-viewport {
  overflow: hidden;
  padding: 8px 0 20px;
  margin: -8px 0 -20px;
}
.project-track {
  display: flex;
  gap: 22px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.project-card {
  flex: 0 0 calc((100% - 66px) / 4);
  min-width: 0;
  border: 1px solid #ececee; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow); scroll-snap-align: start; transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.project-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(30,34,42,.14); }
.project-media { position: relative; }
.project-media img { width: 100%; height: 190px; object-fit: cover; }
.project-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--red); font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em;
  padding: 7px 13px 7px 8px; border-radius: 999px; box-shadow: 0 8px 18px rgba(20,22,28,.16);
}
.project-badge svg {
  width: 21px; height: 21px; padding: 4px; box-sizing: border-box;
  background: var(--red); color: #fff; border-radius: 50%;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.project-body { padding: 20px 22px 22px; }
.project-body h3 { margin: 0 0 12px; font-size: 17px; line-height: 1.3; }
.project-meta {
  display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  color: #5c6067; font-size: 13.5px;
}
.project-meta svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--red); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.project-body a { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--red); font-weight: 800; font-size: 13.5px; }
.project-body a span { transition: transform .2s; }
.project-body a:hover span { transform: translateX(4px); }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid #ececee;
  background: #fff; color: var(--red); display: grid; place-items: center;
  box-shadow: 0 12px 26px rgba(30,34,42,.14); cursor: pointer; z-index: 2;
  transition: background .2s ease, color .2s ease;
}
.carousel-arrow:hover { background: var(--red); color: #fff; }
.carousel-arrow:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow-left { left: -23px; }
.carousel-arrow-right { right: -23px; }

@media (max-width: 1100px) {
  .project-card { flex-basis: calc((100% - 22px) / 2); }
  .carousel-arrow-left { left: 0; }
  .carousel-arrow-right { right: 0; }
}
@media (max-width: 620px) {
  .project-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .project-viewport::-webkit-scrollbar { display: none; }
  .project-track { transform: none !important; }
  .project-card { flex-basis: 100%; }
  .carousel-arrow { display: none; }
  .project-filters { gap: 8px 16px; }
  .filter-tab { padding: 10px 16px; font-size: 13px; }
}


/* ---------- Featured news ---------- */
.news-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 78px;
  background:
    radial-gradient(circle at 12% 14%, rgba(232,235,239,.38), transparent 23%),
    #fff;
}
.news-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 26px;
  left: 37%;
  width: 47%;
  height: 250px;
  opacity: .48;
  background-image: radial-gradient(#d9dde2 1.15px, transparent 1.15px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 23%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 23%, transparent 72%);
  transform: rotate(-3deg);
}
.news-heading {
  position: relative;
  z-index: 1;
  text-align: center;
}
.news-heading-copy {
  max-width: 760px;
  margin: 0 auto;
}
.news-heading .eyebrow {
  margin-bottom: 12px;
  font-size: 16px;
}
.news-heading h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -.045em;
  color: #050505;
}
.news-heading-copy > h2 + p {
  max-width: 700px;
  margin: 18px 0 0;
  color: #484c52;
  font-size: 15.5px;
  line-height: 1.65;
}
.news-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  color: var(--red);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.news-all:hover { color: #b90f17; }

.news-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 22px;
  margin-top: 34px;
}
.news-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dfe1e5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(30,34,42,.055);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(30,34,42,.12);
}
.news-media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 8 / 5;
  background: #eef0f2;
}
.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.news-card:hover .news-media img { transform: scale(1.035); }
.news-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.news-body h3 {
  min-height: 2.84em;
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.42;
  letter-spacing: -.015em;
}
.news-body h3 a {
  color: #24262a;
  text-decoration: none;
  transition: color .2s ease;
}
.news-body h3 a:hover { color: var(--red); }
.news-date {
  display: none;
  align-items: center;
  gap: 9px;
  margin: 17px 0 0;
  color: #686d74;
  font-size: 13.5px;
}
.news-date svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news-summary {
  display: none;
  margin: 14px 0 0;
  color: #555a61;
  font-size: 13.5px;
  line-height: 1.62;
}
.news-arrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto; /* luôn nằm đáy thẻ: các thẻ cùng hàng thẳng hàng dù tiêu đề 1, 2 hay 3 dòng */
  padding-top: 0;
  color: var(--red);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color .2s ease;
}
.news-arrow:hover { color: #b90f17; }

@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-media { aspect-ratio: 8 / 5; }
}
@media (max-width: 700px) {
  .news-section { padding: 54px 0 58px; }
  .news-section::before { display: none; }
  .news-heading h2 { font-size: 39px; }
  .news-heading-copy > h2 + p { font-size: 14.5px; }
  .news-heading-copy br { display: none; }
  .news-all { margin-top: 10px; }
  .news-grid { margin-top: 28px; }
  .news-media { aspect-ratio: 8 / 5; }
  .news-body h3 { min-height: auto; }
}
@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 84%);
    gap: 16px;
    margin-top: 28px;
    padding: 4px 0 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .news-grid::-webkit-scrollbar { display: none; }
  .news-card { scroll-snap-align: start; scroll-snap-stop: always; }
}

/* ---------- Promo banner ---------- */
.promo-banner { padding: 36px 0 8px; }
.promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: #f6f7f8;
  border-radius: 28px;
  padding: 44px 52px;
  overflow: hidden;
}
.promo-content { display: flex; align-items: flex-start; gap: 22px; max-width: 520px; }
.promo-icon {
  flex: 0 0 68px; width: 68px; height: 68px;
  border-radius: 50%; background: rgba(231,25,34,.09);
  display: grid; place-items: center; color: var(--red);
}
.promo-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.promo-text h2 { margin: 6px 0 14px; font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.promo-text h2 span { color: var(--red); }
.promo-text p { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 400px; }
.promo-image { flex: 1 1 420px; max-width: 46%; height: auto; border-radius: 12px; }

/* ---------- Site footer ---------- */
.site-footer { padding: 52px 0 0; background: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.25fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-logo { display: inline-flex; }
.footer-logo img { width: auto; height: 112px; object-fit: contain; }
.footer-brand p { margin: 16px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 280px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: #4d5158; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }
.footer-socials span { font-size: 11px; font-weight: 800; letter-spacing: -.02em; }

.footer-col h3 { margin: 0 0 18px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.footer-col ul a { font-size: 13.5px; color: #4d5158; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: color .2s ease; }
.footer-col ul a:hover { color: var(--red); }
.footer-col ul a span { color: #c7c9cd; font-size: 15px; }
.footer-product-list li { font-size: 13.5px; color: #4d5158; line-height: 1.4; }

.footer-contact ul { gap: 16px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: #4d5158; line-height: 1.55; }
.footer-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--red); margin-top: 1px; }
.footer-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.footer-bottom { background: #18191c; color: #c7c8cb; padding: 20px 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12.5px; }
.footer-bottom-links { display: flex; align-items: center; gap: 18px; }
.footer-bottom-links a { color: #c7c8cb; }
.footer-bottom-links a:hover { color: #fff; }
.footer-payments { display: flex; gap: 10px; }
.footer-payments span {
  display: grid; place-items: center; min-width: 54px; height: 26px;
  border-radius: 6px; background: #2a2b2f; color: #e7e7e9;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 0 8px;
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 28px 24px; }
  .footer-contact { grid-column: 1 / -1; }
  .promo-inner { padding: 36px; }
}

@media (max-width: 900px) {
  .promo-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .promo-image { max-width: 100%; order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .promo-inner { padding: 26px 22px; border-radius: 20px; }
  .promo-content { flex-direction: column; gap: 16px; }
  .promo-text h2 { font-size: 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-bottom-links { flex-wrap: wrap; }
}


/* Logo Loan Trường mới — ảnh đã cắt khoảng trắng và nhúng trực tiếp vào file */
.brand img, .footer-logo img, .lav-brand img, .lav-footer-logo img {
  flex: 0 0 auto;
  filter: saturate(1.04) contrast(1.02);
}

.service-checklist {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 11px;
  color: #565b63;
  font-size: 13px;
  line-height: 1.5;
}
.service-checklist li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.service-check {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(231,25,34,.10);
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.service-actions {
  width: 100%;
  margin-top: auto;
  display: grid;
  gap: 11px;
  align-items: stretch;
}
.service-detail-link {
  width: 100% !important;
  min-height: 40px;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: #fff;
  color: var(--red) !important;
  box-shadow: 0 7px 17px rgba(30,34,42,.07);
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}
.service-detail-link:hover {
  transform: translateY(-2px);
  background: rgba(231,25,34,.06);
  box-shadow: 0 11px 22px rgba(30,34,42,.10);
}
.service-contact-btn {
  width: 100% !important;
  min-height: 40px;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: var(--red);
  color: #fff !important;
  box-shadow: 0 9px 20px rgba(231,25,34,.20);
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}
.service-contact-btn:hover {
  transform: translateY(-2px);
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 13px 25px rgba(231,25,34,.27);
}

/* =========================================================
   TRANG CON VỀ LOAN TRƯỜNG — DỰNG BẰNG HTML/CSS/JS THẬT
   Ảnh chỉ là ảnh sản phẩm/kho; chữ, timeline, card, số liệu,
   menu và hiệu ứng đều là các phần tử DOM độc lập.
   ========================================================= */
#loan-about-view {
  --lav-red: #e20b17;
  --lav-red-dark: #b9040e;
  --lav-ink: #15171b;
  --lav-muted: #61666e;
  --lav-line: #eceef1;
  --lav-soft: #fff5f5;
  --lav-shell: min(1210px, calc(100% - 48px));
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--lav-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.2,.8,.2,1), visibility .38s;
  font-family: "Be Vietnam Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
#loan-about-view.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
body.loan-about-lock { overflow: hidden; }
#loan-about-view * { box-sizing: border-box; }
#loan-about-view a { color: inherit; text-decoration: none; }
#loan-about-view button { font: inherit; }
#loan-about-view img { display: block; max-width: 100%; }
.lav-page { min-height: 100%; background: #fff; }
.lav-container { width: var(--lav-shell); margin-inline: auto; }

.lav-header {
  position: sticky; top: 0; z-index: 30;
  height: 76px; background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(231,233,237,.92);
  backdrop-filter: blur(15px);
}
.lav-nav { height: 100%; display: flex; align-items: center; gap: 14px; }
.lav-brand { flex: 0 0 112px; display: inline-flex; align-items: center; }
.lav-brand img { height: 66px; width: auto; object-fit: contain; object-position: center; }
.lav-menu { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.lav-menu a { position: relative; padding: 28px 0 25px; font-size: 13px; font-weight: 760; }
.lav-menu a::after { content:""; position:absolute; left:50%; right:50%; bottom:17px; height:2px; border-radius:8px; background:var(--lav-red); transition:.25s ease; }
.lav-menu a:hover, .lav-menu a.is-current { color: var(--lav-red); }
.lav-menu a:hover::after, .lav-menu a.is-current::after { left:0; right:0; }
.lav-mobile-toggle { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:9px; }
.lav-mobile-toggle i { display:block; height:2px; margin:5px 0; background:#17191d; border-radius:4px; transition:.25s; }

.lav-hero { position:relative; min-height:360px; overflow:hidden; border-bottom:1px solid var(--lav-line); background:#fff; }
.lav-hero-media { position:absolute; top:0; right:0; bottom:0; width:64%; overflow:hidden; }
.lav-hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.09); animation:lavHeroZoom 1.5s .12s cubic-bezier(.2,.8,.2,1) forwards; }
.lav-hero-media::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 12%,rgba(255,255,255,.65) 34%,rgba(255,255,255,.08) 66%,rgba(255,255,255,0) 100%); }
.lav-hero-media::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(255,255,255,.18),rgba(255,255,255,0) 42%); }
.lav-hero-inner { min-height:360px; position:relative; z-index:2; display:flex; align-items:center; }
.lav-hero-copy { width:54%; padding:40px 0 45px; }
.lav-breadcrumb { margin:0 0 22px; color:#777b82; font-size:11px; }
.lav-breadcrumb b { color:var(--lav-red); }
.lav-hero h1 { margin:0; font-size:clamp(42px,5.3vw,69px); line-height:1; letter-spacing:-.055em; font-weight:920; opacity:0; transform:translateY(24px); animation:lavRise .75s .16s forwards; }
.lav-hero h1 span { color:var(--lav-red); }
.lav-title-mark { display:block; width:44px; height:3px; margin:20px 0; border-radius:20px; background:var(--lav-red); transform-origin:left; animation:lavGrowX .7s .55s both; }
.lav-hero-copy > p:not(.lav-breadcrumb) { max-width:560px; margin:0; color:#40454c; font-size:14px; line-height:1.7; opacity:0; animation:lavFade .7s .47s forwards; }
.lav-promises { display:flex; gap:28px; flex-wrap:wrap; margin-top:27px; }
.lav-promise { display:grid; grid-template-columns:42px auto; gap:10px; align-items:center; opacity:0; transform:translateY(15px); animation:lavRise .55s forwards; }
.lav-promise:nth-child(1){animation-delay:.58s}.lav-promise:nth-child(2){animation-delay:.68s}.lav-promise:nth-child(3){animation-delay:.78s}
.lav-promise-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--lav-red); background:var(--lav-soft); }
.lav-promise svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lav-promise strong { display:block; font-size:12px; }
.lav-promise small { display:block; max-width:105px; margin-top:4px; color:#656a72; font-size:10.5px; line-height:1.45; }

.lav-section { padding:42px 0; border-bottom:1px solid var(--lav-line); }
.lav-intro-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:68px; align-items:start; }
.lav-eyebrow { margin:0 0 10px; color:var(--lav-red); text-transform:uppercase; font-weight:900; font-size:12px; letter-spacing:.02em; }
.lav-section h2 { margin:0; font-size:clamp(28px,3vw,39px); line-height:1.13; letter-spacing:-.035em; }
.lav-mission > p:not(.lav-eyebrow) { margin:13px 0 0; color:#494e55; font-size:12.5px; line-height:1.7; }
.lav-value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:25px; }
.lav-value-card { min-height:132px; padding:17px 12px 14px; text-align:center; border:1px solid #ededf0; border-radius:9px; background:linear-gradient(145deg,#fff,#fff8f8); box-shadow:0 9px 24px rgba(32,35,43,.055); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.lav-value-card:hover { transform:translateY(-7px); border-color:#ffd2d5; box-shadow:0 18px 34px rgba(32,35,43,.11); }
.lav-value-card svg { width:30px; height:30px; margin:0 auto 11px; color:var(--lav-red); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lav-value-card strong { display:block; font-size:12px; }
.lav-value-card p { margin:7px 0 0; color:#646970; font-size:9.8px; line-height:1.55; }

.lav-roadmap { min-width:0; }
.lav-timeline { position:relative; margin-top:20px; padding-left:4px; }
.lav-timeline-line { position:absolute; left:9px; top:10px; bottom:12px; width:2px; background:#f0c6c8; overflow:hidden; }
.lav-timeline-line::after { content:""; position:absolute; inset:0; background:var(--lav-red); transform:scaleY(0); transform-origin:top; transition:transform 1.35s .2s cubic-bezier(.2,.8,.2,1); }
.lav-roadmap.is-visible .lav-timeline-line::after { transform:scaleY(1); }
.lav-time-item { position:relative; display:grid; grid-template-columns:82px 46px minmax(0,1fr); gap:16px; align-items:center; min-height:63px; padding-left:0; }
.lav-time-item::before { content:""; position:absolute; left:4px; width:12px; height:12px; border-radius:50%; background:var(--lav-red); box-shadow:0 0 0 5px #fff; transform:scale(0); transition:transform .35s ease; }
.lav-roadmap.is-visible .lav-time-item::before { transform:scale(1); }
.lav-roadmap.is-visible .lav-time-item:nth-child(2)::before{transition-delay:.24s}.lav-roadmap.is-visible .lav-time-item:nth-child(3)::before{transition-delay:.46s}.lav-roadmap.is-visible .lav-time-item:nth-child(4)::before{transition-delay:.68s}.lav-roadmap.is-visible .lav-time-item:nth-child(5)::before{transition-delay:.9s}
.lav-year { padding-left:30px; color:var(--lav-red); font-size:21px; letter-spacing:-.03em; }
.lav-time-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--lav-soft); color:var(--lav-red); }
.lav-time-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lav-time-item p { margin:0; color:#444950; font-size:11px; line-height:1.55; }

.lav-facility-grid { display:grid; grid-template-columns:260px minmax(0,1fr) 340px; gap:18px; align-items:center; }
.lav-facility-copy p:not(.lav-eyebrow) { margin:13px 0 19px; color:#4d5259; font-size:11.5px; line-height:1.7; }
.lav-outline-button { display:inline-flex; align-items:center; gap:20px; min-height:42px; padding:0 20px; border:1px solid var(--lav-red); border-radius:6px; color:var(--lav-red); font-size:11px; font-weight:850; transition:.25s ease; }
.lav-outline-button:hover { color:#fff; background:var(--lav-red); transform:translateY(-2px); box-shadow:0 10px 24px rgba(226,11,23,.2); }
.lav-photo-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:8px; }
.lav-photo { position:relative; height:170px; border-radius:6px; overflow:hidden; background:#eceff2; }
.lav-photo img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.lav-photo:hover img { transform:scale(1.07); }
.lav-photo::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); pointer-events:none; }
.lav-stats { display:grid; grid-template-columns:1fr 1fr; gap:28px 24px; }
.lav-stat {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-width:0;
  padding:4px 0;
}
.lav-stat-icon {
  width:56px;
  height:56px;
  margin:0;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:var(--lav-red);
  background:linear-gradient(145deg,#fff 0%,#fff3f4 100%);
  border:1px solid rgba(226,11,23,.12);
  box-shadow:0 10px 25px rgba(226,11,23,.10), inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;
  overflow:hidden;
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.lav-stat-icon::after {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  right:-12px;
  top:-12px;
  border-radius:50%;
  background:rgba(226,11,23,.08);
}
.lav-stat:hover .lav-stat-icon {
  transform:translateY(-3px) rotate(-2deg);
  background:linear-gradient(145deg,#fff 0%,#ffe9eb 100%);
  box-shadow:0 14px 30px rgba(226,11,23,.16), inset 0 1px 0 rgba(255,255,255,.95);
}
.lav-stat-icon svg {
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  position:relative;
  z-index:1;
}
.lav-stat-content { min-width:0; margin:0; }
.lav-stat strong { display:block; color:var(--lav-red); font-size:27px; line-height:1; letter-spacing:-.035em; }
.lav-stat-label { display:block; margin-top:8px; color:#555a61; font-size:10.5px; line-height:1.5; }

.lav-partners { padding:18px 0 20px; overflow:hidden; }
.lav-partners-title { margin:0 0 13px; text-align:center; color:var(--lav-red); font-size:11px; font-weight:900; text-transform:uppercase; }
.lav-partner-mask { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.lav-partner-track { --lav-partner-half-gap:9px; display:flex; width:max-content; gap:18px; animation:lavMarquee 24s linear infinite; }
.lav-partner-mask:hover .lav-partner-track { animation-play-state:paused; }
.lav-partner { flex:0 0 220px; min-height:92px; display:grid; place-items:center; padding:16px 22px; border:1px solid #efeff1; border-radius:14px; background:#fff; box-shadow:0 10px 25px rgba(35,40,50,.08); color:#85888e; font-size:19px; font-weight:850; letter-spacing:-.02em; filter:grayscale(1); transition:color .2s ease, transform .2s ease, box-shadow .2s ease; }
.lav-partner:hover { color:var(--lav-red); filter:none; transform:translateY(-3px); box-shadow:0 15px 32px rgba(35,40,50,.12); }

.lav-cta { padding:0 0 16px; }
.lav-cta-inner { min-height:82px; padding:15px 60px; display:flex; align-items:center; gap:25px; border-radius:6px; color:#fff; background:linear-gradient(110deg,#d4000b,#f21722); position:relative; overflow:hidden; }
.lav-cta-inner::after { content:""; position:absolute; width:260px; height:260px; right:24%; top:-110px; border:1px solid rgba(255,255,255,.11); border-radius:50%; }
.lav-cta-icon { width:54px; height:54px; display:grid; place-items:center; flex:0 0 54px; border:2px solid rgba(255,255,255,.55); border-radius:50%; }
.lav-cta-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lav-cta-copy { position:relative; z-index:1; }
.lav-cta-copy h3 { margin:0; font-size:18px; }
.lav-cta-copy p { margin:5px 0 0; font-size:11px; opacity:.9; }
#loan-about-view .lav-cta-button { margin-left:auto; position:relative; z-index:1; min-width:146px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:0 24px; border-radius:999px; background:#fff; color:var(--lav-red); font-size:12px; line-height:1; font-weight:850; white-space:nowrap; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
#loan-about-view .lav-cta-button span { display:inline-block; color:inherit; font-size:17px; line-height:1; transition:transform .25s ease; }
#loan-about-view .lav-cta-button:hover { color:var(--lav-red-dark); background:#fff; transform:translateY(-3px); box-shadow:0 13px 27px rgba(80,0,0,.22); }
#loan-about-view .lav-cta-button:hover span { transform:translateX(4px); }

.lav-contact li { display:flex; gap:8px; }
.lav-contact b { color:var(--lav-red); }
.lav-copyright { padding:10px 22px 0; border-top:1px solid var(--lav-line); color:#777b82; font-size:9.5px; }

.lav-reveal { opacity:0; transform:translateY(30px); transition:opacity .72s ease, transform .72s cubic-bezier(.2,.8,.2,1); }
.lav-reveal.is-visible { opacity:1; transform:translateY(0); }
.lav-reveal[data-delay="1"]{transition-delay:.1s}.lav-reveal[data-delay="2"]{transition-delay:.2s}.lav-reveal[data-delay="3"]{transition-delay:.3s}

@keyframes lavRise { to { opacity:1; transform:translateY(0); } }
@keyframes lavFade { to { opacity:1; } }
@keyframes lavGrowX { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes lavHeroZoom { to { transform:scale(1); } }
@keyframes lavMarquee { to { transform:translateX(calc(-50% - var(--lav-partner-half-gap))); } }

@media (max-width:900px) {
  .lav-partner { flex-basis:190px; min-height:82px; font-size:17px; }
}
@media (max-width:620px) {
  .lav-partner-track { --lav-partner-half-gap:6px; gap:12px; animation-duration:23s; }
  .lav-partner { flex-basis:155px; min-height:70px; padding:12px 16px; font-size:15px; }
}

@media (max-width:1050px) {
  #loan-about-view { --lav-shell:min(100% - 34px, 960px); }
  .lav-menu { gap:18px; }.lav-menu a{font-size:12px}.lav-brand{flex-basis:100px}
  .lav-intro-grid{gap:36px}.lav-facility-grid{grid-template-columns:230px 1fr}.lav-stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:10px}.lav-stat{grid-template-columns:45px auto}
}
@media (max-width:820px) {
  #loan-about-view { --lav-shell:min(100% - 28px, 720px); }
  .lav-header{height:68px}.lav-brand img{height:56px}.lav-brand{margin-right:auto;flex-basis:auto}
  .lav-mobile-toggle{display:block}
  .lav-menu{position:absolute;top:68px;left:0;right:0;margin:0;padding:12px 20px 20px;background:#fff;border-bottom:1px solid var(--lav-line);display:grid;gap:0;opacity:0;visibility:hidden;transform:translateY(-12px);transition:.22s ease;box-shadow:0 18px 30px rgba(25,29,36,.1)}
  .lav-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}.lav-menu a{padding:13px 0;border-bottom:1px solid #f1f2f4}.lav-menu a::after{display:none}
  .lav-hero{min-height:545px}.lav-hero-media{width:100%;height:300px;bottom:auto}.lav-hero-media::before{background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.15) 47%,transparent 75%)}
  .lav-hero-inner{min-height:545px;align-items:flex-end}.lav-hero-copy{width:100%;padding:280px 0 33px}.lav-hero h1{font-size:47px}.lav-promises{gap:16px}.lav-promise{grid-template-columns:38px auto}.lav-promise-icon{width:38px;height:38px}
  .lav-intro-grid{grid-template-columns:1fr}.lav-value-grid{grid-template-columns:repeat(2,1fr)}.lav-time-item{grid-template-columns:78px 43px 1fr}
  .lav-facility-grid{grid-template-columns:1fr}.lav-photo-grid{margin-top:5px}.lav-photo{height:210px}.lav-stats{grid-template-columns:repeat(2,1fr)}
  .lav-cta-inner{padding:18px 24px;flex-wrap:wrap}.lav-cta-button{margin-left:79px}
}
@media (max-width:540px) {
  #loan-about-view { --lav-shell:min(100% - 22px, 500px); }
  .lav-nav{gap:9px}.lav-brand img{height:48px}.lav-mobile-toggle{width:38px;height:38px;min-height:38px}
  .lav-hero{min-height:590px}.lav-hero-media{height:255px}.lav-hero-copy{padding-top:235px}.lav-hero h1{font-size:39px}.lav-promises{display:grid;grid-template-columns:1fr 1fr}.lav-promise:nth-child(3){grid-column:1/-1}.lav-promise small{max-width:none}
  .lav-section{padding:33px 0}.lav-section h2{font-size:29px}.lav-value-grid{gap:9px}.lav-value-card{min-height:125px}.lav-time-item{grid-template-columns:68px 39px 1fr;gap:8px}.lav-year{font-size:18px;padding-left:25px}.lav-time-icon{width:37px;height:37px}.lav-time-item p{font-size:10.5px}
  .lav-photo-grid{grid-template-columns:1fr}.lav-photo{height:205px}.lav-stats{gap:20px 12px}.lav-stat{grid-template-columns:48px minmax(0,1fr);gap:10px}.lav-stat-icon{width:46px;height:46px;border-radius:14px}.lav-stat-icon svg{width:24px;height:24px}.lav-stat strong{font-size:22px}.lav-stat-label{font-size:10px;margin-top:6px}
  .lav-cta-inner{display:grid;grid-template-columns:52px 1fr;gap:12px}.lav-cta-icon{width:50px;height:50px}.lav-cta-button{grid-column:1/-1;margin:3px 0 0;width:100%}
}
@media (prefers-reduced-motion:reduce) {
  #loan-about-view *, #loan-about-view *::before, #loan-about-view *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   HIỆU ỨNG TRANG CHỦ — nhẹ, hiện đại, không ảnh hưởng trang con
   ========================================================= */
:root { --home-ease: cubic-bezier(.22,.72,.2,1); }

/* Thanh tiến trình cuộn */
.home-scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 99990;
  width: 0;
  height: 3px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(90deg, var(--red-dark), var(--red), #ff5960);
  box-shadow: 0 2px 10px rgba(231,25,34,.32);
  transition: width .09s linear, opacity .2s ease;
  pointer-events: none;
}
body.loan-about-lock .home-scroll-progress { opacity: 0; }

/* Header nổi nhẹ khi cuộn */
.site-header {
  position: sticky;
  top: 0;
  transition: box-shadow .32s ease, background .32s ease, border-color .32s ease;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0);
}
.site-header.home-header-scrolled {
  background: rgba(255,255,255,.91);
  border-bottom-color: rgba(228,230,234,.85);
  box-shadow: 0 12px 32px rgba(27,31,39,.085);
  backdrop-filter: blur(16px) saturate(1.15);
}
.brand img { transition: transform .35s var(--home-ease), filter .35s ease; }
.brand:hover img { transform: translateY(-2px) scale(1.025); filter: saturate(1.12) contrast(1.04); }


/* Hero mở trang */
.hero { --home-hero-x: 0px; --home-hero-y: 0px; }
.hero-video {
  scale: 1.055;
  will-change: clip-path, object-position, translate;
  animation:
    homeHeroReveal 1.15s .08s var(--home-ease) both,
    homeHeroPan 15s 1.2s ease-in-out infinite alternate;
}
.hero-wash::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 11%;
  width: 180px;
  height: 180px;
  opacity: .32;
  background-image: radial-gradient(rgba(231,25,34,.26) 1.15px, transparent 1.15px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle, #000 20%, transparent 72%);
  animation: homeDotFloat 6s ease-in-out infinite alternate;
}
.hero-content {
  transform: translate3d(var(--home-hero-x), var(--home-hero-y), 0);
  transition: transform .5s var(--home-ease);
  will-change: transform;
}
.hero-content .eyebrow { opacity: 0; animation: homeRise .65s .3s var(--home-ease) forwards; }
.hero-content h1 { opacity: 0; animation: homeRise .78s .42s var(--home-ease) forwards; }
.hero-copy { opacity: 0; animation: homeRise .72s .57s var(--home-ease) forwards; }
.hero-actions { opacity: 0; animation: homeRise .72s .7s var(--home-ease) forwards; }
.scroll-hint { animation: homeHintFloat 2.1s 1.2s ease-in-out infinite; }

/* Nút có ánh sáng chạy qua và ripple khi bấm */
.btn { isolation: isolate; }
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  left: -48%;
  width: 34%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: rotate(18deg) translateX(-190%);
  transition: transform .68s var(--home-ease);
}
.btn:hover::before { transform: rotate(18deg) translateX(520%); }
.home-ripple-dot {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  pointer-events: none;
  animation: homeRipple .62s ease-out forwards;
}

/* Reveal theo cuộn — dùng translate riêng để không phá hover transform sẵn có */
html.home-motion-enabled .home-reveal {
  opacity: 0;
  translate: 0 34px;
  filter: blur(4px);
  transition:
    opacity .72s var(--home-ease) var(--home-delay, 0ms),
    translate .72s var(--home-ease) var(--home-delay, 0ms),
    filter .72s ease var(--home-delay, 0ms);
}
html.home-motion-enabled .home-reveal[data-home-direction="left"] { translate: -42px 0; }
html.home-motion-enabled .home-reveal[data-home-direction="right"] { translate: 42px 0; }
html.home-motion-enabled .home-reveal[data-home-direction="scale"] { translate: 0 18px; scale: .975; }
html.home-motion-enabled .home-reveal.is-home-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: blur(0);
}

/* Tiêu đề và đường gạch */
.section-heading .heading-mark,
.about-loan-mark,
.news-heading .heading-mark {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .7s .32s var(--home-ease);
}
.home-reveal.is-home-visible .heading-mark,
.about-loan-copy.is-home-visible .about-loan-mark,
.news-heading.is-home-visible .heading-mark { transform: scaleX(1); }

/* Card tương tác */
.service-card,
.project-card,
.news-card,
.about-loan-value {
  position: relative;
  isolation: isolate;
}
.service-card::after,
.project-card::after,
.news-card::after,
.about-loan-value::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(240px circle at var(--home-mx, 50%) var(--home-my, 50%), rgba(231,25,34,.105), transparent 62%);
  transition: opacity .25s ease;
}
.service-card:hover::after,
.project-card:hover::after,
.news-card:hover::after,
.about-loan-value:hover::after { opacity: 1; }
.service-card > img,
.project-media img,
.news-media img,
.about-loan-photo {
  transition: transform .62s var(--home-ease), filter .45s ease;
}
.service-card:hover > img,
.project-card:hover .project-media img,
.news-card:hover .news-media img { transform: scale(1.055); filter: saturate(1.08) contrast(1.03); }
.service-icon { transition: transform .35s var(--home-ease), box-shadow .35s ease; }
.service-card:hover .service-icon { transform: translateY(-4px) rotate(-5deg) scale(1.06); box-shadow: 0 13px 25px rgba(231,25,34,.31); }
.about-loan-value svg { transition: transform .35s var(--home-ease); }
.about-loan-value:hover svg { transform: translateY(-4px) scale(1.09); }
.about-loan-photo { will-change: transform; }
.about-loan-visual:hover .about-loan-photo { transform: scale(1.018); }

/* Stats có nhịp nhấn khi vừa đếm xong */
.about-loan-stat strong.home-count-finished { animation: homeCountPop .42s var(--home-ease); }

/* Bộ lọc dự án */
.filter-tab { position: relative; overflow: hidden; transition: color .25s ease, background .25s ease, transform .25s var(--home-ease), box-shadow .25s ease; }
.filter-tab:hover { transform: translateY(-2px); }
.filter-tab.active { animation: homeTabPulse .42s var(--home-ease); }
.carousel-arrow { transition: background .2s ease, color .2s ease, transform .25s var(--home-ease), box-shadow .25s ease; }
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 16px 30px rgba(231,25,34,.18); }

/* CTA và footer */
.promo-inner { position: relative; isolation: isolate; }
.promo-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  right: -110px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,25,34,.10), transparent 68%);
  animation: homeCtaFloat 5.5s ease-in-out infinite alternate;
}
.promo-icon { animation: homeIconBreathe 2.8s ease-in-out infinite; }
.footer-col a, .footer-contact li { transition: color .22s ease, translate .22s var(--home-ease); }
.footer-col a:hover { translate: 4px 0; }

@keyframes homeHeroReveal {
  from { clip-path: inset(0 100% 0 0); filter: saturate(.8) brightness(.92); opacity: .4; }
  to { clip-path: inset(0 0 0 0); filter: saturate(1) brightness(1); opacity: 1; }
}
@keyframes homeHeroPan { from { object-position: 46% center; } to { object-position: 54% center; } }
@keyframes homeRise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes homeDotFloat { from { transform:translate3d(0,0,0) rotate(0); } to { transform:translate3d(-14px,18px,0) rotate(8deg); } }
@keyframes homeHintFloat { 0%,100% { transform:translate(-50%,0); opacity:.82; } 50% { transform:translate(-50%,-7px); opacity:1; } }
@keyframes homeRipple { from { opacity:.75; transform:scale(1); } to { opacity:0; transform:scale(18); } }
@keyframes homeCountPop { 0% { scale:.9; } 65% { scale:1.08; } 100% { scale:1; } }
@keyframes homeTabPulse { 0% { scale:.96; } 70% { scale:1.04; } 100% { scale:1; } }
@keyframes homeCtaFloat { from { transform:translate(0,0) scale(1); } to { transform:translate(-35px,28px) scale(1.12); } }
@keyframes homeIconBreathe { 0%,100% { transform:scale(1); box-shadow:none; } 50% { transform:scale(1.07); box-shadow:0 12px 28px rgba(231,25,34,.12); } }

@media (max-width: 900px) {
  .hero-content { transform: none !important; }
  .hero-video { animation: homeHeroReveal 1s .05s var(--home-ease) both, homeHeroPan 14s 1s ease-in-out infinite alternate; }
  .hero-wash::after { width:130px; height:130px; right:-10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-scroll-progress { transition:none; }
  .hero-video, .hero-content .eyebrow, .hero-content h1, .hero-copy, .hero-actions,
  .scroll-hint, .promo-icon, .promo-inner::before, .hero-wash::after { animation:none !important; }
  .hero-content .eyebrow, .hero-content h1, .hero-copy, .hero-actions { opacity:1 !important; transform:none !important; }
  html.home-motion-enabled .home-reveal { opacity:1; translate:0 0; scale:1; filter:none; transition:none; }
  .btn::before { display:none; }
}

/* Dự án tiêu biểu — vừa tự động trình chiếu, vừa giữ nút điều hướng hai bên */
.projects-section .carousel-arrow {
  display: grid !important;
  opacity: 1;
  visibility: visible;
}
.projects-section .carousel-arrow:disabled {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
.project-carousel {
  overflow: visible;
}
.project-track {
  will-change: transform;
}
@media (max-width: 620px) {
  .project-viewport { scroll-behavior: smooth; }
  .projects-section .carousel-arrow {
    width: 38px;
    height: 38px;
    top: 48%;
  }
  .projects-section .carousel-arrow-left { left: 6px; }
  .projects-section .carousel-arrow-right { right: 6px; }
}

/* FIX UX menu Thuê xe nâng: bỏ khe hở hover và cho người dùng thêm thời gian rê chuột xuống submenu */
@media (min-width: 901px) {
  .nav-item-with-dropdown { position: relative; }

  .nav-item-with-dropdown > .dropdown-menu {
    top: 100%;
    margin-top: 0 !important;
  }

  .nav-item-with-dropdown::after {
    content: "";
    position: absolute;
    z-index: 99;
    left: -18px;
    right: -18px;
    top: 100%;
    height: 14px;
  }

  .nav-item-with-dropdown.dropdown-hover-hold > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    display: block;
    margin-top: 0 !important;
  }
}

/* Trang con Khu vực phục vụ — dựng hoàn toàn bằng HTML/CSS/SVG */
body.service-area-lock { overflow: hidden; }
#service-area-view {
  --sav-red: #ed111c;
  --sav-ink: #17191d;
  --sav-muted: #68707a;
  --sav-line: #e8ebef;
  --sav-soft: #f6f7f8;
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: #fff;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
}
#service-area-view.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.sav-page { min-height: 100%; color: var(--sav-ink); background: #fff; }
.sav-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sav-header {
  height: 82px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(228,231,235,.85);
  backdrop-filter: blur(15px);
}
.sav-nav { height: 100%; display: flex; align-items: center; gap: 20px; }
.sav-brand { display: inline-flex; align-items: center; flex: 0 0 116px; }
.sav-brand img { width: auto; height: 70px; object-fit: contain; }
.sav-menu { margin-left: auto; display: flex; align-items: center; gap: 31px; }
.sav-menu a { position: relative; padding: 30px 0 27px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sav-menu a::after { content:""; position:absolute; left:50%; right:50%; bottom:18px; height:3px; border-radius:6px; background:var(--sav-red); transition:.2s ease; }
.sav-menu a:hover, .sav-menu a.is-current { color: var(--sav-red); }
.sav-menu a:hover::after, .sav-menu a.is-current::after { left:0; right:0; }
.sav-mobile-toggle { display:none; width:40px; height:40px; padding:9px; border:0; background:transparent; cursor:pointer; }
.sav-mobile-toggle i { display:block; height:2px; background:#222; margin:5px 0; }

.sav-hero { position: relative; min-height: 290px; overflow: hidden; background: #fff; border-bottom: 1px solid #eff1f3; }
.sav-hero-photo { position:absolute; inset:0 auto 0 0; width:47%; height:100%; object-fit:cover; object-position:center 52%; }
.sav-hero::before {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0 32%, rgba(255,255,255,.16) 40%, #fff 53%, #fff 100%);
}
.sav-hero::after {
  content:""; position:absolute; right:20px; top:20px; width:190px; height:155px; z-index:1; opacity:.55;
  background-image: radial-gradient(circle, rgba(237,17,28,.55) 1px, transparent 1.5px); background-size:13px 13px;
  mask-image: linear-gradient(110deg, transparent 0, #000 48%, #000 100%);
}
.sav-hero-inner { position:relative; z-index:2; min-height:290px; display:flex; justify-content:flex-end; align-items:center; }
.sav-hero-copy { width:58%; padding-left:66px; padding-bottom:8px; }
.sav-breadcrumb { margin:0 0 14px; color:#7a8088; font-size:12px; font-weight:650; }
.sav-breadcrumb b { color:var(--sav-red); }
.sav-hero h1 { margin:0; font-size:clamp(42px,5vw,66px); line-height:.96; letter-spacing:-.045em; text-transform:uppercase; font-weight:900; }
.sav-hero h1 span { color:var(--sav-red); }
.sav-hero-copy > p:not(.sav-breadcrumb) { margin:18px 0 22px; font-size:16px; line-height:1.55; color:#40444a; }
.sav-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.sav-button { min-height:48px; padding:0 25px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--sav-red); border-radius:7px; font-weight:800; font-size:13px; cursor:pointer; transition:.2s ease; }
.sav-button-primary { color:#fff; background:var(--sav-red); box-shadow:0 10px 22px rgba(237,17,28,.19); }
.sav-button-primary:hover { background:#cb0d17; transform:translateY(-1px); }
.sav-button-outline { color:var(--sav-red); background:#fff; }
.sav-button-outline:hover { background:#fff3f4; transform:translateY(-1px); }
.sav-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sav-zalo-ring { width:27px; height:27px; border:1.6px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:900; letter-spacing:-.05em; }

.sav-search-shell { position:relative; z-index:7; margin-top:-19px; }
.sav-search-card { padding:16px 18px 18px; background:rgba(255,255,255,.98); border:1px solid #e5e8ec; border-radius:10px; box-shadow:0 12px 32px rgba(30,35,43,.09); }
.sav-search-title { display:block; margin:0 0 10px; font-size:14px; font-weight:850; }
.sav-search-row { display:grid; grid-template-columns:1fr 1fr 160px; gap:14px; }
.sav-field { position:relative; height:48px; display:flex; align-items:center; gap:10px; border:1px solid #dde2e8; border-radius:7px; padding:0 14px; color:#657080; background:#fff; }
.sav-field:focus-within { border-color:#7d9cff; box-shadow:0 0 0 3px rgba(77,119,255,.1); }
.sav-field svg { flex:0 0 auto; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sav-field input, .sav-field select { width:100%; border:0; outline:0; color:#22252a; background:transparent; font-size:13px; appearance:none; }
.sav-field select { cursor:pointer; }
.sav-region-picker, .sav-service-picker { padding-right:9px; }
.sav-region-picker:focus-within, .sav-service-picker:focus-within { border-color:rgba(237,17,28,.65); box-shadow:0 0 0 3px rgba(237,17,28,.1); }
.sav-region-native, .sav-service-native { position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; opacity:0; pointer-events:none; overflow:hidden; }
.sav-region-trigger, .sav-service-trigger { width:100%; height:100%; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0; border:0; outline:0; background:transparent; color:#22252a; font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.sav-region-trigger-text, .sav-service-trigger-text { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sav-region-chevron, .sav-service-chevron { width:16px !important; height:16px !important; color:#1f2937; transition:transform .2s ease; }
.sav-region-picker.is-open .sav-region-chevron, .sav-service-picker.is-open .sav-service-chevron { transform:rotate(180deg); }
.sav-region-menu, .sav-service-menu { position:absolute; z-index:40; top:calc(100% + 8px); right:-1px; left:-1px; max-height:260px; padding:7px; overflow-y:auto; overscroll-behavior:contain; border:1px solid #e1e5ea; border-radius:11px; background:#fff; box-shadow:0 18px 40px rgba(24,31,42,.16); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s ease; scrollbar-width:thin; scrollbar-color:var(--sav-red) #f1f3f5; }
.sav-region-picker.is-open .sav-region-menu, .sav-service-picker.is-open .sav-service-menu { opacity:1; visibility:visible; transform:translateY(0); }
.sav-region-menu::-webkit-scrollbar, .sav-service-menu::-webkit-scrollbar { width:8px; }
.sav-region-menu::-webkit-scrollbar-track, .sav-service-menu::-webkit-scrollbar-track { margin:7px 0; border-radius:99px; background:#f1f3f5; }
.sav-region-menu::-webkit-scrollbar-thumb, .sav-service-menu::-webkit-scrollbar-thumb { min-height:38px; border:2px solid #f1f3f5; border-radius:99px; background:var(--sav-red); }
.sav-region-menu::-webkit-scrollbar-thumb:hover, .sav-service-menu::-webkit-scrollbar-thumb:hover { background:#c90d17; }
.sav-region-option, .sav-service-option { position:relative; width:100%; min-height:39px; display:block; padding:9px 34px 9px 12px; border:0; border-radius:7px; background:transparent; color:#363b43; font:inherit; font-size:12.5px; line-height:1.35; text-align:left; cursor:pointer; transition:background .15s ease, color .15s ease; }
.sav-region-option:hover, .sav-region-option:focus-visible, .sav-service-option:hover, .sav-service-option:focus-visible { outline:0; background:#fff1f2; color:var(--sav-red); }
.sav-region-option[aria-selected="true"], .sav-service-option[aria-selected="true"] { background:#fff0f1; color:var(--sav-red); font-weight:850; }
.sav-region-option[aria-selected="true"]::after, .sav-service-option[aria-selected="true"]::after { content:"✓"; position:absolute; top:50%; right:12px; transform:translateY(-50%); font-size:13px; font-weight:900; }
.sav-select::after { content:"⌄"; margin-left:auto; color:#101828; font-size:18px; transform:translateY(-2px); }
.sav-search-submit { border:0; border-radius:7px; background:var(--sav-red); color:#fff; font-size:14px; font-weight:850; cursor:pointer; box-shadow:0 10px 20px rgba(237,17,28,.18); transition:.2s ease; }
.sav-search-submit:hover { background:#cb0d17; transform:translateY(-1px); }
.sav-content { padding:26px 0 58px; }
.sav-layout { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(390px,.98fr); column-gap:30px; row-gap:0; align-items:start; }
.sav-area-content { display:contents; }
.sav-area-content > .sav-section-title { grid-column:1; grid-row:1; }
.sav-area-content > .sav-popular-grid { grid-column:1; grid-row:2; }
.sav-area-content > .sav-services-heading { grid-column:1 / -1; grid-row:3; }
.sav-area-content > .sav-services-viewport { grid-column:1 / -1; grid-row:4; }
.sav-section-title { margin:0 0 13px; font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.01em; }
.sav-popular-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:25px; }
.sav-area-card { min-height:105px; padding:11px 10px 9px; border:1px solid #e5e8ec; border-radius:8px; background:#fff; text-align:center; cursor:pointer; transition:.2s ease; }
.sav-area-card:hover, .sav-area-card.is-active { border-color:rgba(237,17,28,.55); box-shadow:0 9px 22px rgba(31,36,43,.09); transform:translateY(-2px); }
.sav-area-icon { height:38px; margin:auto; display:grid; place-items:center; color:var(--sav-red); }
.sav-area-icon svg { width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.sav-area-card strong { display:block; margin:4px 0 8px; font-size:11px; line-height:1.25; }
.sav-area-tags { display:flex; justify-content:center; gap:4px; flex-wrap:wrap; }
.sav-area-tags span { padding:4px 7px; background:#f4f5f6; border-radius:4px; font-size:8px; color:#42474f; }
.sav-services-heading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin:34px 0 26px; text-align:center; }
.sav-services-heading .sav-section-title { margin:0; font-size:clamp(30px,3.5vw,43px); line-height:1.1; letter-spacing:-.035em; text-transform:none; }
.sav-services-actions { display:flex; align-items:center; gap:7px; }
.sav-services-all { margin-right:3px; color:var(--sav-red); font-size:15px; font-weight:850; text-decoration:none; white-space:nowrap; }
.sav-services-all:hover { text-decoration:underline; }
.sav-services-arrow { display:inline-grid; width:28px; height:28px; place-items:center; padding:0; border:1px solid #e0e4e8; border-radius:50%; color:#20242a; background:#fff; font-size:14px; font-weight:800; cursor:pointer; transition:.2s ease; }
.sav-services-arrow:hover:not(:disabled) { color:#fff; border-color:var(--sav-red); background:var(--sav-red); }
.sav-services-arrow:disabled { color:#a9afb7; background:#f5f6f7; cursor:not-allowed; }
.sav-services-arrow[hidden] { display:none; }
.sav-services-viewport { min-width:0; overflow:hidden; }
.sav-services-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 66px)/4); gap:22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; }
.sav-services-grid::-webkit-scrollbar { display:none; }
.sav-service-card { min-width:0; height:auto; border:1px solid #dfe1e5; border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 7px 20px rgba(30,34,42,.055); transition:transform .25s ease, box-shadow .25s ease; }
.sav-services-grid .sav-service-card { scroll-snap-align:start; }
.sav-service-card:hover { transform:translateY(-5px); box-shadow:0 16px 36px rgba(30,34,42,.12); }
.sav-service-card img { display:block; width:100%; height:auto; min-height:0; aspect-ratio:8 / 5; object-fit:cover; }
.sav-service-copy { flex:1; min-height:154px; padding:18px 20px 20px; display:flex; flex-direction:column; }
.sav-service-date, .sav-service-copy p { display:none; }
.sav-service-copy h3 { display:block !important; visibility:visible !important; opacity:1 !important; margin:0; color:#24262a; font-size:18px; line-height:1.42; font-weight:750; letter-spacing:-.015em; }
.sav-service-copy h3 a { display:block; color:inherit; text-decoration:none; transition:color .2s ease; }
.sav-service-copy h3 a:hover { color:var(--sav-red); }
.sav-service-link { margin-top:auto; padding-top:16px; color:var(--sav-red); font-size:15px; line-height:1.35; font-weight:850; text-decoration:none; }
.sav-service-link:hover { color:#b90f17; }

.sav-map-panel { position:relative; top:0; grid-column:2; grid-row:1 / span 2; }
.sav-map-panel .sav-section-title { margin-left:8px; }
.sav-map { height:357px; position:relative; overflow:hidden; border:1px solid #e4e8eb; border-radius:9px; background:#edf2ef; box-shadow:0 8px 22px rgba(29,34,40,.05); }
.sav-map-base, .sav-map-overlay { position:absolute; inset:0; width:100%; height:100%; }
.sav-map-base { z-index:1; }
.sav-map-overlay { z-index:2; overflow:visible; }
.sav-map-area { cursor:pointer; }
.sav-map-line { stroke:var(--sav-red); stroke-width:1.35; opacity:.85; stroke-linecap:round; }
.sav-map-halo { fill:var(--sav-red); opacity:.055; }
.sav-map-center { fill:var(--sav-red); filter:drop-shadow(0 6px 8px rgba(37,43,52,.18)); }
.sav-map-center-ring { fill:#fff; opacity:1; }
.sav-map-center text { fill:#fff; font-size:9px; font-weight:850; text-anchor:middle; }
.sav-map-logo-bg { fill:#fff; }
.sav-map-center-logo image { pointer-events:none; }
.sav-map-pin { fill:var(--sav-red); filter:drop-shadow(0 3px 3px rgba(25,28,32,.23)); transform-box:fill-box; transform-origin:center; transition:transform .2s ease; }
.sav-map-area:hover .sav-map-pin, .sav-map-area.is-active .sav-map-pin { transform:scale(1.16); }
.sav-map-area:focus { outline: none; }
.sav-map-area:focus .sav-map-label { stroke: var(--sav-red); stroke-width: 1.5; }
.sav-map-label { fill:#fff; stroke:#e7e9ec; stroke-width:.8; filter:drop-shadow(0 4px 5px rgba(25,28,32,.14)); }
.sav-map-label-text { fill:#2d3137; font-size:10px; font-weight:750; dominant-baseline:middle; }
.sav-map-legend { position:absolute; z-index:4; left:12px; right:12px; bottom:10px; min-height:34px; padding:7px 10px; background:rgba(255,255,255,.94); border:1px solid #e5e8eb; border-radius:7px; display:flex; align-items:center; justify-content:space-around; gap:12px; font-size:9px; color:#31363d; backdrop-filter:blur(6px); }
.sav-legend-item { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.sav-legend-dot { width:14px; height:14px; border-radius:50%; border:3px solid rgba(237,17,28,.18); background:var(--sav-red); }
.sav-legend-ring { width:14px; height:14px; border:1.5px dashed var(--sav-red); border-radius:50%; }
.sav-legend-pin { width:10px; height:13px; background:var(--sav-red); border-radius:8px 8px 8px 0; transform:rotate(-45deg); }
.sav-map-status { margin:10px 0 0; padding:10px 12px; border-radius:7px; background:#f7f8f9; color:#5c626b; font-size:11px; }
.sav-map-status b { color:var(--sav-red); }

.sav-toast { position:fixed; z-index:1850; left:50%; bottom:24px; transform:translate(-50%,18px); padding:11px 16px; color:#fff; background:#202328; border-radius:7px; font-size:12px; opacity:0; pointer-events:none; transition:.24s ease; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.sav-toast.is-showing { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1080px) {
  .sav-menu { gap:18px; }
  .sav-menu a { font-size:12px; }
  .sav-layout { grid-template-columns:1fr; }
  .sav-area-content { display:block; }
  .sav-services-grid { grid-auto-columns:calc((100% - 22px)/2); }
  .sav-map-panel { position:relative; top:0; grid-column:auto; grid-row:auto; margin-top:30px; }
  .sav-map { height:430px; }
}
@media (max-width: 820px) {
  .sav-container { width:min(calc(100% - 32px), 680px); }
  .sav-header { height:70px; }
  .sav-brand img { height:58px; }
  .sav-menu { position:absolute; top:70px; left:0; right:0; display:grid; gap:0; padding:10px 22px 18px; background:#fff; box-shadow:0 18px 25px rgba(30,34,42,.12); opacity:0; visibility:hidden; transform:translateY(-10px); transition:.2s ease; }
  .sav-menu.is-open { opacity:1; visibility:visible; transform:none; }
  .sav-menu a { padding:13px 0; border-bottom:1px solid #eef0f2; }
  .sav-menu a::after { display:none; }
  .sav-mobile-toggle { display:block; margin-left:auto; }
  .sav-hero { min-height:430px; }
  .sav-hero-photo { width:100%; height:48%; }
  .sav-hero::before { background:linear-gradient(0deg,#fff 0 54%,rgba(255,255,255,.28) 69%,rgba(255,255,255,.04) 100%); }
  .sav-hero-inner { min-height:430px; align-items:flex-end; }
  .sav-hero-copy { width:100%; padding:0 0 31px; }
  .sav-hero h1 { font-size:44px; }
  .sav-search-shell { margin-top:0; }
  .sav-search-row { grid-template-columns:1fr 1fr; }
  .sav-search-submit { grid-column:1 / -1; }
  .sav-search-submit { min-height:48px; }
  .sav-popular-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .sav-container { width:calc(100% - 24px); }
  .sav-brand { flex-basis:92px; }
  .sav-brand img { height:52px; }
  .sav-hero h1 { font-size:37px; }
  .sav-hero-copy > p:not(.sav-breadcrumb) { font-size:14px; }
  .sav-hero-actions { display:grid; }
  .sav-button { width:100%; }
  .sav-search-card { padding:14px; }
  .sav-search-row { grid-template-columns:1fr; }
  .sav-search-row > * { grid-column:1 !important; }
  .sav-region-menu, .sav-service-menu { max-height:230px; }
  .sav-services-heading .sav-section-title { font-size:30px; }
  .sav-services-grid { grid-auto-columns:84%; gap:16px; }
  .sav-map { height:365px; }
  .sav-map-legend { justify-content:flex-start; overflow-x:auto; }
}
@media (prefers-reduced-motion: reduce) {
  #service-area-view, #service-area-view * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}

.lt-floating-buttons {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100100;
}

.lt-floating-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  font-size: 24px;
  transform-origin: 50% 55%;
  animation: lt-contact-wiggle 3.4s ease-in-out infinite;
  will-change: transform;
}

/* Cho 3 nút lắc lệch nhịp để nhìn tự nhiên hơn */
.lt-floating-btn:nth-child(1) { animation-delay: 0s; }
.lt-floating-btn:nth-child(2) { animation-delay: .35s; }
.lt-floating-btn:nth-child(3) { animation-delay: .7s; }

@keyframes lt-contact-wiggle {
  0%, 68%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  72% { transform: translateX(-3px) translateY(-1px) rotate(-8deg) scale(1.03); }
  76% { transform: translateX(3px) translateY(0) rotate(8deg) scale(1.04); }
  80% { transform: translateX(-2px) translateY(-1px) rotate(-6deg) scale(1.03); }
  84% { transform: translateX(2px) translateY(0) rotate(6deg) scale(1.04); }
  88% { transform: translateX(-1px) translateY(0) rotate(-3deg) scale(1.02); }
  92% { transform: translateX(1px) translateY(0) rotate(3deg) scale(1.02); }
  96% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}

.lt-floating-btn:hover {
  animation-play-state: paused;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.lt-floating-btn svg {
  width: 28px;
  height: 28px;
}

.lt-zalo-btn {
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
}

.lt-zalo-btn:hover {
  background: #fff;
}

.lt-zalo-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.lt-sms-btn {
  background: #25d366;
}

.lt-sms-btn:hover {
  background: #1fa254;
}

.lt-call-btn {
  background: #e71922;
}

.lt-call-btn:hover {
  background: #c80f18;
}

@media (max-width: 620px) {
  .lt-floating-buttons {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }

  .lt-floating-btn {
    width: 52px;
    height: 52px;
  }

  .lt-floating-btn svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-floating-btn { animation: none !important; }
}

#loan-about-view .shared-about-header.site-header { z-index: 40; width: 100%; }
#service-area-view .shared-service-header.site-header { z-index: 40; width: 100%; }
#loan-about-view .shared-about-header .nav-wrap { gap: 20px; }
#service-area-view .shared-service-header .nav-wrap { gap: 20px; }
#loan-about-view .shared-about-header .main-nav { gap: 24px; }
#loan-about-view .shared-about-header .main-nav a:hover,
#loan-about-view .shared-about-header .main-nav a.active { color: var(--red); }
#loan-about-view .shared-about-header .main-nav a:hover::after,
#loan-about-view .shared-about-header .main-nav a.active::after { left: 0; right: 0; }
@media (max-width: 1100px) {
  #loan-about-view .shared-about-header .nav-wrap { gap: 14px; }
  #loan-about-view .shared-about-header .main-nav { gap: 14px; }
  #service-area-view .shared-service-header .nav-wrap { gap: 14px; }
  #service-area-view .shared-service-header .main-nav { gap: 14px; }
}
@media (max-width: 900px) {
  #loan-about-view .shared-about-header .nav-wrap { gap: 10px; }
  #loan-about-view .shared-about-header .main-nav { gap: 0; }
  #service-area-view .shared-service-header .nav-wrap { gap: 10px; }
  #service-area-view .shared-service-header .main-nav { gap: 0; }
}

.shared-footer-mount { position: relative; z-index: 1; width: 100%; }
#loan-about-view .shared-footer-mount .site-footer,
#service-area-view .shared-footer-mount .site-footer { color: #17191d; }
#loan-about-view .shared-footer-mount .footer-col ul a,
#service-area-view .shared-footer-mount .footer-col ul a,
#loan-about-view .shared-footer-mount .footer-socials a,
#service-area-view .shared-footer-mount .footer-socials a { color: #4d5158; }
#loan-about-view .shared-footer-mount .footer-col ul a:hover,
#service-area-view .shared-footer-mount .footer-col ul a:hover { color: var(--red); }
#loan-about-view .shared-footer-mount .footer-socials a:hover,
#service-area-view .shared-footer-mount .footer-socials a:hover { color: #fff; }
#loan-about-view .shared-footer-mount .footer-map-call,
#service-area-view .shared-footer-mount .footer-map-call,
#loan-about-view .shared-footer-mount .footer-map-call:hover,
#service-area-view .shared-footer-mount .footer-map-call:hover { color: #fff; }
#loan-about-view .shared-footer-mount .footer-bottom-links a,
#service-area-view .shared-footer-mount .footer-bottom-links a { color: #c7c8cb; }
#loan-about-view .shared-footer-mount .footer-bottom-links a:hover,
#service-area-view .shared-footer-mount .footer-bottom-links a:hover { color: #fff; }

/* Năm trang con dịch vụ dùng chung header/footer được sao chép từ trang chủ. */
body.service-child-lock { overflow: hidden; }
.service-child-view {
  position: fixed;
  inset: 0;
  z-index: 120000;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.service-child-view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.service-child-page { min-height: 100%; display: flex; flex-direction: column; background: #fff; }
.service-child-view .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(236,236,239,.9);
  box-shadow: 0 6px 24px rgba(30,34,42,.05);
}
.service-child-view .service-child-content {
  flex: 1 0 auto;
  min-height: clamp(380px, 58vh, 720px);
  background: #fff;
}
.service-banner {
  --banner-accent: #e71922;
  --banner-dark: #1f2329;
  position: relative;
  width: 100%;
  min-height: clamp(310px, 42vw, 540px);
  overflow: hidden;
  background: var(--banner-dark);
  isolation: isolate;
}
.service-banner-track { position: absolute; inset: 0; }
.service-banner-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .65s ease, transform 1.1s ease, visibility .65s;
}
.service-banner-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.service-banner-slide:nth-child(1) { background: linear-gradient(120deg, var(--banner-dark), color-mix(in srgb, var(--banner-accent) 76%, #111 24%)); }
.service-banner-slide:nth-child(2) { background: radial-gradient(circle at 75% 30%, color-mix(in srgb, var(--banner-accent) 72%, #fff 28%), transparent 30%), linear-gradient(135deg, #17191d, var(--banner-dark)); }
.service-banner-slide:nth-child(3) { background: linear-gradient(115deg, color-mix(in srgb, var(--banner-dark) 88%, #fff 12%) 0 48%, var(--banner-accent) 48% 100%); }
.service-banner-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 80%);
}
.service-banner-placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  color: rgba(255,255,255,.9);
  text-align: center;
}
.service-banner-placeholder svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .82; }
.service-banner-placeholder strong { font-size: clamp(16px, 2vw, 23px); letter-spacing: .01em; }
.service-banner-placeholder span { font-size: 12px; color: rgba(255,255,255,.65); }
.service-banner-control {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  background: rgba(15,17,20,.42);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
}
.service-banner-control:hover { background: var(--banner-accent); transform: translateY(-50%) scale(1.06); }
.service-banner-control svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-banner-prev { left: max(20px, calc((100vw - var(--container)) / 2)); }
.service-banner-next { right: max(20px, calc((100vw - var(--container)) / 2)); }
.service-banner-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 24px;
  display: flex;
  gap: 9px;
  transform: translateX(-50%);
}
.service-banner-dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: transparent; cursor: pointer; transition: width .2s ease, border-radius .2s ease, background .2s ease; }
.service-banner-dot.is-active { width: 28px; border-radius: 999px; background: #fff; }
#dich-vu-thue-xe-nang .service-banner { --banner-accent: #e71922; --banner-dark: #20242a; }
#dich-vu-di-doi-lap-dat-xuong .service-banner { --banner-accent: #f04b23; --banner-dark: #2a211e; }
#dich-vu-rut-container .service-banner { --banner-accent: #1778b8; --banner-dark: #172733; }
#dich-vu-dao-container .service-banner { --banner-accent: #d61b28; --banner-dark: #30343a; }
#dich-vu-boc-xep .service-banner { --banner-accent: #d88916; --banner-dark: #2b261e; }

/* Khung banner riêng của trang Chi tiết dịch vụ */
#chi-tiet-dich-vu .service-banner { --banner-accent: #e71922; --banner-dark: #24272d; }
#tin-tuc .service-banner { --banner-accent: #e71922; --banner-dark: #24272d; min-height: clamp(300px, 34vw, 460px); }

.mp-main { background: #f7f8fa !important; }
.mp-content { padding: 54px 0 74px; }
.mp-container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.mp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; color: #747a83; font-size: 11.5px; }
.mp-breadcrumb button { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.mp-breadcrumb button:hover { color: var(--red); }
.mp-heading { max-width: 780px; margin-bottom: 34px; }
.mp-heading span { color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.mp-heading h2 { margin: 10px 0 13px; font-size: clamp(35px, 5vw, 58px); line-height: 1.04; letter-spacing: -.045em; }
.mp-heading p { margin: 0; color: #666d76; font-size: 13px; line-height: 1.75; }
.mp-feature { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 390px; overflow: hidden; border: 1px solid #e2e5e9; border-radius: 13px; background: #fff; box-shadow: 0 13px 34px rgba(27,31,38,.08); }
.mp-feature-image { min-height: 390px; overflow: hidden; }
.mp-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mp-feature:hover img { transform: scale(1.045); }
.mp-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 52px); }
.mp-chip { width: fit-content; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 4px; background: #fff0f1; color: var(--red); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.mp-feature h3 { margin: 15px 0 13px; font-size: clamp(22px, 2.6vw, 33px); line-height: 1.28; letter-spacing: -.025em; }
.mp-feature-copy > p { margin: 0 0 18px; color: #6b717a; font-size: 12px; line-height: 1.75; }
.mp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #8a9098; font-size: 10.5px; }
.mp-read { width: fit-content; margin-top: 24px; padding: 0; border: 0; background: transparent; color: var(--red); font-size: 11px; font-weight: 850; cursor: pointer; transition: transform .2s ease; }
.mp-read:hover { transform: translateX(4px); }
.mp-toolbar { margin: 48px 0 21px; }
.mp-toolbar h3 { margin: 0; padding-left: 13px; border-left: 4px solid var(--red); font-size: 20px; text-transform: uppercase; }
.mp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.mp-card { min-width: 0; display: grid; grid-template-columns: 41% 59%; min-height: 190px; overflow: hidden; border: 1px solid #e2e6ea; border-radius: 11px; background: #fff; box-shadow: 0 8px 25px rgba(27,31,38,.055); transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; }
.mp-card:hover { transform: translateY(-5px); border-color: rgba(231,25,34,.18); box-shadow: 0 17px 36px rgba(27,31,38,.11); }
.mp-card-image { min-height: 190px; overflow: hidden; }
.mp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mp-card:hover img { transform: scale(1.055); }
.mp-card-copy { min-width: 0; display: flex; flex-direction: column; padding: 20px; }
.mp-card h3 { margin: 11px 0 10px; font-size: 14px; line-height: 1.45; }
.mp-card-copy > p { display: -webkit-box; margin: 0 0 15px; overflow: hidden; color: #707680; font-size: 10.5px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mp-card .mp-meta { margin-top: auto; }
.mp-pagination { display: flex; justify-content: center; gap: 7px; margin-top: 40px; }
.mp-page { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #dfe3e7; border-radius: 7px; background: #fff; color: #50565f; cursor: pointer; transition: .2s ease; }
.mp-page:hover, .mp-page.is-active { border-color: var(--red); background: var(--red); color: #fff; transform: translateY(-2px); }
.pillar-view.mp-motion-ready .mp-reveal { opacity: 0; translate: 0 23px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--mp-delay, 0ms); }
.pillar-view.mp-motion-ready .mp-reveal.is-mp-visible { opacity: 1; translate: 0 0; }
@media (max-width: 980px) {
  .mp-feature { grid-template-columns: 1fr; }
  .mp-feature-image { min-height: 330px; }
  .mp-card { grid-template-columns: 38% 62%; }
}
@media (max-width: 720px) {
  .mp-content { padding: 38px 0 52px; }
  .mp-container { width: min(100% - 28px, var(--container)); }
  .mp-feature-image { min-height: 245px; }
  .mp-feature-copy { padding: 25px 21px 28px; }
  .mp-grid { grid-template-columns: 1fr; }
  .mp-card { grid-template-columns: 39% 61%; min-height: 165px; }
  .mp-card-image { min-height: 165px; }
  .mp-card-copy { padding: 15px; }
  .mp-card h3 { margin-top: 8px; font-size: 12.5px; }
}
@media (max-width: 520px) {
  .mp-card { grid-template-columns: 1fr; }
  .mp-card-image { min-height: 205px; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-view.mp-motion-ready .mp-reveal { opacity: 1; translate: 0 0; transition: none; }
  .mp-feature img, .mp-card, .mp-card img, .mp-read, .mp-page { transition: none; }
}


/* Trang con Tin tức */
.nth-main { background: #f7f8fa !important; }
.nth-content { padding: 58px 0 72px; }
.nth-container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.nth-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #767b83; font-size: 12px; }
.nth-breadcrumb button { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.nth-breadcrumb button:hover { color: var(--red); }
.nth-page-title { margin: 0 0 42px; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.045em; }
.nth-page-title::after { content: ""; display: block; width: 42px; height: 4px; margin-top: 17px; border-radius: 99px; background: var(--red); }
.nth-section { margin-top: 58px; }
.nth-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.nth-section-title { margin: 0; padding-left: 13px; border-left: 4px solid var(--red); font-size: 21px; line-height: 1.2; text-transform: uppercase; letter-spacing: -.015em; }
.nth-section-link { border: 0; background: transparent; color: var(--red); font-size: 12px; font-weight: 850; cursor: pointer; }
.nth-featured-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 14px; }
.nth-feature-lead, .nth-feature-small, .nth-card, .nth-case, .nth-list-item { overflow: hidden; border: 1px solid #e5e8ec; border-radius: 12px; background: #fff; box-shadow: 0 8px 26px rgba(27,31,38,.055); }
.nth-feature-lead { position: relative; min-height: 420px; }
.nth-feature-lead img { width: 100%; height: 100%; object-fit: cover; }
.nth-feature-lead::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(10,12,15,.92)); }
.nth-feature-lead-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 30px; color: #fff; }
.nth-chip { width: fit-content; display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 4px; background: var(--red); color: #fff; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.nth-feature-lead h2 { margin: 13px 0 10px; max-width: 610px; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.25; }
.nth-meta { display: flex; align-items: center; gap: 7px; color: #858b94; font-size: 10.5px; }
.nth-feature-lead .nth-meta { color: rgba(255,255,255,.75); }
.nth-feature-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nth-feature-small { display: flex; flex-direction: column; min-width: 0; }
.nth-feature-small img { width: 100%; height: 138px; object-fit: cover; }
.nth-feature-small-copy { flex: 1; display: flex; flex-direction: column; padding: 14px 15px 15px; }
.nth-feature-small h3 { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; }
.nth-feature-small .nth-meta { margin-top: auto; }
.nth-category-bar { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(max-content, 1fr)); gap: 6px; margin-top: 20px; padding: 8px; overflow-x: auto; border: 1px solid #e2e5e9; border-radius: 11px; background: #fff; box-shadow: 0 9px 24px rgba(28,32,38,.06); }
.nth-category-btn { min-height: 42px; padding: 0 15px; border: 0; border-radius: 7px; background: transparent; color: #3b3f45; font-size: 11.5px; font-weight: 760; white-space: nowrap; cursor: pointer; transition: .2s ease; }
.nth-category-btn:hover, .nth-category-btn.is-active { background: var(--red); color: #fff; }
.nth-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nth-card-grid.nth-dynamic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nth-feature-lead > a, .nth-card > a { display: block; color: inherit; text-decoration: none; }
.nth-feature-lead > a { height: 100%; min-height: inherit; }
.nth-card { min-width: 0; transition: transform .22s ease, box-shadow .22s ease; }
.nth-card:hover { transform: translateY(-4px); box-shadow: 0 15px 34px rgba(27,31,38,.1); }
.nth-card img { width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover; }
.nth-card-copy { padding: 17px; }
.nth-card h3 { margin: 0 0 13px; font-size: 14px; line-height: 1.5; }
.nth-advice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; }
.nth-quote-card { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: 30px 26px; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, var(--red), #bd0811); color: #fff; }
.nth-quote-card::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 180px; height: 180px; border: 26px solid rgba(255,255,255,.08); border-radius: 50%; }
.nth-quote-card svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nth-quote-card h3 { margin: 20px 0 10px; font-size: 25px; }
.nth-quote-card p { margin: 0 0 22px; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.65; }
.nth-quote-card a { position: relative; z-index: 1; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: #fff; color: var(--red); font-size: 12px; font-weight: 850; }
.nth-case { display: grid; grid-template-columns: 1.12fr .95fr; }
.nth-case > img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.nth-case-copy { padding: 35px; }
.nth-case-copy h3 { margin: 0 0 15px; font-size: 24px; line-height: 1.4; }
.nth-case-copy > p { margin: 0; color: #686e77; font-size: 13px; line-height: 1.75; }
.nth-case-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; padding-top: 23px; border-top: 1px solid #eceef1; }
.nth-case-fact { min-width: 0; }
.nth-case-fact strong { display: block; margin-bottom: 5px; color: var(--red); font-size: 11px; }
.nth-case-fact span { color: #555b64; font-size: 10.5px; line-height: 1.45; }
.nth-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.nth-list { display: grid; gap: 10px; }
.nth-list-item { display: grid; grid-template-columns: 122px 1fr; min-height: 95px; }
.nth-list-item img { width: 100%; height: 100%; object-fit: cover; }
.nth-list-copy { padding: 13px 15px; }
.nth-list-copy h3 { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; }

/* Chuyển động riêng cho trang Tin tức. Chỉ ẩn phần tử sau khi JavaScript sẵn sàng,
   vì vậy nội dung vẫn hiển thị đầy đủ nếu trình duyệt tắt JavaScript. */
#tin-tuc.nth-motion-ready .nth-reveal { opacity: 0; translate: 0 24px; filter: blur(3px); transition: opacity .62s cubic-bezier(.2,.7,.2,1), translate .62s cubic-bezier(.2,.7,.2,1), filter .62s ease; transition-delay: var(--nth-delay, 0ms); }
#tin-tuc.nth-motion-ready .nth-reveal[data-nth-direction="left"] { translate: -28px 0; }
#tin-tuc.nth-motion-ready .nth-reveal[data-nth-direction="right"] { translate: 28px 0; }
#tin-tuc.nth-motion-ready .nth-reveal[data-nth-direction="scale"] { translate: 0 12px; scale: .975; }
#tin-tuc.nth-motion-ready .nth-reveal.is-nth-visible { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
#tin-tuc.nth-motion-ready .nth-page-title::after { transform: scaleX(0); transform-origin: left; transition: transform .7s .22s cubic-bezier(.2,.8,.2,1); }
#tin-tuc.nth-motion-ready .nth-page-title.is-nth-visible::after { transform: scaleX(1); }
.nth-feature-lead, .nth-feature-small, .nth-case, .nth-list-item { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.nth-feature-lead img, .nth-feature-small img, .nth-card img, .nth-case > img, .nth-list-item img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.nth-feature-lead:hover, .nth-feature-small:hover, .nth-case:hover, .nth-list-item:hover { transform: translateY(-5px); border-color: rgba(231,25,34,.18); box-shadow: 0 18px 38px rgba(27,31,38,.12); }
.nth-feature-lead:hover img, .nth-feature-small:hover img, .nth-card:hover img, .nth-case:hover > img, .nth-list-item:hover img { transform: scale(1.045); filter: saturate(1.06); }
.nth-category-btn { position: relative; overflow: hidden; }
.nth-category-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(231,25,34,.16); }
.nth-category-btn:active { transform: scale(.96); }
.nth-section-link { transition: transform .2s ease, color .2s ease; }
.nth-section-link:hover { transform: translateX(4px); }
.nth-quote-card::before { content: ""; position: absolute; z-index: 1; top: -35%; bottom: -35%; left: -42%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-18deg); transition: left .7s ease; }
.nth-quote-card:hover::before { left: 118%; }
.nth-quote-card a { transition: transform .22s ease, box-shadow .22s ease; }
.nth-quote-card a:hover { transform: translateY(-2px); box-shadow: 0 10px 23px rgba(70,0,4,.22); }
@media (max-width: 980px) {
  .nth-featured-grid, .nth-case { grid-template-columns: 1fr; }
  .nth-feature-lead { min-height: 380px; }
  .nth-advice-layout { grid-template-columns: 1fr; }
  .nth-quote-card { min-height: 230px; }
  .nth-case > img { min-height: 300px; }
}
@media (max-width: 720px) {
  .nth-content { padding: 38px 0 52px; }
  .nth-container { width: min(100% - 28px, var(--container)); }
  .nth-page-title { margin-bottom: 30px; }
  .nth-feature-side, .nth-card-grid, .nth-split { grid-template-columns: 1fr; }
  .nth-feature-lead { min-height: 340px; }
  .nth-feature-small { display: grid; grid-template-columns: 38% 62%; }
  .nth-feature-small img { height: 100%; min-height: 130px; }
  .nth-category-bar { display: flex; }
  .nth-category-btn { flex: 0 0 auto; }
  .nth-case-copy { padding: 24px 20px; }
  .nth-case-facts { grid-template-columns: repeat(2, 1fr); }
  .nth-section { margin-top: 44px; }
  .nth-section-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #tin-tuc.nth-motion-ready .nth-reveal,
  #tin-tuc.nth-motion-ready .nth-reveal[data-nth-direction] { opacity: 1; translate: 0 0; scale: 1; filter: none; transition: none; }
  #tin-tuc.nth-motion-ready .nth-page-title::after { transform: scaleX(1); transition: none; }
  .nth-feature-lead, .nth-feature-small, .nth-card, .nth-case, .nth-list-item,
  .nth-feature-lead img, .nth-feature-small img, .nth-card img, .nth-case > img, .nth-list-item img,
  .nth-category-btn, .nth-section-link, .nth-quote-card a { transition: none; }
  .nth-quote-card::before { display: none; }
}
.service-child-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.service-child-view .site-footer { flex: 0 0 auto; }
@media (max-width: 1100px) {
  .service-child-view .nav-wrap { gap: 16px; }
  .service-child-view .main-nav { gap: 18px; }
}
@media (max-width: 900px) {
  .service-child-view .site-header { height: 80px; }
  .service-child-view .nav-wrap { gap: 10px; }
  .service-child-view .brand { flex-basis: 104px; }
  .service-child-view .brand img { height: 72px; }
  .service-child-view .main-nav { top: 80px; gap: 0; }
  .service-banner { min-height: clamp(280px, 64vw, 430px); }
  .service-banner-control { width: 38px; height: 38px; }
  .service-banner-prev { left: 14px; }
  .service-banner-next { right: 14px; }
  .service-banner-dots { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-child-view, .service-child-view * { scroll-behavior: auto !important; transition: none !important; }
}

/* Các hero của trang Giới thiệu và Khu vực cũng tách chữ xuống dưới ảnh banner. */
.lav-hero, .sav-hero { min-height: 0; overflow: visible; }
.lav-hero-media { position: relative; inset: auto; width: 100%; height: clamp(300px, 34vw, 460px); }
.lav-hero-media::before, .lav-hero-media::after, .sav-hero::before, .sav-hero::after { display: none; }
.lav-hero-inner, .sav-hero-inner { min-height: 0; align-items: initial; justify-content: initial; }
.lav-hero-copy, .sav-hero-copy { width: 100%; padding: 42px 0; }
.sav-hero-photo { position: relative; inset: auto; display: block; width: 100%; height: clamp(300px, 34vw, 460px); object-position: center; }
.sav-hero-banner { width: 100%; }
.sav-hero-banner .service-banner { --banner-accent: var(--sav-red); min-height: clamp(300px, 34vw, 460px); }

@media (max-width: 600px) {
  .lav-hero-media, .sav-hero-photo { height: 300px; }
  .lav-hero-copy, .sav-hero-copy { padding: 30px 0; }
  .sav-hero-banner .service-banner { min-height: 300px; }
}

/* ===== Khu vực phục vụ v2.8.20: bản đồ bãi xe + bán kính 10 km ===== */
#service-area-view .sav-content { padding-top: 22px; }
#service-area-view .sav-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
#service-area-view .sav-area-content { display: contents; }
#service-area-view .sav-area-content > .sav-services-heading {
  grid-column: 1;
  grid-row: 2;
}
#service-area-view .sav-area-content > .sav-services-viewport {
  grid-column: 1;
  grid-row: 3;
}
#service-area-view .sav-map-panel {
  position: relative;
  top: 0;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
}
#service-area-view .sav-map-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 12px;
}
#service-area-view .sav-map-panel .sav-section-title {
  margin: 0 0 4px;
  font-size: 15px;
}
#service-area-view .sav-map-intro {
  margin: 0;
  color: #68707a;
  font-size: 12px;
  line-height: 1.5;
}
#service-area-view .sav-map-intro b { color: #353a41; }
#service-area-view .sav-map-radius-badge {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(237,17,28,.28);
  border-radius: 999px;
  color: var(--sav-red);
  background: #fff4f5;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
#service-area-view .sav-map {
  height: 455px;
  border-radius: 12px;
  border-color: #e1e5e9;
  background: #f3f4f2;
  box-shadow: 0 12px 30px rgba(29,34,40,.07);
}
#service-area-view .sav-map-base,
#service-area-view .sav-map-overlay {
  width: 100%;
  height: 100%;
}
#service-area-view .sav-map-radius-fill {
  fill: rgba(237,17,28,.055);
}
#service-area-view .sav-map-radius-ring {
  fill: none;
  stroke: rgba(237,17,28,.48);
  stroke-width: 2;
  stroke-dasharray: 7 6;
}
#service-area-view .sav-map-radius-text {
  fill: var(--sav-red);
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
  letter-spacing: .04em;
}
#service-area-view .sav-map-yard-halo {
  fill: rgba(237,17,28,.08);
}
#service-area-view .sav-map-yard-ring {
  fill: #fff;
  stroke: rgba(237,17,28,.28);
  stroke-width: 2;
  filter: drop-shadow(0 8px 11px rgba(31,36,43,.16));
}
#service-area-view .sav-map-yard-bg { fill: #fff; }
#service-area-view .sav-map-yard { transform-box: fill-box; transform-origin: center; }
#service-area-view .sav-map-yard.is-active .sav-map-yard-halo {
  fill: rgba(237,17,28,.16);
}
#service-area-view .sav-map-yard.is-active .sav-map-yard-ring {
  stroke: var(--sav-red);
  filter: drop-shadow(0 0 8px rgba(237,17,28,.42)) drop-shadow(0 8px 11px rgba(31,36,43,.16));
}
#service-area-view .sav-map-yard-label {
  fill: rgba(255,255,255,.97);
  stroke: rgba(237,17,28,.2);
  stroke-width: 1;
  filter: drop-shadow(0 5px 7px rgba(25,28,32,.12));
}
#service-area-view .sav-map-yard-label-text {
  fill: #292d33;
  font-size: 11px;
  font-weight: 850;
  dominant-baseline: middle;
}
#service-area-view .sav-map-area {
  cursor: default;
  pointer-events: none;
}
#service-area-view .sav-map-area .sav-map-pin {
  opacity: .78;
  transition: transform .22s ease, opacity .22s ease, filter .22s ease;
}
#service-area-view .sav-map-area .sav-map-label,
#service-area-view .sav-map-area .sav-map-label-text {
  transition: opacity .22s ease, stroke .22s ease, fill .22s ease;
}
#service-area-view .sav-map-pulse,
#service-area-view .sav-map-active-ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
#service-area-view .sav-map-pulse { fill: rgba(237,17,28,.12); }
#service-area-view .sav-map-active-ring {
  fill: none;
  stroke: rgba(237,17,28,.55);
  stroke-width: 2;
}
#service-area-view .sav-map.has-selection .sav-map-area:not(.is-active) .sav-map-pin { opacity: .34; }
#service-area-view .sav-map.has-selection .sav-map-area:not(.is-active) .sav-map-label,
#service-area-view .sav-map.has-selection .sav-map-area:not(.is-active) .sav-map-label-text { opacity: .62; }
#service-area-view .sav-map-area.is-active .sav-map-pin {
  opacity: 1;
  transform: scale(1.32);
  filter: drop-shadow(0 0 7px rgba(237,17,28,.68)) drop-shadow(0 6px 6px rgba(25,28,32,.2));
}
#service-area-view .sav-map-area.is-active .sav-map-label {
  stroke: var(--sav-red);
  stroke-width: 1.4;
}
#service-area-view .sav-map-area.is-active .sav-map-label-text {
  fill: var(--sav-red);
  font-weight: 900;
}
#service-area-view .sav-map-area.is-active .sav-map-active-ring { opacity: 1; }
#service-area-view .sav-map-area.is-active .sav-map-pulse {
  opacity: 1;
  animation: sav-map-pulse 1.65s ease-out infinite;
}
@keyframes sav-map-pulse {
  0% { transform: scale(.75); opacity: .5; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}
#service-area-view .sav-map-label-text {
  font-size: 10.5px;
  font-weight: 780;
}
#service-area-view .sav-map-legend {
  left: 18px;
  right: 18px;
  bottom: 14px;
  min-height: 40px;
  justify-content: center;
  gap: clamp(18px, 4vw, 52px);
  font-size: 10px;
}
#service-area-view .sav-legend-yard {
  width: 14px;
  height: 14px;
  border: 4px solid rgba(237,17,28,.15);
  border-radius: 50%;
  background: var(--sav-red);
}
#service-area-view .sav-map-status {
  margin-top: 11px;
  padding: 12px 14px;
  border: 1px solid #eceef1;
  border-radius: 9px;
  background: #f8f9fa;
  font-size: 11.5px;
  line-height: 1.55;
}
#service-area-view .sav-map-note {
  margin: 7px 2px 0;
  color: #8a9098;
  font-size: 9.5px;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  #service-area-view .sav-map-panel { margin-top: 0; }
  #service-area-view .sav-map { height: 430px; }
}
@media (max-width: 820px) {
  #service-area-view .sav-map-heading-row { align-items: flex-start; }
  #service-area-view .sav-map { height: 405px; }
  #service-area-view .sav-map-legend {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
  }
}
@media (max-width: 560px) {
  #service-area-view .sav-content { padding-top: 18px; }
  #service-area-view .sav-map-heading-row { display: block; }
  #service-area-view .sav-map-radius-badge {
    display: inline-flex;
    margin-top: 8px;
    padding: 6px 10px;
  }
  #service-area-view .sav-map { height: 270px; }
  #service-area-view .sav-map-intro { font-size: 11px; }
  #service-area-view .sav-map-status { font-size: 11px; }
  #service-area-view .sav-map-note { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #service-area-view .sav-map-area.is-active .sav-map-pulse { animation: none; opacity: .35; }
}

/* v2.8.20 DOM order: map trước, bài khu vực sau */
#service-area-view .sav-layout { display: block; }
#service-area-view .sav-area-content { display: block; min-width: 0; }
#service-area-view .sav-map-panel { display: block; }


/* ==========================================================
   SERVICE AREA MAP — HIỂN THỊ TRỌN BẢN ĐỒ TRÊN MOBILE v1
   Khung bản đồ có tỉ lệ khớp viewBox do front-page.js đặt, nên không bị cắt phần đầu.
   ========================================================== */
@media (max-width: 820px) {
  #service-area-view .sav-map {
    height: auto;
    aspect-ratio: 620 / 430;
  }
}

@media (max-width: 560px) {
  #service-area-view .sav-map {
    aspect-ratio: 504 / 430;
  }

  /* Bản đồ thu nhỏ để vừa màn hình nên phóng to nhãn phường quanh đầu pin cho dễ đọc */
  #service-area-view .sav-map-area .sav-map-label,
  #service-area-view .sav-map-area .sav-map-label-text {
    transform: scale(1.25);
  }

  #service-area-view .sav-map-radius-text {
    font-size: 15px;
  }
}


/* ==========================================================
   LOAN TRUONG - HOME SERVICES REFRESH (v41)
   Grid 3+2 centered; sizing in keeping with site's 1120px shell.
   Applies to both WordPress service posts and built-in fallbacks.
   ========================================================== */
.services-section {
  padding: 55px 0 66px;
  background:
    radial-gradient(ellipse 45% 38% at 0% 100%, rgba(231,25,34,.035), transparent 80%),
    radial-gradient(ellipse 43% 38% at 100% 100%, rgba(231,25,34,.035), transparent 80%),
    #fff;
}
.services-section .section-heading {
  max-width: 900px;
  margin: 0 auto;
}
.services-section .section-heading h2,
#services #services-title {
  color: #202124;
  font-size: clamp(25px, 2.55vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.services-section .heading-mark {
  width: 96px;
  height: 4px;
  margin: 13px auto 16px;
  background: linear-gradient(90deg, #d6d8dc 0 33%, var(--red) 33% 67%, #d6d8dc 67%);
}
.services-section .section-heading > p:last-child {
  font-size: 14px;
  line-height: 1.65;
}
.services-section .service-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 18px;
  margin-top: 32px;
}
.services-section .service-grid > .service-card {
  grid-column: span 2;
  border: 1px solid #e8e9ec;
  border-radius: 18px;
  box-shadow: 0 6px 21px rgba(30,34,42,.075);
  overflow: hidden;
  cursor: default;
}
/* Only center the bottom row when there are exactly five cards. */
.services-section .service-grid > .service-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.services-section .service-grid > .service-card:nth-child(5):last-child { grid-column: 4 / span 2; }
.services-section .service-card > img {
  width: 100%;
  height: 174px;
  object-fit: cover;
}
.services-section .service-body {
  min-height: 212px;
  padding: 32px 19px 18px;
}
.services-section .service-icon {
  left: 19px;
  top: -21px;
  width: 43px;
  height: 43px;
  border-radius: 11px;
}
.services-section .service-body h3 {
  margin: 0 0 11px;
  font-size: 16px;
  line-height: 1.34;
  letter-spacing: -.012em;
  font-weight: 800;
  text-transform: uppercase;
}
.services-section .service-checklist {
  gap: 7px;
  margin-bottom: 17px;
  font-size: 12.5px;
  line-height: 1.55;
}
.services-section .service-actions {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin-top: auto;
}
.services-section .service-body .service-actions a {
  width: 100%;
  min-width: 0;
  min-height: 37px;
  padding: 7px 8px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: none;
}
.services-section .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 13px 30px rgba(30,34,42,.12);
}
@media (max-width: 900px) {
  .services-section { padding: 45px 0 55px; }
  .services-section .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
  .services-section .service-grid > .service-card,
  .services-section .service-grid > .service-card:nth-child(4):nth-last-child(2),
  .services-section .service-grid > .service-card:nth-child(5):last-child { grid-column: auto; }
  .services-section .service-card > img { height: 185px; }
}
@media (max-width: 620px) {
  .services-section { padding: 38px 0 45px; }
  .services-section .section-heading h2 { font-size: clamp(23px, 6vw, 28px); }
  .services-section .section-heading > p:last-child { font-size: 13px; }
  .services-section .service-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 25px; }
  .services-section .service-card > img { height: clamp(185px, 53vw, 230px); }
  .services-section .service-body { min-height: 0; padding: 32px 19px 18px; }
  .services-section .service-body h3 { font-size: 16px; }
  .services-section .service-checklist { font-size: 13px; }
  .services-section .service-body .service-actions a { min-height: 40px; font-size: 12px; }
}
@media (max-width: 360px) {
  .services-section .service-actions { gap: 7px; }
  .services-section .service-body .service-actions a { font-size: 11px; padding-inline: 5px; }
}