/* 1. Đặt box-sizing mặc định cho tất cả các thẻ để tính toán kích thước (padding/border) chuẩn xác hơn */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb; /* Màu border mặc định của Tailwind (gray-200) */
}

/* 2. Reset các thông số cơ bản của thẻ html và body */
html {
  line-height: 1.5; /* Độ giãn dòng chuẩn */
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Font hệ thống siêu mượt */
}

body {
  margin: 0; /* Xóa khoảng trống thừa của trình duyệt xung quanh viền trang */
  line-height: inherit;
}

/* 3. Xóa bỏ margin thừa của tất cả các thẻ tiêu đề và văn bản */
h1, h2, h3, h4, h5, h6, p, figure, heading, blockquote, dl, dd {
  margin: 0;
}

/* 4. Reset các thẻ tiêu đề về kích thước chữ bình thường (Không tự động to, không tự động đậm) */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 5. Reset danh sách (List) - Xóa bỏ dấu chấm tròn và khoảng thụt lề đầu dòng */
ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 6. Reset các thẻ liên quan đến Form, Input, Button */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Cho phép nút bấm hiển thị con trỏ dạng pointer */
button, [role="button"] {
  cursor: pointer;
}

/* 7. Đảm bảo các thẻ hình ảnh, video hoạt động theo dạng block (không bị dính khoảng trống inline thừa ở dưới) */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%; /* Không bao giờ để ảnh bị tràn khung chứa */
  height: auto;
}

/* 8. Reset thẻ <a> (Đường link) về dạng chữ thường, không tự gạch chân */
a {
  color: inherit;
  text-decoration: inherit;
}
:root {
    --primary_color: #28a745; 
    --secondary_color: #d32f2f; 			
    --gap: 15px;
    --max-width: 1140px;
    --menu-bg: #1e63a3;
    --menu-bg-hover: #5192cf;
    --menu-color: #fff;
    --menu-color-hover: #fff;
    --hotline-child-weight: 600;
    --footer-bg: #d9edf7;
    --footer-text: #1e63a3;
    --footer-heading: #1e63a3;
    --footer-border: #343a40;
    --font-main: 'Arial', sans-serif;
    --border-radius: 8px;
}
 html { scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 {
    color: var(--menu-bg);
}/* =========================================
   THIẾT LẬP CHUNG CHO TIÊU ĐỀ
   ========================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3; 
  margin-top: 0;
  margin-bottom: 0.5em; 
  color: #1f2937; 
}

/* h1: 24px (Mobile) -> Tối đa 32px (Desktop) */
h1 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
}

/* h2: 20px (Mobile) -> Tối đa 26px (Desktop) */
h2 {
  font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.625rem);
}

/* h3: 18px (Mobile) -> Tối đa 22px (Desktop) */
h3 {
  font-size: clamp(1.125rem, 2vw + 0.5rem, 1.375rem);
}

/* h4: 16px (Mobile) -> Tối đa 18px (Desktop) */
h4 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
}

/* h5: 15px (Mobile) -> Tối đa 16px (Desktop) */
h5 {
  font-size: clamp(0.9375rem, 1vw + 0.5rem, 1rem);
}

/* h6: Cố định 14px (Nhỏ hơn chữ thường một chút) */
h6 {
  font-size: 0.875rem; 
}

/* =========================================
   THIẾT LẬP CHO DANH SÁCH (UL, LI)
   ========================================= */
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem; 
  list-style-type: disc; 
}

/* li: 15px (Mobile) -> 16px (Desktop) - Kích thước đọc văn bản chuẩn nhất */
li {
  font-size: clamp(0.9375rem, 1vw + 0.5rem, 1rem);
  line-height: 1.5; 
  margin-bottom: 0.3rem; /* Thu hẹp khoảng cách các dòng lại cho gọn */
  color: #374151; 
}
.hide{display:none;}
.show{display:inherit;}
/* =========================================
   BREADCRUMB (ĐƯỜNG DẪN ĐIỀU HƯỚNG)
   ========================================= */

