/* =====================================================================
   Sửa lỗi và tối ưu giao diện trang client — KHÔNG đổi bố cục hay kiểu dáng.

   Nạp sau main.css và custom.css. Bảng màu nằm ở :root của main.css (đỏ #C8102E chủ
   đạo, bỏ cyan/xanh lá của template cũ). File này chỉ chứa:
   - lỗi hiển thị có thật (chữ trắng trên nền trắng, chữ đen trên nền đỏ, cuộn ngang...),
   - khả năng dùng (vành focus bàn phím, phản hồi khi bấm, giảm chuyển động),
   - hiển thị trên điện thoại (header đè hero, logo quá to).
   ===================================================================== */

/* Trang cuộn ngang được ~10px: ảnh tròn ở mục Giải pháp cố ý tràn ra mép phải
   (margin-right: -115px). body đã ẩn phần tràn nhưng html thì chưa. */
html {
  overflow-x: hidden;
}

/* Vành focus cho người dùng bàn phím. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(200, 16, 46, 0.45);
  outline-offset: 2px;
}

/* Nút: giữ nguyên hình dáng, thêm chuyển màu mượt và phản hồi khi nhấn. */
.def-btn,
.contact_submit,
.subsciber-fr button,
.dk-form button {
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}

.def-btn:active,
.contact_submit:active,
.subsciber-fr button:active,
.dk-form button:active {
  transform: translateY(1px);
}

/* Nút Gửi của form liên hệ: chữ đang là màu chữ thường (gần đen) trên nền đỏ. */
.contact_submit,
.contact_submit:hover {
  color: #ffffff;
}

/* ---------- Header ----------
   Trang con không có ảnh banner (Giới thiệu, Sản phẩm) thì header trong suốt nằm trên nền
   sáng, chữ menu màu trắng gần như biến mất. Cho header nền đỏ và chừa chỗ cho nó.
   Trang con có banner giữ header trong suốt trên ảnh như cũ. */
.page-inner:not(:has(.page-banner)) header {
  background: var(--bg-primary-overlay-95);
  padding: 15px 0;
}

.page-inner:not(:has(.page-banner)) {
  padding-top: 110px;
}

/* Mục menu đang mở: main.css tô màu đỏ thương hiệu, nhưng header là nền đỏ (khi cuộn, ở
   trang con) nên chữ biến mất. Giữ chữ trắng, đánh dấu bằng gạch chân trắng. */
header .main-nav > ul > li.active > a,
header .main-nav > ul > li > a.active {
  color: #ffffff;
  box-shadow: inset 0 -2px 0 #ffffff;
}

/* Nút "Đăng nhập" cùng màu đỏ với header khi đã cuộn hoặc ở trang con, nên gần như lẫn
   vào nền. Viền trắng mảnh để nó vẫn đọc ra là một nút. */
