/* ==========================================================================
   Nguyen Bao — Homepage redesign (inmauhanoi.com)
   Scope: .nb-home only. Không đụng header/footer/theme.
   ========================================================================== */

.nb-home {
  --nb-red: #ec3237;
  --nb-red-dark: #d71419;
  --nb-blue: #1e87f0;
  --nb-yellow: #f5a623;
  --nb-green: #27ae60;
  --nb-indigo: #5c6bc0;
  --nb-ink: #1f2328;
  --nb-muted: #667085;
  --nb-border: #ececec;
  --nb-bg-soft: #f8f8f8;
  --nb-radius-card: 12px;
  --nb-radius-btn: 8px;
  --nb-shadow: 0 2px 10px rgba(20, 20, 40, .06);
  --nb-shadow-hover: 0 8px 24px rgba(20, 20, 40, .12);
  --nb-gap: 72px;

  font-size: 16px;
  line-height: 1.55;
  color: var(--nb-ink);
  overflow-x: clip;
}

/* Vô hiệu template cột 3/4 + sidebar + tiêu đề "Trang Chủ" tự sinh của YOOtheme
   (chỉ trên trang chủ — template trang con giữ nguyên) */
.home #tm-main h1.el-title { display: none; }
.home #tm-main .uk-width-3-4\@m { width: 100% !important; }
.home #tm-main .uk-width-1-4\@m { display: none !important; }

.nb-home *, .nb-home *::before, .nb-home *::after { box-sizing: border-box; }
.nb-home img { max-width: 100%; height: auto; display: block; }
.nb-home section { margin: 0 0 var(--nb-gap); }

