/* ---------------------------------------------------------------------------
   Bảng thông tin công ty ở cột trái trang giới thiệu, và khung thư bên phải.
   Nội dung sửa ở quản trị: Giới thiệu → Bảng thông tin.
   --------------------------------------------------------------------------- */

/* Không dùng position: sticky ở đây. Bảng có hơn mười dòng nên cao hơn màn hình,
   dính lại thì phần cuối bảng không bao giờ cuộn tới được. */
/* Nền của cả phần hai cột. Xám xanh rất nhạt để các thẻ trắng bên trên nổi lên -
   thẻ trắng trên nền trắng thì chỉ còn cái đổ bóng mờ để phân biệt.
   Đặt trên lớp bọc riêng chứ không trên .container: container có bề rộng giới
   hạn nên chỉ tô được phần giữa, hai bên vẫn trắng.
   my-4 của Bootstrap bỏ đi, khoảng cách trên dưới đưa vào padding của nền, không
   thì mép nền cắt sát ngay thẻ đầu tiên. */
.nv-intro-bg {
  background: #f4f8fb;
  padding: 30px 0 40px;
}

/* Dải tiêu đề vốn chừa 34px phía dưới. Ở trang này nền xám dán ngay vào dưới dải
   đó nên khoảng trắng ấy thành một vạch trắng lạc lõng giữa hai mảng màu. */
body.nv-has-panel .nv-page-hero {
  margin-bottom: 0;
}

.nv-panel {
  display: block;
}

/* Thẻ nhận diện --------------------------------------------------------- */

.nv-panel-card {
  background: #fff;
  border-radius: 14px;
  padding: 30px 24px 26px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(23, 36, 47, .08);
  /* Vạch màu chủ đạo ở mép trên, giữ được bo góc vì dùng viền chứ không dùng
     một khối phủ lên. */
  border-top: 3px solid var(--nv-primary);
}

.nv-panel-logo {
  max-width: 180px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 18px;
}

.nv-panel-name {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  color: var(--nv-primary-deep);
  text-transform: uppercase;
}

.nv-panel-name-en {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7a86;
}

.nv-panel-badge {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 34px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--nv-primary), var(--nv-primary-deep));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

a.nv-panel-badge:hover,
a.nv-panel-badge:focus {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.08);
}

/* Các dòng thông tin ---------------------------------------------------- */

.nv-panel-rows {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nv-panel-row-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(23, 36, 47, .07);
  transition: box-shadow .3s ease, transform .3s ease;
}

/* Trỏ vào dòng nào thì dòng đó lên kiểu nổi bật - xem mục "Dòng nổi bật" bên
   dưới, cùng một bộ khai báo. */
a.nv-panel-row-inner:hover,
a.nv-panel-row-inner:focus {
  text-decoration: none;
}

.nv-panel-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--nv-primary-rgb), .12);
  color: var(--nv-primary);
  font-size: 17px;
}

.nv-panel-text {
  /* min-width: 0 để nội dung dài xuống dòng được: mặc định ô flex không co nhỏ
     hơn nội dung của nó, địa chỉ dài sẽ đẩy thẻ rộng ra ngoài cột. */
  min-width: 0;
}

.nv-panel-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a97a1;
}

.nv-panel-value {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  color: #17242f;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Dòng nổi bật, và dòng đang trỏ chuột vào -------------------------------
   Hai trạng thái dùng chung một bộ khai báo: dòng nổi bật là dòng "luôn ở trạng
   thái được chú ý", trỏ chuột vào dòng khác thì dòng đó tạm thời như vậy. Gộp
   lại để sau này đổi màu chỉ phải sửa một chỗ. */

.nv-panel-row.is-highlight .nv-panel-row-inner,
.nv-panel-row:hover .nv-panel-row-inner,
.nv-panel-row:focus-within .nv-panel-row-inner {
  background: linear-gradient(to right, var(--nv-primary), var(--nv-primary-deep));
  box-shadow: 0 6px 18px rgba(var(--nv-primary-rgb), .35);
}

.nv-panel-row.is-highlight .nv-panel-icon,
.nv-panel-row:hover .nv-panel-icon,
.nv-panel-row:focus-within .nv-panel-icon {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.nv-panel-row.is-highlight .nv-panel-label,
.nv-panel-row:hover .nv-panel-label,
.nv-panel-row:focus-within .nv-panel-label {
  color: rgba(255, 255, 255, .82);
}

.nv-panel-row.is-highlight .nv-panel-value,
.nv-panel-row:hover .nv-panel-value,
.nv-panel-row:focus-within .nv-panel-value {
  color: #fff;
}

/* Cỡ chữ to hơn chỉ dành cho dòng nổi bật thật. Cho cả lúc trỏ chuột thì mỗi
   lần rê qua một dòng là chữ nhảy cỡ, cả cột giật lên giật xuống. */
.nv-panel-row.is-highlight .nv-panel-value {
  font-size: 20px;
}

/* Bản đồ dưới các dòng thông tin (trang Liên hệ) ------------------------- */

.nv-panel-map {
  margin-top: 12px;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(23, 36, 47, .07);
  /* Bo góc chỉ ăn khi có overflow: hidden - iframe là ô vuông góc, không thì
     bốn góc nó thò ra ngoài thẻ. */
  overflow: hidden;
}

.nv-panel-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 8px;
}

/* Trang Liên hệ --------------------------------------------------------- */

.nv-contact-heading {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nv-primary-deep);
}