header .login-drop .def-btn {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Danh sách hệ thống đăng nhập xổ ra từ nút trên. main.css chừa 80px bên trái cho icon
   và viết hoa toàn bộ — ở đây không có icon, nên bỏ khoảng trống và giữ chữ thường. */
.login-drop ul {
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.login-drop ul li a {
  padding: 12px 20px;
  text-transform: none;
}

/* Logo trong markup đặt max-height 80px inline: trên điện thoại header cao 110px và đè
   lên tiêu đề hero. */
@media (max-width: 991px) {
  header .logo img {
    max-height: 48px !important;
    width: auto;
  }

  .page-inner:not(:has(.page-banner)) {
    padding-top: 80px;
  }
}

/* Icon cạnh dòng chữ ở footer đặt 26px trong khi chữ ~15px, trông to quá khổ (rõ nhất trên
   điện thoại). Cho icon chỉ lớn hơn chữ một chút và căn giữa với dòng đầu. */
footer .f-line {
  padding-left: 30px;
}

footer .f-line i {
  font-size: 18px;
  width: 20px;
  top: 3px;
}

/* Dòng bản quyền: chữ trắng 60% trên nền xám nhạt của footer, gần như không đọc được. */
footer .copyright {
  color: var(--text-gray);
}

footer .copyright span {
  color: var(--brand);
}

/* Nút gọi trên header: hình điện thoại 22px gần chạm viền vòng tròn 32px. */
.h-call {
  font-size: 15px;
  line-height: 29px;
}

/* ---------- Menu điện thoại ----------
   main.css tô chữ menu bằng màu chữ thường (gần đen) trên nền #333, nên các mục gần như
   không đọc được. Đổi sang nền trắng, chữ đậm, mục đang mở màu đỏ như menu desktop.
   Menu này hiện ở mọi màn hình dưới 1200px (main.css ẩn nó từ 1200px trở lên). */
@media (max-width: 1199.98px) {
  .m-nav {
    width: 300px;
    right: -300px;
    background: #ffffff;
    color: var(--text-primary);
  }

  .m-nav.active {
    right: 0;
    box-shadow: -8px 0 24px rgba(27, 29, 34, 0.18);
  }

  .m-nav .m-nav-close {
    width: 44px;
    height: 44px;
    background: var(--brand);
    color: #ffffff;
  }

  .m-nav .nav-ct {
    padding-top: 8px;
  }

  .m-nav .nav-ct > ul a {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 12px 20px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
  }

  .m-nav .nav-ct > ul a:hover,
  .m-nav .nav-ct > ul a.active {
    color: var(--brand);
    text-decoration: none;
  }

  .m-nav .login-drop {
    margin: 12px 20px 16px;
  }

  /* Trong menu điện thoại nút nằm sát mép trái: v2 căn danh sách theo mép phải nút nên
     nó tràn ra ngoài khung bên trái và cắt mất chữ. Căn theo mép trái, bỏ khoảng chừa icon. */
  .m-nav .login-drop.v2 ul {
    left: 0;
    right: auto;
    border-radius: 0 10px 10px 10px;
  }

  .m-nav .login-drop ul li a {
    padding: 10px 16px;
  }

  .m-nav .acd-drop {
    border-left-color: var(--border-light);
    background: transparent;
  }
}

/* ---------- Hero ----------
   Tiêu đề hero là H1 (đổi khi làm SEO); rule chung của H1 tô nó màu chữ thường, nên phải
   nói rõ màu trắng như trước. */
.slider_caption,
.slider_title,
.slider_desc {
  color: #ffffff;
}

/* Màn dưới 992px (điện thoại, máy tính bảng): video 16:9 thấp, chữ hero bắt đầu cách
   đỉnh 60px trong khi header cao ~75px, nên logo đè lên tiêu đề; trên điện thoại đoạn mô
   tả còn bị ẩn. Cho hero cao đủ chứa chữ và đẩy chữ xuống dưới header. */
@media (max-width: 991px) {
  .slider .img {
    padding-top: 0;
    height: 520px;
  }

  .slider .img video {
    object-fit: cover;
  }

  .slider_caption {
    top: 0;
    display: flex;
    align-items: center;
    padding-top: 96px;
    padding-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .slider .img {
    height: 480px;
  }

  .slider_title {
    font-size: 26px !important;
  }

  .slider_desc {
    display: block !important;
    font-size: 15px;
    max-width: none !important;
  }
}

/* ---------- Chi tiết sản phẩm ---------- */

/* Nhãn "Chính sách bảo hành": nền đỏ, chữ đang là màu chữ thường (gần đen). */
.pro-detail .policy .i-title {
  color: #ffffff;
}

.pro-detail .policy .policy-check {
  color: var(--brand);
  font-size: 12px;
  margin: 0 4px 0 12px;
}

/* Breadcrumb: phân cách là một chấm đen 3px, trông như dấu chấm lạc (nhất là khi xuống
   dòng trên điện thoại). Dùng dấu › quen thuộc, màu chữ phụ. */
.breadcrumbs li a:after {
  content: "\203A";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--text-light-gray);
  font-size: 16px;
  line-height: 1;
  margin: -2px 8px 0;
}

/* Nút hotline dưới form tư vấn: nền đỏ, chữ phải trắng. */
.dk-form-hotline,
.dk-form-hotline:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Mô tả nhập từ trình soạn thảo trong trang quản trị mang font-family inline (Arial...).
   Đưa về font của site để một trang không lẫn hai kiểu chữ. */
.pro-detail .pro-desc,
.pro-detail .pro-desc [style*="font-family"],
.page-tab-ct [style*="font-family"] {
  font-family: var(--font) !important;
}

/* ---------- Liên hệ ----------
   Khối thông tin bên phải bản đồ (thay bảng có   và chữ xanh dương cũ). Viền và bo
   góc theo khung cũ. */
.contact-map {
  min-height: 420px;
  border: 0;
}

.contact-card {
  border: 1px solid var(--border-gray);
  border-radius: 15px;
  padding: 4px 20px;
  background: #ffffff;
}

.contact-card_item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.contact-card_item:last-child {
  border-bottom: 0;
}

.contact-card_label {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand);
}

.contact-card_strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .brand-right {
    margin-top: 16px;
  }
}

/* ---------- Trang 404 của website (Views/Error/NotFoundPublic.cshtml) ---------- */
.notfound-page {
  padding: 60px 0 100px;
  min-height: 50vh;
}

.notfound-page_lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-gray);
  margin-bottom: 32px;
}

.notfound-page_lead code {
  color: var(--text-primary);
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 15px;
  word-break: break-all;
}

.notfound-page_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.notfound-page_link {
  font-weight: 700;
  color: var(--brand);
}

.notfound-page_link:hover {
  color: var(--brand-dark);
}

@media (max-width: 767px) {
  .notfound-page {
    padding: 32px 0 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}