/* ===================================================================
   TÂN TIẾN VIỆT VENDING — VANILLA CSS
   Quy ước đặt tên: block-element--modifier (BEM)
   Quy ước class section: {ten-trang}-row{thu-tu}-{ten-box}
   Thứ tự viết: từ class ngoài cùng (section/container) vào bên trong
   Chuẩn responsive: Desktop First — mốc: 1920/1600/1400/1300/1199/
   992/767/568/480/414/385/360
   =================================================================== */

/* -------------------------------------------------------------
   1. BIẾN DÙNG CHUNG (CSS CUSTOM PROPERTIES)
   ------------------------------------------------------------- */
:root {
  /* Màu thương hiệu */
  --color-red: #D5120C;
  --color-blue: #0F54A5;
  --color-navy: #083B72;
  --color-darknavy: #04203F;
  --color-ink: #0B1722;
  --color-muted: #56687A;
  --color-line: #DDE4EC;
  --color-surface: #F2F5F8;
  --color-white: #FFFFFF;

  /* Font */
  --font-base: 'Be Vietnam Pro', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Bố cục */
  --container-width: 1300px;
  --container-pad: 24px;
  --section-py: 96px;
  --header-topbar-h: 40px;
  --header-nav-h: 79px;
  --header-total-h: calc(var(--header-topbar-h) + var(--header-nav-h));
  --gap: 24px;

  /* Cỡ chữ */
  --h1-size: 44px;
  --h2-size: 32px;
  --h3-size: 20px;
  --h4-size: 16px;

  /* Số cột lưới (dùng repeat(var(--cols-x),1fr)) */
  --cols-4: 4;
  --cols-3: 3;
  --cols-2: 2;
}

/* -------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-white);
  padding-bottom: 64px; /* chừa chỗ cho thanh liên hệ cố định */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 12px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }
button { font-family: inherit; cursor: pointer; box-shadow:none;text-shadow:none;}
input { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--h1-size); font-weight: 700; }
h2 { font-size: var(--h2-size); font-weight: 700; }
h3 { font-size: var(--h3-size); font-weight: 600; }
h4 { font-size: var(--h4-size); font-weight: 600; }
.container::after,
.container::before{content:none;}
/* -------------------------------------------------------------
   3. LỚP DÙNG CHUNG (LAYOUT / COMPONENT HELPERS)
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
  margin: 0 0 12px;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-red);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn--primary {
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(213, 18, 12, .3);
}
.btn--primary:hover { filter: brightness(1.1); color:#fff;}
.btn--outline {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-line);
}
.btn--outline:hover { border-color: var(--color-red); }
.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, .4);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color:#fff;}
.btn--block { width: 100%; }

.chip {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 600;
  transition: all .15s ease;
}
.chip.is-selected {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

/* -------------------------------------------------------------
   4. SITE HEADER
   ------------------------------------------------------------- */
.site-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
.site-header__topbar {
  height: var(--header-topbar-h);
  background: var(--color-red);
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
}
.site-header__topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.site-header__topbar p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header__topbar p strong { color: var(--color-white); font-weight: 700; }
.site-header__topbar p:last-child { flex-shrink: 0; }