.nv-contact .nv-letter .form-control {
  border-radius: 8px;
  padding: 10px 14px;
  height: auto;
}

.nv-contact .nv-letter label {
  font-weight: 700;
  font-size: 14px;
  color: #17242f;
}

/* Sơ đồ công ty --------------------------------------------------------- */

/* Nằm dưới hai cột, rộng hết khung nội dung: sơ đồ tổ chức là ảnh ngang, nhét
   vào cột trái hơn ba trăm pixel thì không đọc nổi chữ. */
.nv-intro-chart {
  margin-top: 26px;
  padding: 26px 30px 30px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(23, 36, 47, .08);
}

.nv-intro-chart-title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  color: var(--nv-primary-deep);
  text-transform: uppercase;
}

.nv-intro-chart > a {
  display: block;
}

.nv-intro-chart img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 991px) {
  .nv-intro-chart {
    padding: 20px;
  }
}

/* Khung thư bên phải ---------------------------------------------------- */

.nv-intro-letter .nv-letter {
  background: #fff;
  border-radius: 14px;
  padding: 34px 38px;
  box-shadow: 0 4px 18px rgba(23, 36, 47, .08);
}

/* Khung thư kéo dài bằng mép dưới bảng thông tin bên trái.
   .row của Bootstrap vốn là flex nên hai cột đã cao bằng nhau rồi, nhưng cái
   cao bằng nhau là hai thẻ .col-*, còn .nv-letter bên trong vẫn chỉ cao bằng
   nội dung của nó - nội dung ngắn thì thẻ trắng kết thúc lửng, chừa một mảng
   trống cạnh cột trái. Cho cột thành flex rồi bảo .nv-letter chiếm hết chỗ.
   Chỉ áp dụng từ 992px trở lên: dưới mức đó hai cột xếp dọc, không có gì để
   bằng nhau. */
@media (min-width: 992px) {
  .nv-intro-letter .col-lg-8 {
    display: flex;
    /* Bắt buộc đi kèm display:flex ở đây. Ô flex mặc định min-width:auto, tức là
       không chịu co nhỏ hơn nội dung của nó; gặp một đoạn chữ không có chỗ ngắt
       (nội dung cũ nối cả câu bằng dấu cách không ngắt dòng) là thẻ trắng phình
       to hơn cả cột và thò ra ngoài. Đo ở 1024px: thẻ 652px trong cột 640px. */
    min-width: 0;
  }

  .nv-intro-letter .nv-letter {
    flex: 1;
    min-width: 0;
  }

  /* Trang Liên hệ thì ngược lại: cột trái (thông tin + bản đồ) cao hơn hẳn cái
     form, kéo dài thẻ form cho bằng sẽ thừa ra một mảng trắng rỗng gần nửa màn
     hình. Cho nó ôm lấy nội dung, phần dưới để lộ nền xám. */
  .nv-intro-letter.nv-contact .nv-letter {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 100%;
  }
}

.nv-intro-letter .nv-letter .nv-content {
  margin-top: 0;
  /* Lưới an toàn: nội dung chuyển từ website cũ có chỗ nối cả đoạn bằng dấu cách
     không ngắt dòng, thành một "từ" dài mấy trăm ký tự tràn ra ngoài thẻ. Đã dọn
     ở dữ liệu bằng tools/fix-nbsp.php, để thêm dòng này cho lần sau ai đó dán
     lại nội dung kiểu đó thì chữ vẫn nằm trong cột. */
  overflow-wrap: break-word;
}