/* ---------- Typography ---------- */
.nb-h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: var(--nb-ink);
}
.nb-h1-accent { color: var(--nb-red); display: block; }
.nb-home .nb-h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--nb-ink);
  text-transform: none;
}
.nb-section-sub { color: var(--nb-muted); margin: -10px 0 22px; }
.nb-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.nb-link-more {
  color: var(--nb-red); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.nb-link-more:hover, .nb-link-more:focus-visible { color: var(--nb-red-dark); text-decoration: underline; }

/* ---------- Buttons ---------- */
.nb-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 12px 26px; border-radius: var(--nb-radius-btn);
  font-weight: 700; font-size: 16px; line-height: 1.25;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nb-btn small { font-weight: 400; font-size: 12.5px; opacity: .9; }
.nb-btn:focus-visible { outline: 3px solid rgba(30, 135, 240, .5); outline-offset: 2px; }
.nb-btn-lg { padding: 14px 30px; min-width: 200px; }
.nb-btn-primary { background: var(--nb-red); color: #fff; }
.nb-btn-primary:hover { background: var(--nb-red-dark); color: #fff; box-shadow: var(--nb-shadow-hover); }
.nb-btn-outline { background: #fff; color: var(--nb-blue); border-color: var(--nb-blue); }
.nb-btn-outline:hover { background: var(--nb-blue); color: #fff; }
.nb-btn-white { background: #fff; color: var(--nb-red); }
.nb-btn-white:hover { background: #ffe9ea; color: var(--nb-red-dark); }
.nb-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.nb-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Icon tiles ---------- */
.nb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px; flex: none;
}
.nb-icon svg { display: block; }
.nb-icon-red    { background: #fdeaea; color: var(--nb-red); }
.nb-icon-blue   { background: #e8f2fd; color: var(--nb-blue); }
.nb-icon-yellow { background: #fdf3e0; color: var(--nb-yellow); }
.nb-icon-green  { background: #e7f7ee; color: var(--nb-green); }
.nb-icon-indigo { background: #eceffb; color: var(--nb-indigo); }

/* ---------- 01. Hero ---------- */
.nb-hero { padding-top: 8px; }
.nb-hero-grid {
  display: grid; grid-template-columns: 45fr 55fr; gap: 40px; align-items: center;
  min-height: 420px;
}
.nb-hero-sub { font-size: 18px; color: var(--nb-muted); margin: 0 0 26px; }
.nb-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.nb-hero-visual { position: relative; min-height: 320px; }
.nb-hero-blob {
  position: absolute; inset: 6% -4% 6% 12%;
  background: var(--nb-red);
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  opacity: .92;
}
.nb-hero-visual > img:first-of-type {
  position: relative; width: 88%; margin-left: auto;
  border-radius: var(--nb-radius-card); box-shadow: var(--nb-shadow-hover);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.nb-hero-visual-sub {
  position: absolute !important; left: 2%; bottom: -6%; width: 38%;
  border-radius: 10px; box-shadow: var(--nb-shadow-hover);
  border: 4px solid #fff; aspect-ratio: 4 / 3; object-fit: cover;
}

/* ---------- 02. Trust bar ---------- */
.nb-trust-list {
  list-style: none; margin: 0; padding: 22px 26px;
  background: #fff; border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  box-shadow: var(--nb-shadow);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.nb-trust-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.nb-trust-list .nb-icon { grid-row: span 2; }
.nb-trust-list strong { font-size: 15.5px; }
.nb-trust-desc { color: var(--nb-muted); font-size: 13.5px; }

/* ---------- 03. Needs ---------- */
.nb-needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nb-need-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; background: #fff;
  border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  box-shadow: var(--nb-shadow); text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.nb-need-card:hover, .nb-need-card:focus-visible {
  box-shadow: var(--nb-shadow-hover); transform: translateY(-2px);
  border-color: #ddd; color: inherit;
}
.nb-need-body { display: block; }
.nb-need-body strong { display: block; font-size: 16.5px; margin-bottom: 3px; color: var(--nb-ink); }
.nb-need-body span { color: var(--nb-muted); font-size: 13.5px; line-height: 1.45; display: block; }

/* ---------- 04. Featured products ---------- */
.nb-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nb-product-card {
  display: block; background: #fff; text-decoration: none; color: inherit;
  border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  overflow: hidden; box-shadow: var(--nb-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.nb-product-card:hover, .nb-product-card:focus-visible {
  box-shadow: var(--nb-shadow-hover); transform: translateY(-2px); color: inherit;
}
.nb-product-thumb { display: block; overflow: hidden; }
.nb-product-thumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .25s ease;
}
.nb-product-card:hover .nb-product-thumb img { transform: scale(1.04); }
.nb-product-card h3 {
  font-size: 16.5px; font-weight: 700; margin: 12px 14px 2px; color: var(--nb-ink);
}
.nb-product-note { display: block; margin: 0 14px 14px; color: var(--nb-red); font-size: 13.5px; font-weight: 600; }

/* ---------- 05. Quote form ---------- */
.nb-quote-box {
  background: #fff; border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  box-shadow: var(--nb-shadow); padding: 26px;
}
.nb-quote-box .wpcf7-form { margin: 0; }
.nb-qf-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1.3fr 1fr 1.2fr 1.2fr 1.2fr auto;
  align-items: end;
}
.nb-qf-field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--nb-ink); }
.nb-qf-field .wpcf7-form-control-wrap { display: block; }
.nb-quote-box input[type="text"],
.nb-quote-box input[type="tel"],
.nb-quote-box input[type="number"],
.nb-quote-box select {
  width: 100%; height: 46px; padding: 0 12px;
  border: 1px solid #d9d9d9; border-radius: var(--nb-radius-btn);
  background: #fff; color: var(--nb-ink); font-size: 15px;
}
.nb-quote-box input[type="file"] { width: 100%; height: 46px; font-size: 13.5px; padding: 11px 0; }
.nb-quote-box input:focus, .nb-quote-box select:focus {
  border-color: var(--nb-blue); outline: 2px solid rgba(30,135,240,.25); outline-offset: 0;
}
.nb-quote-box input[type="submit"] {
  height: 48px; padding: 0 26px; border: 0; border-radius: var(--nb-radius-btn);
  background: var(--nb-red); color: #fff; font-weight: 700; font-size: 15.5px; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.nb-quote-box input[type="submit"]:hover { background: var(--nb-red-dark); box-shadow: var(--nb-shadow-hover); }
.nb-quote-box input[type="submit"]:disabled { opacity: .6; cursor: wait; }
.nb-qf-hint { color: var(--nb-muted); font-size: 12.5px; margin-top: 8px; }
.nb-qf-submit { text-align: right; }
.nb-qf-submit .nb-qf-note { display: block; font-size: 12px; color: var(--nb-muted); margin-top: 5px; text-align: center; }
/* Desktop: nut submit thang hang voi cac o input — dua dong note ra khoi luong grid */
@media (min-width: 1200px) {
  .nb-qf-submit { position: relative; }
  .nb-qf-submit .nb-qf-note { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 5px; white-space: nowrap; }
  .nb-quote-box input[type="submit"] { height: 46px; }
}
/* CF7 states */
.nb-quote-box .wpcf7-not-valid { border-color: var(--nb-red) !important; }
.nb-quote-box .wpcf7-not-valid-tip { color: var(--nb-red); font-size: 12.5px; margin-top: 4px; display: block; }
.nb-quote-box .wpcf7-response-output {
  margin: 14px 0 0; padding: 10px 14px; border-radius: var(--nb-radius-btn);
  border: 1px solid var(--nb-border); font-size: 14px;
}
.nb-quote-box .wpcf7 form.sent .wpcf7-response-output { border-color: var(--nb-green); color: var(--nb-green); background: #e7f7ee; }
.nb-quote-box .wpcf7 form.invalid .wpcf7-response-output,
.nb-quote-box .wpcf7 form.failed .wpcf7-response-output { border-color: var(--nb-red); color: var(--nb-red-dark); background: #fdeaea; }

/* ---------- 06. Gallery + B2B ---------- */
.nb-split { display: grid; grid-template-columns: 58fr 42fr; gap: 40px; align-items: start; }
.nb-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nb-gallery-grid img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  border-radius: 10px; transition: transform .2s ease, box-shadow .2s ease;
}
.nb-gallery-grid img:hover { transform: scale(1.02); box-shadow: var(--nb-shadow-hover); }
.nb-b2b-list { list-style: none; margin: 0 0 22px; padding: 0; }
.nb-b2b-list li {
  position: relative; padding: 7px 0 7px 30px; font-size: 15.5px;
}
.nb-b2b-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--nb-red);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / 14px no-repeat, linear-gradient(#fff,#fff);
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / 14px no-repeat, linear-gradient(#fff,#fff);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
}

/* ---------- 07. Why choose ---------- */
.nb-why-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.nb-why-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.nb-why-list .nb-icon { grid-row: span 2; width: 42px; height: 42px; }
.nb-why-list strong { font-size: 14.5px; line-height: 1.3; }
.nb-why-list li > span:last-child { color: var(--nb-muted); font-size: 12.5px; line-height: 1.4; }

/* ---------- 08. Process ---------- */
.nb-process {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.nb-process li {
  position: relative; text-align: center; padding: 18px 12px 16px;
  background: #fff; border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  box-shadow: var(--nb-shadow);
}
.nb-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--nb-red); color: #fff; font-weight: 700; font-size: 15px;
  margin-bottom: 10px;
}
.nb-process strong { display: block; font-size: 15px; margin-bottom: 3px; }
.nb-process li > span:last-child { color: var(--nb-muted); font-size: 12.5px; line-height: 1.4; display: block; }

/* ---------- 10. News ---------- */
.nb-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nb-news-card {
  display: block; background: #fff; text-decoration: none; color: inherit;
  border: 1px solid var(--nb-border); border-radius: var(--nb-radius-card);
  overflow: hidden; box-shadow: var(--nb-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.nb-news-card:hover, .nb-news-card:focus-visible { box-shadow: var(--nb-shadow-hover); transform: translateY(-2px); color: inherit; }
.nb-news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nb-news-body { padding: 14px 16px 16px; }
.nb-news-date { color: var(--nb-muted); font-size: 12.5px; }
.nb-news-card h3 { font-size: 16px; font-weight: 700; margin: 4px 0 6px; line-height: 1.35; color: var(--nb-ink); }
.nb-news-card p { margin: 0; color: var(--nb-muted); font-size: 13.5px; line-height: 1.5; }

/* ---------- 11. Final CTA (full-bleed) ---------- */
.nb-final-cta {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: linear-gradient(120deg, var(--nb-red) 0%, var(--nb-red-dark) 100%);
  color: #fff; padding: 52px 24px; margin-bottom: 0;
  position: relative; overflow: hidden;
}
.nb-final-cta::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.nb-final-cta::after {
  content: ""; position: absolute; left: -40px; bottom: -80px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.nb-final-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; }
.nb-final-title { color: #fff; margin-bottom: 8px; }
.nb-final-sub { color: rgba(255,255,255,.92); margin: 0 0 24px; }
.nb-final-sub a { color: #fff; font-weight: 700; text-decoration: none; }
.nb-final-sub a:hover { text-decoration: underline; color: #fff; }
.nb-final-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Tablet 768–1199px
   ========================================================================== */
@media (max-width: 1199px) {
  .nb-home { --nb-gap: 56px; }
  .nb-trust-list { grid-template-columns: repeat(2, 1fr); }
  .nb-needs-grid { grid-template-columns: repeat(2, 1fr); }
  .nb-products-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .nb-qf-grid { grid-template-columns: repeat(3, 1fr); }
  .nb-qf-submit { grid-column: 1 / -1; text-align: center; }
  .nb-why-list { grid-template-columns: repeat(3, 1fr); }
  .nb-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mobile ≤ 767px
   ========================================================================== */
@media (max-width: 767px) {
  .nb-home { --nb-gap: 44px; font-size: 15px; }

  /* Hero compact */
  .nb-hero-grid { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .nb-hero-sub { font-size: 15.5px; margin-bottom: 20px; }
  .nb-hero-ctas { flex-direction: column; }
  .nb-hero-ctas .nb-btn { width: 100%; }
  .nb-hero-visual { min-height: 0; margin-bottom: 10px; }
  .nb-home img.nb-hero-visual-sub { display: none; }
  .nb-hero-blob { inset: 10% -8% 4% 30%; }

  /* Trust bar: 4 icon compact */
  .nb-trust-list { grid-template-columns: repeat(4, 1fr); padding: 14px 10px; gap: 8px; }
  .nb-trust-list li { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 6px; }
  .nb-trust-list .nb-icon { grid-row: auto; width: 40px; height: 40px; }
  .nb-trust-list strong { font-size: 11.5px; line-height: 1.25; }
  .nb-trust-desc { display: none; }

  .nb-needs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .nb-need-card { flex-direction: column; gap: 10px; padding: 14px; }
  .nb-need-body span { font-size: 12.5px; }

  .nb-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .nb-product-card h3 { margin: 10px 12px 2px; font-size: 15px; }
  .nb-product-note { margin: 0 12px 12px; font-size: 12.5px; }

  /* Quote form: compact → expand */
  .nb-quote-box { padding: 18px 16px; }
  .nb-qf-grid { grid-template-columns: 1fr; gap: 12px; }
  .nb-quote.is-collapsed .nb-qf-field:not(.nb-qf-product):not(.nb-qf-submit) { display: none; }
  .nb-quote.is-collapsed .nb-qf-hint { display: none; }
  .nb-qf-submit { grid-column: auto; text-align: center; }
  .nb-quote-box input[type="submit"] { width: 100%; }

  .nb-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .nb-why-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  .nb-process { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .nb-process li { padding: 10px 4px; border: 0; box-shadow: none; background: transparent; }
  .nb-step-num { width: 30px; height: 30px; font-size: 13.5px; margin-bottom: 6px; }
  .nb-process strong { font-size: 11.5px; }
  .nb-process li > span:last-child { display: none; }

  .nb-news-grid { grid-template-columns: 1fr; }
  .nb-news-grid .nb-news-card:nth-child(n+2) { display: none; }

  .nb-final-cta { padding: 36px 16px; }
  .nb-final-ctas { flex-direction: column; }
  .nb-final-ctas .nb-btn { width: 100%; }
}

/* Small phones */
@media (max-width: 359px) {
  .nb-trust-list strong { font-size: 10.5px; }
  .nb-process strong { font-size: 10.5px; }
}