/* 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 */ *, :root { --primary_color: #60a5fa; --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; } ::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; } h1, h2, h3, h4, h5, h6 { color: var(--menu-bg); } /* youtube*/ iframe { max-width: 350px; margin: auto; } /* ========================================= 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: var(--primary_color); } /* 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;} div#w-body-post-content { overflow: hidden; } /* ================================================== GIAO DIỆN MỤC LỤC (TOC) - ĐÃ FIX LỖI HIỆU ỨNG ================================================== */ .menu-post-top { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin: 24px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .toc-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; width: 100%; } .toc-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: #1e3a8a; } .menu-post-top-span { font-weight: bold; } .toc-action { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: #64748b; } /* ------------------------------------- HIỆU ỨNG MŨI TÊN XOAY ------------------------------------- */ .toc-icon-arrow { width: 16px; height: 16px; transition: transform 0.3s ease; } .toc-icon-arrow.rotate { transform: rotate(180deg); } /* ------------------------------------- HIỆU ỨNG TRƯỢT ẨN/HIỆN MỤC LỤC ------------------------------------- */ /* Trạng thái MẶC ĐỊNH (Bị ẩn) */ .menu-post-top-lists { /* Tuyệt đối không dùng display: none; ở đây để transition hoạt động */ list-style-type: decimal; margin: 0; padding-left: 24px; max-height: 0;            /* Thu gọn chiều cao về 0 */ overflow: hidden;         /* Giấu đi phần nội dung thừa */ opacity: 0;               /* Làm trong suốt */ transition: all 0.3s ease-in-out; } /* Trạng thái MỞ (Khi có class .show) */ .menu-post-top-lists.show { margin-top: 15px; max-height: 2000px;       /* Kéo dài chiều cao tối đa để hiển thị nội dung */ opacity: 1;               /* Hiển thị rõ ràng */ } /* ========================================= 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: 0px; } /* 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, td, th { white-space: normal !important; /* Quan trọng: Cho phép xuống dòng */ word-wrap: break-word !important; /* Ép chữ quá dài phải ngắt dòng */ word-break: break-all; /* Ngắt từ kể cả khi không có khoảng trắ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; } .image-css { width: clamp(250px, 80vw, 600px); height: auto; margin: 0 auto; padding: 10px; max-height: clamp(250px, 60vw, 350px); }