.site-header__nav {
  height: var(--header-nav-h);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__nav .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__brand img { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; }

.site-header__menu-list {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-header__menu-list li { font-size: 14px; font-weight: 600; color: var(--color-navy); }
.site-header__menu-list a:hover { color: var(--color-red); }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.site-header__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  padding:0;box-shadow:none;text-shadow:none;
}
.site-header__menu-toggle svg { width: 20px; height: 20px; }

.site-header__mobile-menu {
  display: none;
  border-top: 1px solid var(--color-line);
  background: var(--color-white);
  padding: 12px 0;
}
.site-header__mobile-menu.is-open { display: block; }
.site-header__mobile-menu ul { display: flex; flex-direction: column; }
.site-header__mobile-menu li { border-bottom: 1px solid var(--color-line); }
.site-header__mobile-menu li:last-child { border-bottom: none; padding-top: 8px; }
.site-header__mobile-menu a { display: block; padding: 12px var(--container-pad); font-size: 14px; font-weight: 600; color: var(--color-navy); }

.home-main { padding-top: var(--header-total-h); }

/* -------------------------------------------------------------
   5. HOME ROW 0 — HERO BANNER
   ------------------------------------------------------------- */
.home-row0-banner-wrapper{float:left;width:100%;position:relative;}
.home-row0-banner {
  position: relative;
  height: 700px;
  overflow: hidden;
  background: var(--color-blue);
  color: var(--color-white);
}
.home-row0-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-row0-banner__scrim {
  position: absolute;
  inset: 0;
  background:linear-gradient(270deg, rgba(0, 22, 48, .92) 0%, rgba(0, 22, 48, .65) 45%, transparent 100%);
}
.home-row0-banner__content {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content:end;
}
.home-row0-banner__content > div { max-width: 560px; }
.home-row0-banner__content h1 { margin-bottom: 24px; color:#fff;}
.home-row0-banner__content ul { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; font-size: 16px; }
.home-row0-banner__content li { display: flex; align-items: center; gap: 12px; }
.home-row0-banner__content li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:url(/wp-content/themes/nvmtheme/css/../images/check-icon.png) center center no-repeat;background-size:100% 100%;
  flex-shrink: 0;
}
.home-row0-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------
   6. HOME ROW 1 — USP STATS
   ------------------------------------------------------------- */
.home-row1-usp {
  background: var(--color-white);
  box-shadow: 0 4px 8px rgba(4, 32, 63, .06);
}
.home-row1-usp__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-4), 1fr);
  gap: 0;
}
.home-row1-usp__item {
  padding: 40px 24px;
  border-left: 1px solid var(--color-line);
}
.home-row1-usp__item:first-child { border-left: none; padding-left: 0; }
.home-row1-usp__item img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--color-blue) 0%, var(--color-navy) 100%);
  color: var(--color-white);
  font-size: 15px;
  box-shadow: 0 8px 18px rgba(15, 84, 165, .28);
}
.home-row1-usp__item p:first-of-type {
  margin: 16px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--color-muted);
}
.home-row1-usp__item h4 { margin-bottom: 8px; }
.home-row1-usp__item p:last-child { color: var(--color-muted); font-size: 14px; margin-bottom: 0; }
.home-row1-usp__item_top{display:flex;width:100%;position:relative;padding-left:60px;flex-direction:row;flex-wrap:wrap;min-height:52px;
  margin-bottom:15px;
}
.home-row1-usp__item_top img{width:52px;height:52px;position:absolute;left:0;top:0;z-index:1;}
.home-row1-usp__item_top p{margin:0;font-size:12px!important;line-height:22px;}
.home-row1-usp__item_top strong{
  color: #D5120C;
leading-trim: both;
text-edge: cap;
text-shadow: 0 0 22px rgba(213, 18, 12, 0.22);
font-size: 30px!important;line-height:30px!important;
font-style: normal;
font-weight: 700;display:block;clear:both;
}
/* -------------------------------------------------------------
   7. HOME ROW 2 — MUA MÁY / THUÊ MÁY
   ------------------------------------------------------------- */