.nv-intro-letter .nv-letter .nv-content table {
  /* Bảng trong nội dung cũng phải cuộn được riêng, không đẩy rộng cả thẻ. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 991px) {
  .nv-panel {
    margin-bottom: 26px;
  }

  .nv-intro-letter .nv-letter {
    padding: 24px 20px;
  }
}

/* ---------------------------------------------------------------------------
   Trang Giỏ hàng: danh sách hàng đã chọn bên trái, form báo giá bên phải.
   Dùng chung khung .nv-intro-bg / .nv-letter với trang Về chúng tôi và Liên hệ.
   --------------------------------------------------------------------------- */

.nv-cart-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nv-cart-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid #e6ebef;
  border-radius: 12px;
  transition: box-shadow .25s ease, border-color .25s ease;
}

.nv-cart-row:hover {
  border-color: rgba(var(--nv-primary-rgb), .45);
  box-shadow: 0 6px 18px rgba(23, 36, 47, .08);
}

.nv-cart-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: #eef3f7;
}

.nv-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* min-width: 0 để tên hàng dài xuống dòng thay vì đẩy rộng cả hàng. */
.nv-cart-info {
  flex: 1 1 auto;
  min-width: 0;
}

.nv-cart-name {
  display: block;
  font-weight: 700;
  color: #17242f;
  line-height: 1.45;
}

.nv-cart-name:hover {
  color: var(--nv-primary);
  text-decoration: none;
}

.nv-cart-price {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nv-primary);
}

.nv-cart-qty-box {
  flex: 0 0 auto;
  width: 92px;
}

.nv-cart-qty-box label {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a97a1;
}

.nv-cart-qty-box .form-control {
  height: auto;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
}

.nv-cart-row .nv-cart-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f2f5f8;
  color: #8a97a1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.nv-cart-row .nv-cart-remove:hover {
  background: #b32d2e;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Giỏ trống.

   Không phải "hai cột, một cột rỗng": giấu cột form mà giữ nguyên cột danh sách
   thì còn lại một tấm thẻ hẹp lệch sang trái, cạnh một khoảng trống bằng nửa
   màn hình. Nên giỏ trống là một trạng thái riêng - một khối duy nhất ở giữa,
   nói rõ giỏ đang trống và chỉ đường đi tiếp. Cột form bị giấu vì gửi yêu cầu
   báo giá mà không có món nào thì bên nhận cũng không biết báo giá cái gì.

   JavaScript bật lớp .nv-cart-is-empty trên cả trang (xem renderCartPage).
   Mặc định giấu khối này để người đang có hàng trong giỏ không thấy nó loé lên
   một nhịp trước khi JavaScript chạy.
   --------------------------------------------------------------------------- */

.nv-cart-col-empty {
  display: none;
}

.nv-cart-is-empty .nv-cart-col-empty {
  display: block;
}

.nv-cart-is-empty .nv-cart-col-list,
.nv-cart-is-empty .nv-cart-col-form {
  display: none;
}

.nv-cart-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 32px 40px;
  text-align: center;
}

/* Vòng tròn nhạt sau biểu tượng, lấy màu chính pha loãng để hợp với cả site. */
.nv-cart-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(var(--nv-primary-rgb), .1);
  color: var(--nv-primary);
  font-size: 38px;
}

.nv-cart-empty h2 {
  margin: 0 0 10px;
  color: #17242f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.nv-cart-empty p {
  max-width: 42ch;
  /* Căn giữa khối chữ nhưng vẫn giữ độ dài dòng dễ đọc. */
  margin: 0 auto 24px;
  color: #6b7a86;
  font-size: 15px;
  line-height: 1.7;
}

.nv-cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Nút phụ: cùng dáng nút chính nhưng chỉ có viền, để hai nút không tranh nhau. */
.nv-cart-empty-actions .nv-btn-ghost {
  border: 1px solid #d7e0e8;
  background: #fff;
  color: #46545f;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.nv-cart-empty-actions .nv-btn-ghost:hover {
  border-color: rgba(var(--nv-primary-rgb), .55);
  background: rgba(var(--nv-primary-rgb), .06);
  color: var(--nv-primary);
}

@media (max-width: 575px) {
  .nv-cart-empty {
    padding: 34px 20px 30px;
  }

  .nv-cart-empty-actions .btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .nv-cart-row {
    flex-wrap: wrap;
  }

  .nv-cart-info {
    flex-basis: calc(100% - 92px);
  }

  .nv-cart-qty-box {
    margin-left: 92px;
  }
}