/* 1. Khung chứa bên ngoài */
.w-breadcrumb {
  background-color: #f8fafc; /* Nền xám xanh cực nhạt, tạo điểm nhấn nhẹ */
  padding: 12px 20px;
  border-radius: 8px; /* Bo góc mềm mại */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Bóng đổ rất nhẹ tạo chiều sâu */
  margin-bottom: 24px;
}

/* 2. Định dạng danh sách */
.breadcrumb {
  list-style: none; /* Xóa dấu chấm tròn mặc định của thẻ ul */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Tự động rớt dòng nếu đường dẫn quá dài trên điện thoại */
  align-items: center;
  gap: 8px; /* Khoảng cách giữa chữ và dấu phân cách */
  font-size: 14px; /* Kích thước chữ gọn gàng */
}

/* 3. Định dạng từng mục (li) */
.breadcrumb li {
  display: flex;
  align-items: center;
  color: #64748b; /* Màu xám cho mục cuối cùng (trang hiện tại) */
}

/* 4. Tự động thêm dấu phân cách (/) ở giữa các thẻ li */
/* Dấu này sẽ KHÔNG hiện ở mục cuối cùng nhờ lệnh :not(:last-child) */
.breadcrumb li:not(:last-child)::after {
  content: "/"; /* Bạn có thể đổi thành "›" hoặc ">" tùy sở thích */
  margin-left: 8px;
  color: #94a3b8; /* Màu dấu phân cách nhạt hơn chữ một chút */
  font-weight: 300;
}

/* 5. Định dạng đường link (thẻ a) */
.breadcrumb a {
  color: #2563eb; /* Màu xanh dương chuyên nghiệp */
  text-decoration: none; /* Bỏ gạch chân mặc định */
  font-weight: 500;
  transition: all 0.2s ease-in-out; /* Hiệu ứng chuyển màu mượt mà */
}

/* 6. Hiệu ứng khi di chuột vào link */
.breadcrumb a:hover {
  color: #1e40af; /* Màu xanh đậm hơn khi di chuột */
  text-decoration: underline; /* Hiện gạch chân để nhận biết là link có thể bấm */
  text-underline-offset: 4px; /* Gạch chân cách xa chữ ra một chút cho thoáng */
}
/* Thiết lập khung viền và font chữ cho toàn bộ bảng */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #334155;
  margin: 20px 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Tạo bóng đổ nhẹ */
  border-radius: 8px; 
  overflow: hidden; /* Cắt góc bo tròn */
}

/* Phần Tiêu đề (Header) */
table thead tr {
    background-color: var(--footer-bg);
    color: #174c9b;
    text-align: left;
}
table th {
  padding: 14px 16px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* Phần Nội dung (Body) */
table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0; /* Đường kẻ ngang mờ */
}

/* Xóa viền ngang ở dòng cuối cùng cho đẹp */
table tbody tr:last-child td {
  border-bottom: none;
}

/* Hiệu ứng đổi màu khi chuột di qua từng dòng */
table tbody tr:hover {
  background-color: #f1f5f9;
  transition: background-color 0.2s ease;
}

/* =========================================
   CĂN CHỈNH TỪNG CỘT KHÔNG CẦN DÙNG CLASS
   ========================================= */

/* Cột 1 (Model Tivi): In đậm */
table th:nth-child(1),
table td:nth-child(1) {
  font-weight: bold;
  color: #0f172a;
}

/* Cột 2 (Kích thước): Căn giữa */
table th:nth-child(2),
table td:nth-child(2) {
  text-align: center;
}

/* Cột 4 (Giá tham khảo): Căn phải */
table th:nth-child(4),
table td:nth-child(4) {
  text-align: right;
}

/* Riêng phần nội dung của cột 4 (Giá tiền): Cho chữ màu đỏ và in đậm */
table tbody td:nth-child(4) {
  color: #dc2626;
  font-weight: bold;
}
/* Dòng lẻ (1, 3, 5...) - Màu trắng mặc định */
table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Dòng chẵn (2, 4, 6...) - Màu xám nhạt */
table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Đảm bảo hiệu ứng hover nằm dưới cùng để ghi đè màu khi di chuột */
table tbody tr:hover {
  background-color: #e2e8f0; /* Đổi sang xám đậm hơn một chút khi hover */
  transition: background-color 0.2s ease;
}