.home-row2-pricing { background: var(--color-surface); padding: var(--section-py) 0; }
.home-row2-pricing .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
.home-row2-pricing__gallery { border-radius: 12px; overflow: hidden; }
.home-row2-pricing__gallery img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.home-row2-pricing__plans { display: flex; flex-direction: column; gap: var(--gap); }
.home-row2-pricing__plan { background: var(--color-white); border-radius: 12px; padding: 24px; }
.home-row2-pricing__plan h2 { font-size: 24px; margin-bottom: 16px; }
.home-row2-pricing__plan h2 strong { color: var(--color-red); 
  font-weight:bold;padding-bottom:10px;background:url(/wp-content/themes/nvmtheme/css/../images/strong-bg-icon.png) bottom center no-repeat;background-size:100% 6px;
}
.home-row2-pricing__plan ul { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; font-size: 14px; color: #666; }
.home-row2-pricing__plan li { padding-left: 16px; position: relative; line-height: 1.7; }
.home-row2-pricing__plan li::before { content: "•"; position: absolute; left: 0; color: var(--color-red); }
.home-row2-pricing__plan .btn{padding:0 20px!important;height:46px;line-height:46px;color:#fff!important;}
.home-row2-pricing__plan .btn strong{font-weight:bold;background:url(/wp-content/themes/nvmtheme/css/../images/dang-ky-ngay.png) left center no-repeat;
  background-size:36px 36px;padding-left:45px;
}
/* -------------------------------------------------------------
   8. HOME ROW 3 — DANH MỤC MÁY
   ------------------------------------------------------------- */
.home-row3-categories { padding: var(--section-py) 0; }
.home-row3-categories__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
.home-row3-categories__head p { max-width: 420px; color: var(--color-muted); margin: 0; }
.home-row3-categories__grid { display: grid; grid-template-columns: repeat(var(--cols-4), 1fr); gap: var(--gap); }
.home-row3-categories__card { border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; background: var(--color-white); display: flex; flex-direction: column; }
.home-row3-categories__media { height: 260px; }
.home-row3-categories__media img { width: 100%; height: 100%; object-fit: cover; }
.home-row3-categories__body { padding: 20px;flex-direction: column; flex: 1; }
.home-row3-categories__body h3 { margin-bottom: 8px; font-size:18px;line-height:25px;}
.home-row3-categories__body p { color: var(--color-muted); font-size: 14px; flex: 1; }
.home-row3-categories__body .btn { margin-top: 16px; }

/* -------------------------------------------------------------
   9. HOME ROW 4 — SẢN PHẨM BÁN CHẠY (SWIPER)
   ------------------------------------------------------------- */
.home-row4-products { background: var(--color-surface); padding: var(--section-py) 0; }
.home-row4-products__head { margin-bottom: 40px; }
.home-row4-products__slider_wrapper{display:flex;width:100%;position:relative;}
.home-row4-products__slider { position: relative; padding-bottom: 48px; }
.home-row4-products__card { border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; background: var(--color-white); height: auto; }
.home-row4-products__media { position: relative; background: #F9FCFF; padding: 30px; }
.home-row4-products__media strong {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.home-row4-products__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
.home-row4-products__body { padding: 20px; }
.home-row4-products__body h3 { margin-bottom: 12px; }
.home-row4-products__specs { font-size: 14px; margin-bottom: 16px; }
.home-row4-products__specs li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--color-line); }
.home-row4-products__specs li:last-child { border-bottom: none; }
.home-row4-products__specs span { color: var(--color-muted); }
.home-row4-products__specs strong { color: var(--color-navy); font-weight: 600; }
.home-row4-products__nav {
  position: absolute;
  top: 40%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 28px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: none;
}
.home-row4-products__nav--prev { left: -20px; padding:5px;}
.home-row4-products__nav--next { right: -20px; padding:5px;}
.home-row4-products__pagination { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }

/* -------------------------------------------------------------
   10. HOME ROW 5 — DỰ ÁN THỰC TẾ
   ------------------------------------------------------------- */
.home-row5-projects { padding: var(--section-py) 0; }
.home-row5-projects__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
.home-row5-projects__head p { max-width: 420px; color: var(--color-muted); margin: 0; }
.home-row5-projects__main { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.home-row5-projects__sub { display: grid; grid-template-columns: repeat(var(--cols-3), 1fr); gap: var(--gap); }
.home-row5-projects__card { position: relative; border-radius: 16px; overflow: hidden; height: 600px; color: var(--color-white); }
.home-row5-projects__sub .home-row5-projects__card { height: 320px; }
.home-row5-projects__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-row5-projects__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--color-darknavy) 100%);
}
.home-row5-projects__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(213, 18, 12, .9);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.home-row5-projects__caption { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.home-row5-projects__caption h3 { font-size: 24px; margin-bottom: 4px; color:#fff;}
.home-row5-projects__caption h3 a{color:#fff;}
.home-row5-projects__caption p { color: #B7CDE3; font-size: 14px; margin: 0; }

/* -------------------------------------------------------------
   11. HOME ROW 6 — TƯ VẤN CHỌN MÁY (FORM CF7)
   ------------------------------------------------------------- */
.home-row6-consult {
  padding: var(--section-py) 0;
  color: var(--color-white);
  background: linear-gradient(172deg, rgba(10, 70, 130, 1) 0%, rgba(4, 32, 63, 1) 100%);
}
.home-row6-consult .container { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; }
.home-row6-consult__intro .eyebrow { color: #FF4438; }
.home-row6-consult__intro h2 { margin-bottom: 16px;color:#fff; }
.home-row6-consult__intro > p { color: #A6C0DC; margin-bottom: 32px; }
.home-row6-consult__intro ul { display: flex; flex-direction: column; gap: 16px; }
.home-row6-consult__intro li { display: flex; align-items: center; gap: 12px; color: #C0D4E7; }
.home-row6-consult__intro li::before { content: ""; width: 20px; height: 20px; border-radius: 50%;flex-shrink: 0; 
  background:url(/wp-content/themes/nvmtheme/css/../images/check-icon2.png) center center no-repeat;background-size:100% 100%;
}

.home-row6-consult__form { background: var(--color-white); color: var(--color-ink); border-radius: 12px; padding: 32px; }
.home-row6-consult__step { margin-bottom: 28px; }
.home-row6-consult__step legend { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; font-size: 16px; font-weight: 600; }
.home-row6-consult__step legend strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 12px;
}
.home-row6-consult__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home-row6-consult__contact { display: grid; grid-template-columns: repeat(var(--cols-2), 1fr); gap: 12px; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form-control-wrap label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-navy); }
.wpcf7-form-control {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-line);
  font-size: 14px;
}
.wpcf7-form-control:focus { outline: 2px solid var(--color-red); outline-offset: 1px; }
.wpcf7-form-control.is-invalid { border-color: var(--color-red); }
.wpcf7-form-control-wrap .form-error { display: none; color: var(--color-red); font-size: 12px; margin-top: 4px; }
.wpcf7-form-control-wrap.is-invalid .form-error { display: block; }
.wpcf7-form-control-wrap input[type="text"]{float:left;width:100%;height:45px;line-height:43px;border-radius:5px;padding:0 15px;}
.home-row6-consult__form.wpcf7-form .wpcf7-submit{box-shadow:none;text-shadow:none;text-transform:none;font-size:16px;font-weight:bold;border-radius:5px;}
/* -------------------------------------------------------------
   12. HOME ROW 7 — VIDEO
   ------------------------------------------------------------- */
.home-row7-video { position: relative; height: 600px; overflow: hidden; background: var(--color-darknavy); color: var(--color-white); }
.home-row7-video__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.home-row7-video__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-darknavy) 0%, rgba(4, 32, 63, .6) 60%, transparent 100%); }
.home-row7-video__play {
  position: absolute;
  right: 96px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-red);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
  z-index: 2;
}
.home-row7-video__play svg { width: 32px; height: 32px; margin-left: 0px; }
.home-row7-video__content { position: relative; height: 100%; display: flex; align-items: center; }
.home-row7-video__content > div { max-width: 460px; }
.home-row7-video__content p { color: #A6C0DC; margin: 0; }
.home-row7-video__content h2{color:#fff;}
/* -------------------------------------------------------------
   13. HOME ROW 8 — TIN TỨC
   ------------------------------------------------------------- */
.home-row8-news { background: var(--color-surface); padding: var(--section-py) 0; }
.home-row8-news__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
.home-row8-news__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.home-row8-news__main { border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; background: var(--color-white); }
.home-row8-news__media { position: relative; }
.home-row8-news__media img { width: 100%; height: 400px; object-fit: cover; }
.home-row8-news__media strong {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(213, 18, 12, .9);
  color: var(--color-white);
  font-size: 12px;
}
.home-row8-news__media time { position: absolute; left: 130px; bottom: 24px; font-size: 14px; color: var(--color-muted); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 4px; }
.home-row8-news__body { padding: 24px; }
.home-row8-news__body p:first-child { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--color-red); margin-bottom: 12px; }
.home-row8-news__body h3 { font-size: 22px; margin-bottom: 12px; }
.home-row8-news__body p { color: var(--color-muted); font-size: 14px; }
.home-row8-news__list { display: flex; flex-direction: column; gap: var(--gap); }
.home-row8-news__item { display: flex; border: 1px solid var(--color-line); border-radius: 12px; overflow: hidden; background: var(--color-white); }
.home-row8-news__item img { width: 168px; flex-shrink: 0; object-fit: cover; }
.home-row8-news__item > div { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.home-row8-news__item p:first-child { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0; }
.home-row8-news__item p:first-child strong { padding: 3px 8px; border-radius: 4px; background: rgba(213, 18, 12, .9); color: var(--color-white); font-weight: 600; }
.home-row8-news__item p:first-child time { color: var(--color-muted); }
.home-row8-news__item h3 { font-size: 16px; margin: 0; }

/* -------------------------------------------------------------
   14. HOME ROW 9 — ĐỐI TÁC (SWIPER)
   ------------------------------------------------------------- */
.home-row9-partners { background: var(--color-white); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 40px 0; }
.home-row9-partners__slider .swiper-slide { display: flex; align-items: center; justify-content: center; }
.home-row9-partners__slider img { height: 60px; width: auto; object-fit: contain;}

/* -------------------------------------------------------------
   15. SITE FOOTER
   ------------------------------------------------------------- */
.site-footer { background: var(--color-darknavy); color: var(--color-white); padding: 58px 0px; }
.site-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__brand img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.site-footer__brand h4 { font-size: 18px;color:#fff; }
.site-footer__social { display: flex; align-items: center; gap: 12px; }
.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.site-footer__social a:hover { background: rgba(255, 255, 255, .2); }
.site-footer__social img,
.site-footer__social svg { width:40px; height:40px; }

.site-footer__columns { display: grid; grid-template-columns: repeat(var(--cols-4), 1fr); gap: 40px; padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer__columns h4 { margin-bottom: 16px; color:#fff;}
.site-footer__columns address { font-style: normal; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.site-footer__columns p { color: #A2BBD4; font-size: 14px; line-height: 1.7; }
.site-footer__columns ul { display: flex; flex-direction: column; gap: 12px; }
.site-footer__columns li { font-size: 14px; color: #A2BBD4; }
.site-footer__columns a:hover { color: var(--color-white); }

.site-footer__bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 13px; color: #A2BBD4; flex-wrap: wrap; }

/* -------------------------------------------------------------
   16. THANH LIÊN HỆ CỐ ĐỊNH + BACK TO TOP
   ------------------------------------------------------------- */
.site-contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -4px 8px rgba(0, 0, 0, .1);
}
.site-contact-bar__list { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0; overflow-x: auto; }
.site-contact-bar__list li { flex-shrink: 0; }
.site-contact-bar__list a { display: inline-flex; align-items: center; gap: 8px; padding:6px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--color-white); white-space: nowrap; }
.site-contact-bar__list svg,
.site-contact-bar__list img { width:30px; height:30px; }
.site-contact-bar__list li:nth-child(1) a { background: var(--color-red); }
.site-contact-bar__list li:nth-child(2) a { background: var(--color-blue); }
.site-contact-bar__list li:nth-child(3) a { background: #007BFF; }

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-red);
  box-shadow: 0 0 28px rgba(0, 0, 0, .15);
  display: none;
  align-items: center;
  justify-content: center;
}
.back-to-top.is-visible { display: flex; }
.back-to-top svg { width: 20px; height: 20px; }

/* AOS-lite reveal fallback state (nếu thư viện chưa kịp tải) */
[data-aos] { opacity: 1; }

/* ===================================================================
   RESPONSIVE — DESKTOP FIRST
   =================================================================== */

/* ---- 1920px ---- */
@media (max-width: 1920px) {
  :root { --container-width: 1300px; }
}

/* ---- 1600px ---- */
@media (max-width: 1600px) {
  :root { --container-width: 1240px; --section-py: 88px; }
}

/* ---- 1400px ---- */
@media (max-width: 1400px) {
  :root { --container-width: 1160px; }
  .home-row0-banner { height: 620px; }
}

/* ---- 1300px ---- */
@media (max-width: 1300px) {
  :root { --container-width: 100%; --container-pad: 24px; --section-py: 80px; }
}

/* ---- 1199px ---- */
@media (max-width: 1199px) {
  :root { --cols-4: 3; --h1-size: 38px; --h2-size: 28px; }
  .home-row2-pricing .container,
  .home-row6-consult .container { grid-template-columns: 1fr; }
  .home-row2-pricing__gallery { min-height: 320px; }
  .home-row5-projects__main { grid-template-columns: 1fr; }
  .home-row8-news__grid { grid-template-columns: 1fr; }
}

/* ---- 992px ---- */
@media (max-width: 992px) {
  :root { --cols-4: 2; --cols-3: 2; --section-py: 64px; }
  .site-header__menu-list,
  .site-header__actions .btn--primary { display: none; }
  .site-header__menu-toggle { display: flex; }
  .home-row0-banner { height: 540px; }
  .home-row1-usp__grid { grid-template-columns: repeat(2, 1fr); }
  .home-row1-usp__item { border-left: none; border-top: 1px solid var(--color-line); padding-left: 0; }
  .home-row1-usp__item:nth-child(1),
  .home-row1-usp__item:nth-child(2) { border-top: none; }
  .home-row4-products__nav { display: none; }
}

/* ---- 767px ---- */
@media (max-width: 767px) {
  :root { --cols-4: 1; --cols-3: 1; --cols-2: 1; --h1-size: 30px; --h2-size: 24px; --section-py: 48px; }
  .home-row0-banner {padding: 48px 0; }
  .home-row0-banner__content { position: relative; }
  .home-row1-usp__grid { grid-template-columns: 1fr; }
  .home-row1-usp__item { border-top: 1px solid var(--color-line); border-left: none; padding-left: 0; }
  .home-row1-usp__item:first-child { border-top: none; }
  .home-row3-categories__head,
  .home-row5-projects__head,
  .home-row8-news__head { flex-direction: column; align-items: flex-start; }
  .home-row6-consult__contact { grid-template-columns: 1fr; }
  .home-row7-video { height: 420px; }
  .home-row7-video__play { right:auto!important; width: 60px; height: 60px; left:50%;transform:translateX(-50%);bottom:60px;top:auto;}
  .home-row8-news__item { flex-direction: column; }
  .home-row8-news__item img { width: 100%; height: 180px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer__bottom { flex-direction: column; }
  .site-header__topbar p:first-child:first-child{display:none;}
  .site{overflow-x:hidden;} 
}

/* ---- 568px ---- */
@media (max-width: 568px) {
  .home-row0-banner__content h1 { font-size: 28px; color:#fff;}
  .home-row0-banner__actions { flex-direction: column; align-items: stretch; }
  .home-row6-consult__form { padding: 20px; }
  .site-contact-bar__list a { padding: 10px 16px; font-size: 13px; }
  .site-contact-bar__list{gap:6px;padding:6px 0px;}
  .site-contact-bar__list a{font-size:12px;padding:6px 10px;}
}

/* ---- 480px ---- */
@media (max-width: 480px) {
  :root { --container-pad: 16px; }
  .home-row2-pricing__plan { padding: 20px; }
  .home-row4-products__nav { display: none; }
  .home-row2-pricing__plan h2{font-size:22px;}
  .site-contact-bar__list svg, .site-contact-bar__list img{height:20px;width:20px;}
  .site-contact-bar__list a{gap:5px}
}

/* ---- 414px ---- */
@media (max-width: 414px) {
  .site-header__topbar p:first-child { font-size: 11px; }
  .home-row8-news__media time { left: 100px; }
}

/* ---- 385px ---- */
@media (max-width: 390px) {
  .site-contact-bar__list { gap:6px; }
  .site-contact-bar__list a { padding:6px 10px;font-size:11px; letter-spacing:-0.3px;}
}

/* ---- 360px ---- */
@media (max-width: 360px) {
  :root { --h1-size: 24px; --h2-size: 20px; }
  .home-row1-usp__item img { width: 44px; height: 44px; font-size: 13px; }
  .site-contact-bar__list a{font-size:10px;padding:6px 8px;}
}