@charset "UTF-8"; /* ============================================================================ Livaxvietnam — giao diện công khai ============================================================================ FILE CSS DUY NHẤT của toàn bộ site công khai. Không tạo thêm file CSS nào cho từng trang hay từng partial: mọi kiểu bổ sung viết vào đây, dưới đúng mục của nó. Chỉ có hai stylesheet được nạp: bootstrap.min.css rồi tới file này. Nguồn: `css/style.css` + `css/responsive.css` của site WebForms cũ (babakagu), chuyển sang Bootstrap 5: bỏ tiền tố nhà sản xuất đã hết cần, thay float bằng flexbox, gom màu và số đo lặp lại thành biến CSS. Giao diện giữ nguyên như cũ. MỤC LỤC 1. Biến, thang chữ, nền tảng, tiện ích dùng chung 2. Biểu tượng SVG 3. Header — thanh trên cùng 4. Header — điều hướng desktop 5. Header — thanh mobile 6. Ngăn kéo menu mobile 7. Trang chủ — băng ảnh lớn 8. Trang chủ — banner 9. Trang chủ — khối giới thiệu 10. Trang chủ — băng banner cuối 11. Chân trang — danh sách đại lý 12. Chân trang 13. Nội dung soạn thảo (rich-text) 14. Dải tiêu đề chạy ngang dưới chân trang 15. Khung chờ ảnh (skeleton) 16. Danh sách sản phẩm 17. Thanh tiến trình chuyển trang 18. Chi tiết sản phẩm 19. Phóng to ảnh (lightbox) 20. Sản phẩm liên quan 21. Trang Catalogue 22. Trình xem PDF 23. Trang Giới thiệu ========================================================================= */ /* ── 1. Biến, nền tảng, tiện ích dùng chung ─────────────────────────────── */ :root { /* Đỏ thương hiệu — site cũ rải #e83828 khắp nơi; nay đổi một chỗ là đổi hết. */ --brand: #e83828; --text: #333; --text-muted: #777; --border: #e4e4e4; --border-light: #f0f0f0; /* đường bao nhẹ: khung ảnh nhỏ, vạch ngăn trong danh sách */ --surface-muted: #f5f5f5; --topbar-line-height: 35px; /* Padding dọc của mỗi mục menu — thứ DUY NHẤT quyết định chiều cao thanh điều hướng (chiều cao = 2 × giá trị này + line-height 18px). Site cũ để 47px, tức thanh cao 112px; hạ xuống 40px cho thanh gọn lại còn 98px theo yêu cầu. Sửa đúng một dòng này là đổi được chiều cao cả header. */ --nav-link-padding-y: 40px; /* ── THANG CHỮ ──────────────────────────────────────────────────────────── NGUỒN DUY NHẤT quyết định cỡ chữ của toàn site. Trước đây mỗi class tự khai một số riêng — 13.5px, 11px, 17px, 21px, 33px, 3em… — nên không chỗ nào ăn khớp chỗ nào và sửa một cỡ phải lần khắp file. QUY TẮC KHI VIẾT CLASS MỚI: KHÔNG gõ số px vào `font-size`. Chọn một bậc dưới đây; thiếu bậc thì thêm biến mới ở ngay đây chứ đừng khai số lẻ tại chỗ. Nhờ vậy bản mobile chỉ cần ghi đè MẤY BIẾN NÀY là cả site co lại theo, không phải sửa từng class. Ba bậc tiêu đề là con số bạn chốt: h1 28, h2 20, h3 18. */ /* QUY TẮC CỦA THANG NÀY: mỗi bậc = cỡ tương ứng của site cũ CỘNG 1px, và cỡ chuẩn của thân bài là 15px. Chữ 13px của bản WebForms quá nhỏ theo chuẩn hiện nay, nhưng nhích hơn một bậc thì bố cục vẫn giữ nguyên tỉ lệ cũ. Cột "cũ" ghi ngay cạnh từng dòng để lần sau đối chiếu không phải mở lại `style.css`. */ /* Tiêu đề TRANG TRONG (Products, Company…). Site cũ không khai riêng nên nó rơi vào mặc định h1 của Bootstrap 4: 2.5rem = 40px. Khai thành bậc riêng để bản mobile thu được mà không đụng H1 của các khối. */ --fs-page-title: 41px; /* cũ 40 */ --fs-h1: 28px; /* H1 và mọi tiêu đề khối lớn — con số đã chốt của dự án */ --fs-h2: 22px; /* cũ 21 — tiêu đề khối */ --fs-h3: 18px; /* cũ 17 — tiêu đề cột bên, tiêu đề nhỏ */ --fs-md: 16px; /* cũ 15 — mục danh mục, biểu tượng thanh trên cùng */ --fs-h4: 16px; /* h4, h5, h6 — dưới h3 thì không chia nhỏ thêm nữa */ --fs-base: 15px; /* CHUẨN: chữ thân bài, menu chính, nội dung chung (cũ 14) */ --fs-sm: 14px; /* cũ 13 — tên sản phẩm, đường dẫn phân cấp, phân trang */ --fs-xs: 13px; /* cũ 12 — thanh trên cùng, menu con */ --fs-xxs: 12px; /* cũ 11 — dòng bản quyền */ /* Biểu tượng: cỡ theo Ô CHỨA nó, không theo cấp tiêu đề — nên tách riêng khỏi thang chữ, đổi thang chữ không được làm nút bấm to nhỏ theo. */ --fs-icon: 20px; --fs-icon-lg: 24px; /* ── NHỊP DỌC ───────────────────────────────────────────────────────────── Chiều cao dòng và khoảng cách giữa các đoạn của văn bản dài đi cùng một cặp: chỉ cần hai con số này ăn khớp thì mắt mới tách được khối này với khối kia. Trước đây `.about-intro__content` để line-height 29px trong khi các đoạn chỉ cách nhau 16px — dòng thưa hơn hẳn, cả khối nhìn như một mảng chữ liền. Nay dòng thu về ≈25px nên khoảng cách đoạn 16px đã đủ tách khối mà không làm trang thưa ra. */ --lh-base: 1.55; /* 16px × 1.55 ≈ 25px */ --para-gap: 1rem; /* 16px — khoảng cách giữa các đoạn */ --transition-fast: .25s; --transition-base: .3s; /* Lớp phủ + phóng ảnh của thẻ banner. Tách khỏi `--transition-base` để chỉnh riêng mà không kéo theo mọi hiệu ứng khác của site. Vào NHANH hơn ra: chạm chuột phải thấy phản hồi gần như tức thì, còn rời chuột thì tan chậm lại cho êm mắt. Hai chiều bằng nhau luôn cho cảm giác máy móc. Đường cong easeOutQuad — mềm hơn `ease-out` mặc định của trình duyệt, gần như không thấy điểm dừng ở cuối. */ --overlay-in: .4s; --overlay-out: .55s; --overlay-ease: cubic-bezier(.25, .46, .45, .94); } body { font-family: Arial, Helvetica, sans-serif; font-size: var(--fs-base); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--brand); } /* Site cũ nới container tới 1800px ở màn hình lớn. Bootstrap 5 dừng ở 1320px nên phải ghi đè, nếu không bố cục hẹp hẳn lại so với bản gốc. */ @media (min-width: 1200px) { .container { max-width: 1800px; } } /* Tiêu đề khối lớn — dùng ở khối giới thiệu và các trang nội dung. */ .section-title { font-size: var(--fs-h1); line-height: 1.5em; font-weight: 700; text-transform: capitalize; margin-bottom: 25px; } /* Thẻ tiêu đề ở BẤT KỲ đâu trong site đều theo đúng một thang, kể cả những thẻ do biên tập viên gõ trong trình soạn thảo. Bootstrap mặc định cho h1 tới 2.5rem (40px) và co giãn theo bề ngang màn hình — ghi đè ở đây để cỡ chữ do dự án quyết định, không do thư viện. Mục 13 (`.rich-text`) vì thế cũng không cần khai lại cỡ nữa. */ h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4, h5, h6 { font-size: var(--fs-h4); } /* ── Thang chữ trên MÀN HÌNH NHỎ ──────────────────────────────────────────── Chỉ ghi đè MẤY BIẾN, không đụng tới một class nào — cả site tự co theo. Muốn chỉnh cỡ chữ mobile về sau thì sửa đúng khối này. Vì sao phải thu: 28px trên màn hình 360px chiếm gần một phần ba bề ngang, tiêu đề dài là vỡ thành ba bốn dòng. Bậc dưới thu ÍT hơn bậc trên — chữ thân bài giữ nguyên 14px vì thu nữa là khó đọc, còn khoảng cách giữa các bậc vẫn đủ để nhận ra thứ bậc. Mốc 767.98px khớp breakpoint mobile của site cũ và của mọi media query khác trong file. */ @media (max-width: 767.98px) { :root { --fs-h1: 22px; /* 28 → 22 */ --fs-page-title: 30px; /* 41 → 30: 41px chiếm gần hết bề ngang màn 360px */ --fs-h2: 19px; /* 22 → 19 */ --fs-h3: 16px; /* 18 → 16 */ --fs-md: 15px; /* 16 → 15 */ --fs-h4: 15px; /* 16 → 15 */ /* Thân bài giữ nguyên 15px: thu nữa là khó đọc trên điện thoại. Chỉ các bậc TIÊU ĐỀ hạ xuống, vì chính chúng mới chiếm chỗ và vỡ dòng trên màn hẹp. */ --fs-xs: 12px; --fs-icon: 18px; --fs-icon-lg: 22px; } } /* Điện thoại nhỏ (dưới 576px): hạ thêm một nấc cho tiêu đề lớn. */ @media (max-width: 575.98px) { :root { --fs-h1: 20px; --fs-h2: 17px; } } /* Ảnh trong bố cục cũ không bị kéo giãn theo khung; giữ nguyên tỉ lệ gốc. */ .img-fluid { width: auto; max-width: 100%; height: auto; } /* Link nhảy thẳng tới nội dung, chỉ hiện khi dùng bàn phím. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 10px 16px; background: var(--brand); color: #fff; } .skip-link:focus { left: 0; color: #fff; } /* ── 2. Biểu tượng SVG ──────────────────────────────────────────────────── */ /* Sprite chỉ chứa định nghĩa, bản thân nó không được chiếm chỗ trên trang. */ .icon-sprite { display: none; } .icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; /* Kế thừa màu chữ của chỗ đặt — không cần class màu riêng cho từng nơi. */ color: inherit; } /* ── 3. Header — thanh trên cùng ────────────────────────────────────────── */ .site-header { position: relative; z-index: 9; } /* Site cũ: `.top-header a { font-size: 12px; font-weight: 400 }` và `.top-header span .fa { font-size: 15px }` cho biểu tượng. */ .topbar { border-bottom: 1px solid var(--border); background: #fff; font-size: var(--fs-xs); } .topbar__contacts { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; } .topbar__contacts li { display: flex; align-items: center; gap: 10px; padding: 10px; line-height: var(--topbar-line-height); border-right: 1px solid var(--border); } .topbar__contacts li:first-child { padding-left: 0; } .topbar__contacts .icon { font-size: var(--fs-md); color: var(--brand); } /* Bộ đổi ngôn ngữ — các lá cờ nằm CẠNH NHAU, không gói trong dropdown (theo mẫu vilacojsc). Bấm một phát là đổi, và nhìn là biết site có mấy ngôn ngữ. */ .lang-switch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; line-height: var(--topbar-line-height); border-left: 1px solid var(--border); border-right: 1px solid var(--border); } .lang-switch__label { color: var(--text-muted); } .lang-switch__item { display: inline-flex; align-items: center; gap: 5px; color: var(--text); /* Viền trong suốt giữ sẵn chỗ, để cờ không nhích khi chuyển sang trạng thái đang chọn. */ border-bottom: 2px solid transparent; opacity: .65; transition: opacity var(--transition-fast), border-color var(--transition-fast); } .lang-switch__item:hover { opacity: 1; } /* Ngôn ngữ đang xem: rõ hẳn lên, gạch chân đỏ thương hiệu. */ .lang-switch__item.is-active { opacity: 1; border-bottom-color: var(--brand); font-weight: 700; } .lang-switch__flag { display: block; width: 24px; height: auto; } /* Mã ngôn ngữ chỉ là phương án dự phòng khi KHÔNG có ảnh cờ, hoặc ảnh cờ hỏng (main.js gắn .has-broken-flag). Có cờ rồi thì hai thứ cùng hiện là thừa. */ .lang-switch__item:has(.lang-switch__flag) .lang-switch__code { display: none; } .lang-switch__item.has-broken-flag .lang-switch__code { display: inline; } /* Màn hình nhỏ: bộ cờ ngôn ngữ chuyển hẳn xuống thanh mobile (`.lang-dd`), nên ẩn bản ở thanh liên hệ — để cả hai cùng hiện là đưa ra hai chỗ đổi ngôn ngữ trên cùng một trang. */ @media (max-width: 767.98px) { .lang-switch { display: none; } } @media (max-width: 575.98px) { .topbar { padding: 5px 0; } .topbar__contacts li { border: 0; padding: 0 8px 0 0; line-height: 20px; } } /* ── 4. Header — điều hướng desktop ─────────────────────────────────────── */ /* KHÔNG có padding dọc ở đây — chiều cao thanh do padding của chính các mục menu quyết định, y như site cũ. Site cũ đẩy logo xuống bằng `.logo { margin-top: 35px }` vì hàng của nó là `.row` trần, không căn giữa. Hàng ở đây dùng `align-items-center`: cột menu định chiều cao hàng và logo tự nằm giữa, nên KHÔNG cần margin cho logo lẫn padding cho thanh. Thêm bất kỳ cái nào trong hai thứ đó cũng chỉ làm header cao lên vô cớ. */ .navbar-shell { display: none; background: #fff; } @media (min-width: 768px) { .navbar-shell { display: block; } } /* Dính vào đỉnh màn hình khi cuộn qua — class do main.js gắn. */ .is-stuck { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: #fff; box-shadow: 0 1px 3px rgba(27, 27, 27, .1), 0 4px 8px rgba(27, 27, 27, .1); } .site-logo__text { font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase; } .main-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin: 0; padding: 0; list-style: none; } .main-nav__item { position: relative; } .main-nav__link { display: flex; align-items: center; gap: 7px; padding: var(--nav-link-padding-y) 15px; /* Site cũ: `#main-menu .navbar .navbar-nav > li > a { font-size: 14px; font-weight: bold; line-height: 18px; text-transform: uppercase }` — 14 + 1 = bậc chuẩn. */ font-size: var(--fs-base); font-weight: 700; line-height: 18px; text-transform: uppercase; color: var(--text); } .main-nav__item:last-child > .main-nav__link { padding-right: 0; } .main-nav__item--parent > .main-nav__link .icon { font-size: var(--fs-h4); } /* Menu con mở khi rê chuột — thuần CSS, đúng hành vi site cũ, không cần JS. */ .main-nav__submenu { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 200px; margin: 0; padding: 10px; list-style: none; background: #fff; border-top: 2px solid var(--brand); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); opacity: 0; visibility: hidden; /* Ba thứ chống giật, thiếu cái nào cũng thấy: 1. `visibility` PHẢI nằm trong transition. Nó là thuộc tính rời rạc nên không mượt dần, nhưng đưa vào đây thì trình duyệt giữ menu hiển thị suốt lúc mờ dần rồi mới ẩn ở khung hình cuối. Thiếu nó thì rê chuột ra là menu BIẾN MẤT ngay, cắt ngang hiệu ứng — đó chính là cú giật rõ nhất. 2. Quãng dịch 10px thay vì 40px và .22s thay vì .5s: dịch xa mà chậm thì mắt kịp thấy từng bước, hoá ra khựng. 3. `will-change` đẩy menu sang layer riêng để trình duyệt không phải vẽ lại nền mỗi khung hình. */ transform: translateY(-10px); transition: opacity .22s ease, transform .22s ease, visibility .22s; will-change: opacity, transform; } /* Menu con của menu con mở sang ngang, tránh chồng lên nhau. */ .main-nav__submenu .main-nav__submenu { top: 0; left: 100%; } .main-nav__item:hover > .main-nav__submenu, .main-nav__item:focus-within > .main-nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* Site cũ: `#main-menu .navbar-nav .dropdown-item a { font-size: 12px; padding: 0 10px }` trong khi `.dropdown-item` mang `padding: 10px 0` — cộng lại thành 10px đều bốn phía. */ .main-nav__submenu .main-nav__link { padding: 10px; font-size: var(--fs-xs); font-weight: 400; text-transform: none; } .main-nav__submenu .main-nav__link:hover { color: var(--brand); } @media (min-width: 768px) and (max-width: 1024px) { .main-nav__link { padding: 15px 7px; } } /* ── 5. Header — thanh mobile ───────────────────────────────────────────── */ .mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Đệm trên/dưới rộng hơn hai bên: logo và hai nút cần khoảng thở, nếu không cả thanh trông chật và nặng. */ padding: 14px 15px; background: #fff; border-bottom: 1px solid var(--border); } @media (min-width: 768px) { .mobile-bar { display: none; } } /* Logo mobile cao 36px: bằng đúng chiều cao chữ của nút menu bên cạnh, nên hai bên cân nhau. 60px trước đây làm logo lấn gần hết thanh, chữ BABAKAGU to gần bằng tiêu đề trang và cả thanh trông nặng nề. */ /* Logo cao 26px: nhỏ hơn hẳn hai nút bên cạnh (44px) nên nó không còn là thứ nặng nhất trên thanh. 36px trước đây làm chữ BABAKAGU gần bằng cỡ tiêu đề trang ngay bên dưới. `max-width` chặn logo dài đẩy nút menu ra khỏi màn hình. */ .mobile-bar__logo img { display: block; max-height: 26px; max-width: 55vw; width: auto; } .mobile-bar__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: none; color: var(--text); font-size: var(--fs-icon-lg); cursor: pointer; } /* Nút kính lúp trên thanh điều hướng — cùng chiều cao với mục menu nên hàng không lệch. */ .main-nav__item--search { display: flex; align-items: center; } .main-nav__search { display: flex; align-items: center; justify-content: center; padding: 0 0 0 15px; border: 0; background: none; color: var(--text); font-size: var(--fs-icon); cursor: pointer; transition: color var(--transition-fast); } .main-nav__search:hover { color: var(--brand); } /* Bộ chọn ngôn ngữ trong thanh điều hướng: CHỈ hiện khi thanh đã dính lên đỉnh màn hình. Chưa cuộn thì thanh liên hệ phía trên vẫn còn đó với bộ cờ của nó — bày thêm một bộ nữa chỉ làm rối. Cuộn qua rồi thì đây là chỗ duy nhất còn đổi được ngôn ngữ. */ .main-nav__item--lang { display: none; align-items: center; padding-left: 6px; } .navbar-shell.is-stuck .main-nav__item--lang { display: flex; } /* Trong thanh điều hướng, nút chỉ cao bằng hàng menu chứ không cố định 44px như trên mobile. */ .main-nav__item--lang .lang-dd__toggle { height: auto; } /* Các nút bên phải thanh mobile (tìm kiếm, ngôn ngữ, menu) đứng sát nhau. */ .mobile-bar__actions { display: flex; align-items: center; gap: 2px; } /* Bộ chọn ngôn ngữ dạng đổ xuống — chỉ dùng trên thanh mobile. Bản máy tính vẫn là các cờ nằm cạnh nhau ở thanh liên hệ (`.lang-switch`), nơi có đủ chỗ. */ .lang-dd { position: relative; } .lang-dd__toggle { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px; border: 0; background: none; color: var(--text); font-size: var(--fs-xs); cursor: pointer; } .lang-dd__toggle .icon { font-size: var(--fs-sm); transition: transform var(--transition-fast); } .lang-dd.is-open .lang-dd__toggle .icon { transform: rotate(180deg); } .lang-dd__flag { display: block; width: 24px; height: auto; } .lang-dd__menu { position: absolute; top: 100%; right: 0; z-index: 1000; min-width: 160px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 12px rgba(0, 0, 0, .1); display: none; } .lang-dd.is-open .lang-dd__menu { display: block; } .lang-dd__item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: var(--fs-sm); color: var(--text); } .lang-dd__item:hover, .lang-dd__item.is-active { color: var(--brand); background: var(--surface-muted); } /* ── 6b. Sidebar tìm kiếm ─────────────────────────────────────────────────── Trượt từ mép phải, dựng theo mẫu `search-sidebar` của vilacojsc. `visibility` có transition-delay khi ĐÓNG: giữ khối hiển thị thêm đúng bằng thời gian panel trượt ra, nếu không nó biến mất ngay từ khung hình đầu và người dùng thấy panel "nháy tắt" thay vì trượt đi. */ .search-sidebar { position: fixed; inset: 0; z-index: 3000; visibility: hidden; pointer-events: none; transition: visibility 0s linear .35s; } .search-sidebar__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .35s ease; } .search-sidebar__panel { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: 420px; max-width: 100%; height: 100%; background: #fff; transform: translateX(100%); transition: transform .35s ease; } .search-sidebar.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .search-sidebar.is-open .search-sidebar__overlay { opacity: 1; } .search-sidebar.is-open .search-sidebar__panel { transform: translateX(0); } .search-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--brand); color: #fff; } .search-sidebar__title { font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; } .search-sidebar__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #fff; font-size: var(--fs-icon); cursor: pointer; } /* Ô chọn phạm vi + ô nhập nằm cùng một hàng. Dưới 400px thì xuống dòng — nhét cả hai vào một hàng trên màn hẹp thì ô nhập chỉ còn chỗ cho vài ký tự. */ .search-sidebar__form { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px; } .search-sidebar__box { display: flex; align-items: stretch; flex: 1 1 200px; min-width: 0; border: 1px solid var(--border); transition: border-color var(--transition-fast); } /* Viền đổi màu khi con trỏ đang ở trong ô — dấu hiệu duy nhất cho biết gõ vào đâu, vì ô nhập không có nền riêng. `:focus-within` bắt được cả lúc focus nằm ở nút bên trong. */ .search-sidebar__box:focus-within { border-color: var(--brand); } .search-sidebar__box input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; background: none; font-size: var(--fs-base); color: var(--text); } .search-sidebar__box input:focus { outline: none; } .search-sidebar__box input::-webkit-search-cancel-button { -webkit-appearance: none; } .search-sidebar__box button { display: flex; align-items: center; justify-content: center; width: 46px; padding: 0; border: 0; background: var(--brand); color: #fff; cursor: pointer; } /* Ô chọn phạm vi tự dựng — thẻ `option` của `select` không định kiểu được. */ .ss-dd { position: relative; flex: 0 1 150px; min-width: 0; } .ss-dd__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 100%; padding: 10px 12px; border: 1px solid var(--border); background: #fff; font-size: var(--fs-sm); color: var(--text); cursor: pointer; } .ss-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-dd__menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; background: #fff; border: 1px solid var(--border); border-top: 0; display: none; } .ss-dd.is-open .ss-dd__menu { display: block; } .ss-dd__menu li { padding: 9px 12px; font-size: var(--fs-sm); cursor: pointer; } .ss-dd__menu li:hover, .ss-dd__menu li.is-active { background: var(--surface-muted); color: var(--brand); } /* Kết quả gợi ý trong sidebar tìm kiếm — dáng lấy từ `search-sidebar` của vilacojsc: ảnh vuông có viền mảnh, bên phải là nhãn loại đỏ in hoa rồi tới tên đậm. */ .search-sidebar__results { flex: 1; min-height: 0; padding: 0 20px 20px; overflow-y: auto; } .ss-status { padding: 10px 0; font-size: var(--fs-sm); color: var(--text-muted); } .ss-list { margin: 0; padding: 0; list-style: none; } .ss-list li + li { border-top: 1px solid var(--border-light); } .ss-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--text); } a.ss-item:hover .ss-item__name { color: var(--brand); } /* Ô ảnh giữ chỗ cố định: ảnh về sau cũng không làm danh sách nhảy. Viền nhạt hơn `--border` (dùng cho khung nội dung) vì đây chỉ là đường bao một tấm ảnh nhỏ; đậm bằng nhau thì cả danh sách trông như một bảng kẻ ô. */ .ss-item__thumb { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 56px; padding: 5px; overflow: hidden; border: 1px solid var(--border-light); background: #fff; } /* `contain` chứ không phải `cover`: có padding rồi mà vẫn cắt ảnh thì phần trắng quanh ảnh thành vô nghĩa — ảnh sản phẩm cần thấy trọn dáng. */ .ss-item__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .ss-item__body { flex: 1; min-width: 0; } /* Nhãn loại: một dòng nhỏ màu thương hiệu, cho biết kết quả này là gì. Hiện chỉ có sản phẩm; thêm loại khác về sau thì nhãn đọc từ máy chủ thay vì cố định như bây giờ. */ .ss-item__kind { display: block; margin-bottom: 3px; font-size: var(--fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--brand); } .ss-item__name { display: block; font-size: var(--fs-sm); font-weight: 700; transition: color var(--transition-fast); } .ss-viewall { display: block; padding: 14px 0 4px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--brand); } /* ── 6. Ngăn kéo menu mobile ────────────────────────────────────────────── */ /* Dựng theo mẫu `nav-drawer` của dự án vilacojsc, thay cặp thư viện jquery.mmenu + jquery.mhead của site cũ. Mở/đóng do main.js lo. */ .nav-drawer { position: fixed; inset: 0 auto 0 0; z-index: 9999; display: flex; flex-direction: column; width: 100%; max-width: 400px; height: 100dvh; background: #fff; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); } .nav-drawer.is-open { transform: translateX(0); box-shadow: 6px 0 40px rgba(0, 0, 0, .35); } @media (min-width: 768px) { .nav-drawer, .nav-overlay { display: none; } } .nav-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .6); } .nav-drawer__head { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 120px; padding: 16px 48px; overflow: hidden; background: var(--brand); } .nav-drawer__logo img { display: block; max-height: 88px; max-width: 200px; width: auto; object-fit: contain; } .nav-drawer__logo .site-logo__text { color: #fff; } .nav-drawer__close { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; background: none; color: #fff; font-size: var(--fs-icon); cursor: pointer; transition: opacity .2s; } .nav-drawer__close:hover { opacity: .75; } .nav-drawer__body { display: flex; flex: 1; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cdd2d9 #f3f4f6; } .nav-drawer__menu { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; } .nav-drawer__menu > .nav-drawer__item { border-bottom: 1px solid #f3f4f6; } .nav-drawer__menu > .nav-drawer__item:last-child { border-bottom: none; } .nav-drawer__row { display: flex; align-items: stretch; } .nav-drawer__row .nav-drawer__link { flex: 1; min-width: 0; } .nav-drawer__link { display: flex; align-items: center; gap: 8px; padding: 14px; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #1f2430; } /* Thụt lề theo cấp. Sâu hơn cấp 3 dùng chung mức của cấp 3 — thụt thêm thì chữ hết chỗ trên màn hình hẹp (xem `_DrawerItem.cshtml`). */ .nav-drawer__link--d1, .nav-drawer__link--d2, .nav-drawer__link--d3 { padding-top: 11px; padding-bottom: 11px; font-size: var(--fs-sm); font-weight: 400; text-transform: none; letter-spacing: 0; color: #4b5563; } .nav-drawer__link--d1 { padding-left: 30px; } .nav-drawer__link--d2 { padding-left: 46px; } .nav-drawer__link--d3 { padding-left: 62px; } .nav-drawer__link .icon { font-size: var(--fs-xxs); color: #b6bcc4; } /* Chỉ áp hiệu ứng rê chuột trên thiết bị có chuột — tránh màu "dính" sau khi chạm. */ @media (hover: hover) { .nav-drawer__link:hover, .nav-drawer__expand:hover { color: var(--brand); } } .nav-drawer__expand { flex: 0 0 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: #9ca3af; font-size: var(--fs-base); cursor: pointer; transition: color .2s; } .nav-drawer__expand .icon { color: inherit; transition: transform var(--transition-base); } .nav-drawer__item--parent.is-expanded > .nav-drawer__row .nav-drawer__expand .icon { transform: rotate(180deg); } /* Chiều cao mở do main.js đặt bằng chiều cao thật, nên hiệu ứng không giật. */ .nav-drawer__submenu { margin: 0; padding: 0; list-style: none; max-height: 0; overflow: hidden; background: #fafbfc; transition: max-height .35s ease; } /* Cấp lồng sâu hơn thì nền đậm dần, để nhìn ra ranh giới giữa các cấp. */ .nav-drawer__submenu .nav-drawer__submenu { background: #f4f5f7; } .nav-drawer__foot { flex-shrink: 0; margin-top: auto; padding: 16px; border-top: 1px solid #eef0f2; background: #f8f9fa; } .nav-drawer__company { margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .nav-drawer__contact { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: var(--fs-sm); line-height: 1.4; color: #4b5563; } .nav-drawer__contact .icon { margin-top: 3px; color: var(--brand); } /* Khoá cuộn nền khi ngăn kéo đang mở — class do main.js gắn lên . */ .has-drawer-open { overflow: hidden; } /* ── 7. Trang chủ — băng ảnh lớn ────────────────────────────────────────── */ .hero-slider { margin-bottom: 15px; } .hero-slider .carousel-item img { width: 100%; height: auto; } /* Tốc độ chuyển cảnh do QUẢN TRỊ đặt (`/admin/slide` → Cấu hình). main.js đọc `data-hero-transition` rồi gán biến này; 800ms là giá trị lùi về khi JS chưa chạy — đúng bằng mặc định của slippry mà site cũ dùng (`speed: 800`). */ .hero-slider .carousel { --hero-speed: 800ms; } /* Băng ảnh CUỐI trang cần chừa khoảng thở với khối phía trên và với chân trang; băng đầu trang thì không — nó dính ngay dưới header, đúng như site cũ. */ /* Băng ảnh cuối trang mang thêm class `container` của Bootstrap (đặt ở HomeController), đúng như site cũ: `
`. Băng ĐẦU trang thì không — nó tràn hết bề ngang màn hình. */ .hero-slider--bottom { margin-top: 2rem; margin-bottom: 2rem; } /* Hiệu ứng MỜ CHỒNG: đổi độ mờ. */ .hero-slider .carousel-fade .carousel-item, .hero-slider .carousel.carousel-fade .carousel-item { transition: opacity var(--hero-speed) ease-in-out; } /* Hiệu ứng TRƯỢT NGANG: đổi vị trí. Bootstrap để 600ms nên phải ghi đè cả hai kiểu. */ .hero-slider .carousel:not(.carousel-fade) .carousel-item { transition: transform var(--hero-speed) ease-in-out; } /* Kéo bằng chuột: con trỏ nói cho người dùng biết là kéo được, và trong lúc kéo thì trình duyệt không được tự bôi đen ảnh/chữ (xem main.js). */ .hero-slider .carousel-inner, .product-gallery .carousel-inner { cursor: grab; } /* Quản trị tắt vuốt/kéo — con trỏ phải là mũi tên bình thường, đừng mời gọi thao tác mà chương trình không còn phản hồi. */ .hero-slider .carousel-inner.no-drag { cursor: default; } .hero-slider .carousel-inner.is-dragging, .product-gallery .carousel-inner.is-dragging { cursor: grabbing; user-select: none; } /* Trình duyệt tự cho kéo-thả ảnh VÀ liên kết đi nơi khác — chặn cả hai, nếu không mỗi lần kéo slide lại kéo theo bóng mờ của tấm ảnh và thao tác kéo vỡ ngay từ đầu. Slide thường bọc trong thẻ nên phải chặn cả thẻ đó, không chỉ . */ .hero-slider .carousel-item img, .hero-slider .carousel-item a { -webkit-user-drag: none; user-select: none; } /* Mũi tên: hình tròn trắng mờ, chevron màu đỏ thương hiệu. Site cũ không có mũi tên — đây là phần thêm, nên giữ nhẹ nhàng để không lấn át ảnh. */ .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: auto; padding: 0 2%; opacity: 0; transition: opacity var(--transition-base); } /* Chỉ hiện khi rê chuột vào băng ảnh — trên cảm ứng thì luôn hiện, vì ở đó không có trạng thái "rê chuột" để mà hiện ra. */ .hero-slider:hover .carousel-control-prev, .hero-slider:hover .carousel-control-next, .hero-slider .carousel-control-prev:focus-visible, .hero-slider .carousel-control-next:focus-visible { opacity: 1; } @media (hover: none) { .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { opacity: .85; } } .hero-slider .carousel-control-prev-icon, .hero-slider .carousel-control-next-icon { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, .85); background-size: 45%; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); transition: background-color var(--transition-fast); } .hero-slider .carousel-control-prev:hover .carousel-control-prev-icon, .hero-slider .carousel-control-next:hover .carousel-control-next-icon { background-color: #fff; } /* Chevron của Bootstrap là ảnh SVG nhúng sẵn màu trắng — thay bằng bản màu đỏ thương hiệu (#e83828) để khớp bảng màu site. */ .hero-slider .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e83828'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); } .hero-slider .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e83828'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } @media (max-width: 575.98px) { .hero-slider .carousel-control-prev-icon, .hero-slider .carousel-control-next-icon { width: 34px; height: 34px; padding: 9px; } } /* ── 8. Trang chủ — banner ──────────────────────────────────────────────── */ .banner-card { position: relative; margin: 15px 0; overflow: hidden; } .banner-card__media { display: block; position: relative; } .banner-card__media img { display: block; /* Ảnh gốc rộng tới 1770px nhưng hiện ra chỉ vài trăm px. Phóng một tấm ảnh cỡ đó bằng CPU là nguồn giật chính: `will-change` + `backface-visibility` đẩy nó sang layer riêng của GPU, trình duyệt chỉ việc biến đổi layer sẵn có. */ transform: scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; /* Cùng thời lượng và cùng đường cong với lớp phủ: hai hiệu ứng chạy trên cùng một thẻ, lệch nhịp là mắt nhận ra ngay dù từng cái riêng lẻ đều mượt. */ transition: transform var(--overlay-out) var(--overlay-ease); } .banner-card:hover .banner-card__media img { transform: scale(1.03); transition-duration: var(--overlay-in); } /* Lớp phủ tối khi rê chuột, để chữ đè lên vẫn đọc được. Pseudo-element TỒN TẠI SẴN với `opacity: 0`, chứ không sinh ra lúc hover. Khai `content` ngay trong `:hover` thì lớp phủ chỉ có mặt kể từ khung hình đầu tiên của thao tác — không có gì để mờ dần, nên nó bụp ra đen kịt. THỨ TỰ CHỒNG LỚP trong khối này, đừng đổi lẻ tẻ: 0 — vệt sáng của khung chờ ảnh (`.media-skeleton::after`) 1 — chính tấm ảnh (`.media-skeleton img`) 2 — lớp phủ tối này 3 — chữ tên banner Lớp phủ PHẢI lớn hơn 1. Ảnh được `.media-skeleton img` gán `z-index: 1`; để lớp phủ cũng ở mức 1 thì hai bên hoà nhau và thứ tự DOM quyết định — pseudo-element đứng trước nội dung, nên ẢNH VẼ ĐÈ LÊN lớp phủ và nó biến mất hoàn toàn. `will-change: opacity` đẩy lớp phủ sang layer riêng: đổi độ mờ khi đó chỉ là việc của bộ ghép layer, không bắt trình duyệt vẽ lại cả vùng ảnh mỗi khung hình. Không có nó thì lớp phủ repaint trên luồng chính trong khi ảnh đang phóng to trên GPU — hai bên lệch nhịp, và đó là cảm giác rề rà khi lớp phủ hiện ra. */ .banner-card__media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(16, 16, 16, .4); opacity: 0; pointer-events: none; /* `will-change` + `translateZ(0)` cùng lúc là CÓ CHỦ Ý, không phải thừa: `will-change` là gợi ý mà trình duyệt được quyền bỏ qua khi có quá nhiều phần tử xin layer, còn `translateZ(0)` thì buộc tạo layer thật. Có layer riêng thì đổi độ mờ chỉ là việc của bộ ghép layer, không bắt vẽ lại cả vùng ảnh mỗi khung hình. Thời lượng khai ở đây là lượt RỜI chuột; lượt vào ghi đè ở khối `:hover` bên dưới. */ will-change: opacity; transform: translateZ(0); transition: opacity var(--overlay-out) var(--overlay-ease); } .banner-card:hover .banner-card__media::before { opacity: 1; transition-duration: var(--overlay-in); } .banner-card__label { position: absolute; top: 20px; left: 35px; z-index: 3; font-size: var(--fs-h1); text-transform: uppercase; color: var(--brand); } .banner-card__label a { color: var(--brand); } /* ── 9. Trang chủ — khối giới thiệu ─────────────────────────────────────── */ .about-intro { margin: 15px auto; } /* Màu nền do admin chọn. `--about-intro-bg` được main.js gán từ `data-bg-color`; không có thì giá trị dự phòng #dfdfdf giữ nguyên màu site cũ. */ .about-intro__inner { padding: 45px; background: var(--about-intro-bg, #dfdfdf); } /* Tiêu đề là của CẢ khối (ảnh + chữ) nên căn giữa trên toàn chiều ngang, không bám theo cột nội dung như trước. */ .about-intro__title { text-align: center; } /* Không bù lề trên nữa: nội dung được căn giữa theo chiều dọc với ảnh (`align-items-center` ở hàng), nên mọi khoảng bù thủ công đều làm nó lệch khỏi tâm. */ .about-intro__content { font-size: var(--fs-base); } @media (max-width: 575.98px) { .about-intro__inner { padding: 25px; } /* Màn hình hẹp: ảnh và chữ xếp chồng, cần một quãng thở giữa hai khối. */ .about-intro__content { padding-top: 30px; } } /* ── 10. Trang chủ — băng banner cuối ───────────────────────────────────── */ .banner-carousel { margin: 15px auto; padding-bottom: 20px; } .banner-carousel .carousel-indicators { bottom: -5px; margin-bottom: 0; } /* Chấm chỉ mục tròn, xám; chấm đang xem đổi sang đỏ thương hiệu. */ .banner-carousel .carousel-indicators [data-bs-target], .hero-slider .carousel-indicators [data-bs-target] { width: 15px; height: 15px; margin: 0 5px; border: none; border-radius: 50%; background: #cdcdcd; opacity: 1; } .banner-carousel .carousel-indicators .active, .hero-slider .carousel-indicators .active { background: var(--brand); } /* ── 11. Chân trang — danh sách đại lý ──────────────────────────────────── */ .dealers { padding: 30px 0; border-top: 5px solid var(--brand); } .dealers b { font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase; } /* ── 12. Chân trang ─────────────────────────────────────────────────────── */ .site-footer { border-top: 5px solid var(--brand); background: var(--surface-muted); } .site-footer__main { padding: 50px 15px; } .site-footer__heading { margin-bottom: 20px; font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase; } .contact-list { margin: 0; padding: 0; list-style: none; } .contact-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; font-size: var(--fs-base); } .contact-list .icon { margin-top: 3px; color: var(--brand); } .social-block { text-align: center; } .social-block .site-footer__heading { padding-bottom: 35px; font-size: var(--fs-h3); } .social-block__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px; } .social-block__links a { color: #999; font-size: var(--fs-icon); line-height: 1; } .social-block__links a:hover { color: var(--brand); } .site-footer__bottom { padding: 17px 0; background: #929395; font-size: var(--fs-xxs); color: #fff; } /* ── 13. Nội dung soạn thảo (rich-text) ─────────────────────────────────── */ /* HTML do biên tập viên nhập bằng TinyMCE. Không kiểm soát được thẻ bên trong nên chỉ chặn hai thứ hay làm vỡ bố cục: ảnh và khung nhúng tràn ra ngoài khung. */ /* Ảnh do biên tập viên chèn bằng TinyMCE mang sẵn kích thước NỘI TUYẾN (`style="height:375px; width:1000px"`). Trên màn hình hẹp, `max-width: 100%` kéo bề ngang xuống còn ~360px trong khi chiều cao vẫn bị ghim ở 375px — ảnh méo dọc. `!important` ở đây là bắt buộc, không phải lười: style nội tuyến có độ ưu tiên cao hơn mọi selector, chỉ `!important` mới thắng được. Site cũ cũng phải làm đúng vậy (`.blog-content img { height: auto !important }`). Không sửa dữ liệu vì hơn 1000 bài viết và mô tả sản phẩm đều mang kiểu ghi này. */ .rich-text img { max-width: 100%; height: auto !important; } /* Khung nhúng (YouTube, bản đồ…). `height: auto` KHÔNG dùng được cho iframe: nó không có kích thước nội tại như ảnh, nên trình duyệt rơi về thuộc tính `height` trong mã nhúng (thường 315px) trong khi bề ngang đã kéo full — video bị bẹt ra thành một dải ngang. `aspect-ratio` giữ đúng khung hình 16/9 ở mọi bề ngang. Mã nhúng nào tự khai tỉ lệ khác thì chỉnh trong trình soạn thảo, không phải ở đây. */ /* Khung nhúng (YouTube, bản đồ…). GIỮ NGUYÊN bề ngang trong mã nhúng — biên tập viên chọn cỡ nào thì hiện đúng cỡ đó; ép `width: 100%` làm mọi video căng hết khung nội dung, kể cả video chỉ định 560px. Chỉ CHIỀU CAO bị ép: iframe không có kích thước nội tại nên `height: auto` một mình sẽ rơi về thuộc tính `height` trong mã nhúng (thường 315px) và video bẹt ra khi bề ngang co lại. `aspect-ratio` tính chiều cao theo bề ngang THỰC TẾ ở mọi khổ màn hình. `max-width: 100%` chặn tràn: video 1000px trên màn 360px sẽ co lại, và chiều cao co theo đúng tỉ lệ. `!important` vì mã nhúng ghi `height` nội tuyến. */ .rich-text iframe { /* KHÔNG `display: block`: biên tập viên căn khung nhúng bằng `text-align` trên thẻ

bọc ngoài (`

`), mà `text-align` chỉ tác động lên nội dung dòng — đặt block là căn giữa mất tác dụng và video dạt về trái. Để iframe ở dạng inline mặc định thì căn trái/giữa/phải do chính nội dung quyết định, đúng như site cũ. */ max-width: 100%; aspect-ratio: 16 / 9; height: auto !important; border: 0; /* Iframe inline nằm trên đường cơ sở của chữ nên chừa một khoảng trắng thừa bên dưới; `vertical-align` gỡ khoảng đó. */ vertical-align: middle; } /* Bảng do TinyMCE sinh. `width: 100% !important` — mã nhúng thường mang bề ngang cố định tính bằng px, trên màn hẹp nó đẩy cả trang rộng ra và sinh thanh cuộn ngang cho toàn trang. `!important` vì con số đó nằm ở thuộc tính/style nội tuyến. Viền XÁM (`--border`), không phải đen: viền đen của trình duyệt nặng nề và lấn át chữ. `border-collapse` gộp viền ô liền nhau thành một nét, thay vì hai nét kề nhau dày gấp đôi. `table-layout: fixed` + `word-break` để một chuỗi dài không ngắt được (mã sản phẩm, URL) không thể đẩy cột phình ra khỏi khung. */ .rich-text table { width: 100% !important; max-width: 100%; border-collapse: collapse; table-layout: fixed; } .rich-text th, .rich-text td { /* Đệm quanh chữ để nó không dính vào nét viền. */ padding: 10px 12px; border: 1px solid var(--border); vertical-align: top; word-break: break-word; } .rich-text th { background: var(--surface-muted); font-weight: 700; text-align: left; } /* Nhịp dọc của văn bản dài. Biên tập viên chỉ gõ chữ và bấm Enter — mọi khoảng cách phải do CSS lo, nếu không mỗi bài một kiểu. */ .rich-text { line-height: var(--lh-base); } .rich-text p, .rich-text ul, .rich-text ol, .rich-text table { margin-bottom: var(--para-gap); } /* Đoạn cuối không được đẩy thêm khoảng trắng vào đáy khung — nếu không, khung bao quanh trông lệch: trên sát chữ, dưới hở một quãng. */ .rich-text > :last-child { margin-bottom: 0; } /* Tiêu đề thuộc về phần chữ NGAY DƯỚI nó: cách khối trên nhiều, cách đoạn dưới ít. Đó là thứ cho người đọc biết đâu là chỗ bắt đầu một ý mới. */ .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 { margin-top: 1.8em; margin-bottom: .6em; } .rich-text > :first-child { margin-top: 0; } .rich-text li + li { margin-top: .4em; } /* Cỡ chữ do quy tắc h1–h6 toàn cục ở mục 1 lo; ở đây chỉ ép độ đậm cho đồng nhất, vì trình soạn thảo có thể chèn thẻ với style riêng. */ .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 { font-weight: 700; } /* ── 14. Cụm từ khoá H1/H2/H3 dưới chân trang ──────────────────────────── */ /* Các thẻ tiêu đề của trang chủ (module SEO), xếp thành cụm THẺ TAG ngay dưới hàng biểu tượng mạng xã hội. TRƯỚC ĐÂY là một dải chữ chạy ngang (marquee bằng CSS animation). Bỏ vì chữ chạy khiến người đọc phải đuổi theo mới đọc được, trong khi đây chỉ là cụm từ khoá tĩnh — dạng thẻ vừa đọc được ngay, vừa không tốn animation chạy suốt. Vẫn là thẻ h1/h2/h3 THẬT cho Google; ở đây chỉ hạ về dáng thẻ tag, không đụng ngữ nghĩa. */ .footer-keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; } .footer-keywords__item { margin: 0; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; /* Ghi đè quy tắc h1/h2/h3 toàn cục: đây vẫn là thẻ tiêu đề THẬT nhưng phải trông như một thẻ tag nhỏ — nên lấy thẳng bậc chữ nhỏ nhất, bỏ in đậm. */ font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; color: var(--text-muted); } /* ── 15. Khung chờ ảnh (skeleton) ───────────────────────────────────────── */ /* Ô xám nhấp nháy giữ chỗ cho ảnh chưa tải xong, dùng chung cho banner và slide. VÌ SAO CẦN: ảnh ở đây nặng 0,6–1,1 MB. Chưa tải xong thì thẻ cao 0px, nên trang dựng lên với khoảng trống rồi ĐỘT NGỘT giãn ra khi từng tấm về — vừa xấu vừa làm hỏng điểm CLS của Google. NGUYÊN TẮC: skeleton là NỀN nằm SAU ảnh, tuyệt đối không ẩn ảnh đi. Cách hay gặp là cho `img { opacity: 0 }` rồi đợi JS gắn class để hiện — nhưng JS hỏng một lần là ảnh biến mất vĩnh viễn. Ở đây ảnh luôn `opacity: 1` và tự che nền khi nó về; JS chỉ làm nốt hai việc dọn dẹp không ảnh hưởng nội dung. `--media-ratio` giữ chỗ đúng tỉ lệ ảnh thật; mỗi khối tự khai giá trị của mình bên dưới. Tỉ lệ chỉ có tác dụng TRƯỚC khi ảnh về: `is-loaded` gỡ nó ra và trả quyền quyết định chiều cao lại cho chính tấm ảnh, nên đoán sai tỉ lệ cũng không làm ảnh méo. */ .media-skeleton { /* BẮT BUỘC: `` mặc định là inline, mà `aspect-ratio` không có tác dụng lên phần tử inline không thay thế — thiếu dòng này thì khung chờ của slide không giữ chỗ gì cả. Thẻ bọc của banner là /, cũng inline. */ display: block; position: relative; overflow: hidden; aspect-ratio: var(--media-ratio, 16 / 9); background: var(--surface-muted); } /* Vệt sáng quét ngang — dấu hiệu "đang tải", khác với một ô xám đứng im trông như lỗi. z-index 0: nằm DƯỚI ảnh. */ .media-skeleton::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%); animation: media-skeleton-sweep 1.3s ease-in-out infinite; } /* Ảnh nằm TRÊN nền và không bao giờ bị ẩn. */ .media-skeleton img { position: relative; z-index: 1; } /* Ảnh đã về: bỏ tỉ lệ giữ chỗ, tắt hẳn hiệu ứng quét (để chạy tiếp là đốt CPU vô ích). */ .media-skeleton.is-loaded { aspect-ratio: auto; background: none; } .media-skeleton.is-loaded::after { content: none; } @keyframes media-skeleton-sweep { 100% { transform: translateX(100%); } } /* Tỉ lệ thật của từng khối, đo từ chính ảnh đang có trong `wwwroot/upload`. */ .hero-slider .media-skeleton { --media-ratio: 1920 / 800; } /* Băng ảnh cuối trang dùng ảnh rộng hơn hẳn băng đầu trang (1770×584 so với 1920×800). */ .hero-slider--bottom .media-skeleton { --media-ratio: 1770 / 584; } .banner-card__media { --media-ratio: 1443 / 946; } /* Ô danh mục 50%: khung ảnh CỐ ĐỊNH 16/9, ảnh cắt vừa khung thay vì co theo tỉ lệ gốc. Hai ô cạnh nhau mà ảnh gốc khác tỉ lệ thì mép dưới so le, nhìn như lỗi dựng trang. Chỉ từ khổ `md` trở lên — đúng phạm vi mà cấu hình 50% có hiệu lực. Dưới ngưỡng đó ô chiếm trọn bề ngang và ảnh hiện theo tỉ lệ thật của nó. Phải khai CẢ trên `.is-loaded`: quy tắc dọn khung chờ đặt `aspect-ratio: auto` sau khi ảnh về, nên nếu không ghi đè thì khung 16/9 biến mất ngay khi ảnh tải xong. */ @media (min-width: 768px) { .banner-grid__cell--half .banner-card__media, .banner-grid__cell--half .banner-card__media.is-loaded { aspect-ratio: 16 / 9; } .banner-grid__cell--half .banner-card__media img { width: 100%; height: 100%; object-fit: cover; } } /* Banner nổi bật nằm ngoài lưới hai cột và dùng ảnh rộng hơn hẳn. */ .banner-grid > .container > .banner-card .banner-card__media { --media-ratio: 1770 / 584; } /* ── 16. Trang danh sách sản phẩm ───────────────────────────────────────── */ /* Dựng lại `uc_control/category.ascx` của site cũ. Con số lấy từ `css/style.css` bản cũ, chỉ đổi những chỗ vốn đã lệch khỏi thang chữ chung của dự án (cỡ chữ tên sản phẩm 13px và tiêu đề 45px cứng) sang biến — cùng dáng, nhưng co giãn theo màn hình như phần còn lại của site. */ .product-head { padding-top: 30px; } /* Tiêu đề trang trong. Đối chiếu lại site cũ: thẻ `

` nằm trong `.container` THƯỜNG, KHÔNG nằm trong `.bg-breadcrumb` — nên quy tắc `45px / uppercase / bold` của `.bg-breadcrumb h1` KHÔNG áp dụng cho nó. Nó nhận mặc định h1 của Bootstrap 4: `font-size: 2.5rem (40px); font-weight: 500;` và không viết hoa. */ .product-head__title { margin-bottom: 15px; font-size: var(--fs-page-title); line-height: 1.2; font-weight: 500; } /* Đường dẫn phân cấp: dấu phân cách vẽ bằng CSS nên HTML không chứa ký tự trang trí. Cỡ chữ, độ đậm và màu bám đúng site cũ — cả dòng in đậm màu #333, kể cả dấu gạch và mục đang đứng; site cũ không làm mờ mục cuối. */ .breadcrumb { display: flex; flex-wrap: wrap; margin: 0 0 25px; padding: 0; list-style: none; font-size: var(--fs-sm); font-weight: 700; color: var(--text); } .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 8px; color: var(--text); } .breadcrumb-item a { color: var(--text); } .breadcrumb-item a:hover { color: var(--brand); } .breadcrumb-item--current { color: var(--text); } /* Dải ảnh đầu trang, có mô tả trang đè lên giữa. Site cũ đặt ảnh làm `background` của một khối cao 170px, nên ảnh bị cắt tuỳ bề ngang màn hình. Ở đây là thẻ thật: ảnh hiện trọn vẹn, và trình duyệt biết nó là nội dung để còn lazy-load, đặt alt, tính đúng chỗ giữ trước khi tải. */ .product-banner { display: block; position: relative; margin-bottom: 50px; } .product-banner img { display: block; width: 100%; height: auto; } /* Lớp chữ phủ lên ảnh, căn giữa cả hai chiều. KHÔNG có lớp tối phía sau: ảnh nền giữ nguyên như cũ, chỉ thêm chữ lên trên. Độ đọc được do `text-shadow` ở dưới lo. */ .product-banner__overlay { position: absolute; inset: 0; z-index: 2; /* Trên ảnh: `.media-skeleton img` đặt ảnh ở z-index 1, không vượt qua thì chữ bị ảnh che. */ display: flex; align-items: center; justify-content: center; width: 100%; } .product-banner__text { max-width: 900px; margin: 0 auto; color: #fff; text-align: center; /* Không làm tối ảnh thì bóng chữ là thứ DUY NHẤT giữ cho chữ trắng đọc được khi ảnh nền có mảng sáng. Đổ đậm hơn bình thường vì nó phải gánh một mình. */ text-shadow: 0 2px 6px rgba(0, 0, 0, .65); } /* Màn hình hẹp. Ảnh nền là ảnh NGANG rất dẹt (thường 1400×300 trở lên). Trên màn 400px nó co xuống còn chưa tới 90px cao — không đủ chỗ cho mô tả, nên chữ tràn ra ngoài ảnh và đứng trên nền trắng, đúng lỗi nhìn thấy. Ép chiều cao tối thiểu 120px và cho ảnh CẮT hai bên (`object-fit: cover`) thay vì co lùn. Chữ thì cắt còn 4 dòng thay vì cho cuộn: một khung cuộn tí xíu nằm đè lên ảnh là thứ không ai nhận ra để mà cuộn. Mô tả dài hơn thế thuộc về trang nội dung, không phải dải tiêu đề. */ @media (max-width: 767.98px) { .product-banner { min-height: 120px; } .product-banner img { min-height: 120px; object-fit: cover; } .product-banner__overlay { padding: 12px 0; } .product-banner__text { font-size: var(--fs-xs); /* Cắt ở dòng thứ 4. `-webkit-` là tên chuẩn thực tế của thuộc tính này — mọi trình duyệt hiện hành đều nhận, kể cả Firefox. */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } } .section-product { padding-bottom: 70px; } /* Mô tả trang khi CHƯA có ảnh nền — xem ghi chú trong Views/Products/Index.cshtml. */ .section-product__intro { max-width: 900px; margin-bottom: 30px; color: var(--text-muted); } .section-product__empty { padding: 40px 0; color: var(--text-muted); } /* Dòng "tìm thấy N sản phẩm cho …" */ .section-product__found { margin-bottom: 20px; font-size: var(--fs-sm); color: var(--text-muted); } /* Cột danh mục bên trái */ .title_block { margin: 0; padding: 0 0 10px; font-size: var(--fs-h3); font-weight: 700; } .block_content ul { margin: 0; padding: 0; list-style: none; } .block_content li { padding: 5px 0; line-height: 24px; } .block_content a, .block_content__nolink { font-size: var(--fs-md); color: var(--text); } .block_content a:hover, .block_content a.is-current { color: var(--brand); } /* Danh mục chưa có đường dẫn: hiện mờ hơn để phân biệt với mục bấm được, nhưng vẫn đọc rõ. */ .block_content__nolink { color: var(--text-muted); cursor: default; } /* Ô sản phẩm */ /* Ô sản phẩm — chép đúng bộ quy tắc của site cũ (`css/style.css`): .img-effect { overflow: hidden } .img-effect img { position: relative; transform: scale(1); transition: .3s all ease-in-out } .img-effect:hover img { transform: scale(1.03); transition: .3s all ease-in-out } .img-effect:hover > a:before{ background: rgba(16,16,16,.4); inset 0; z-index: 1 } .item-products .img-effect { padding: 10px; border: 1px solid rgba(0,0,0,.175); position: relative } Hai điều dễ làm sai, đã kiểm lại với bản gốc: • Lớp phủ CHỈ tồn tại lúc rê chuột (`content` khai trong `:hover`) nên nó hiện ra tức thì, KHÔNG mờ dần. Thêm transition vào là sai so với bản gốc. • Lớp phủ tính từ mép NGOÀI của khung, tức phủ cả dải padding 10px, vì nó định vị theo `.img-effect` chứ không theo thẻ . */ .item-products .img-effect { display: block; position: relative; padding: 10px; border: 1px solid rgba(0, 0, 0, .175); } /* Khung CẮT ảnh, nằm bên TRONG dải padding. Site cũ để `overflow: hidden` trên chính `.img-effect`, mà khối đó gồm cả padding 10px — nên ảnh phóng to lúc rê chuột tràn vào dải padding và viền trông như dày lên. Cắt ở lớp trong thì phần ảnh phóng ra bị xén đúng mép ảnh, dải padding và viền đứng yên. */ .img-effect > a, .img-effect > span { display: block; position: relative; overflow: hidden; } /* Hiệu ứng rê chuột dùng CHUNG bộ tham số với thẻ banner ở trang chủ (mục 8): vào nhanh (`--overlay-in`), ra chậm hơn (`--overlay-out`), cùng đường cong `--overlay-ease`. `will-change` + `backface-visibility` đẩy ảnh sang layer riêng của GPU. Ảnh gốc rộng cả nghìn px mà hiện ra chỉ vài trăm — phóng một tấm cỡ đó bằng CPU chính là nguồn giật. */ .img-effect img { display: block; width: 100%; height: auto; transform: scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform var(--overlay-out) var(--overlay-ease); } .img-effect:hover img { transform: scale(1.03); transition-duration: var(--overlay-in); } /* Lớp phủ tối khi rê chuột — màu rgba(16,16,16,.4) đúng như site cũ (`.img-effect:hover > a:before`). Pseudo-element TỒN TẠI SẴN với `opacity: 0` chứ không sinh ra lúc hover: khai `content` ngay trong `:hover` thì lớp phủ chỉ có mặt kể từ khung hình đầu tiên của thao tác — không có gì để mờ dần, nên nó bụp ra đen kịt. Đó chính là chỗ trông không mượt. `will-change: opacity` + `translateZ(0)` là CÓ CHỦ Ý, không thừa: `will-change` chỉ là gợi ý mà trình duyệt được quyền bỏ qua, `translateZ(0)` mới buộc tạo layer thật. Có layer riêng thì đổi độ mờ chỉ là việc của bộ ghép layer, không bắt vẽ lại cả vùng ảnh mỗi khung hình — nếu không, lớp phủ repaint trên luồng chính trong khi ảnh đang phóng trên GPU, hai bên lệch nhịp và mắt nhận ra ngay. */ .img-effect > a::before, .img-effect > span::before { content: ""; position: absolute; inset: 0; z-index: 2; background-color: rgba(16, 16, 16, .4); opacity: 0; pointer-events: none; will-change: opacity; transform: translateZ(0); transition: opacity var(--overlay-out) var(--overlay-ease); } .img-effect:hover > a::before, .img-effect:hover > span::before { opacity: 1; transition-duration: var(--overlay-in); } /* Site cũ: `font-size: 13px; font-weight: bold; color: #111; margin-bottom: 50px`, cộng `padding-top: 15px` khai nội tuyến ngay trong thẻ h3. 13 + 1 = 14. */ .name-menu { margin: 15px 0 50px; font-size: var(--fs-sm); font-weight: 700; text-align: center; color: #111; } .name-menu a { color: #111; } .name-menu a:hover { color: var(--brand); } /* Phân trang tròn */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .pagination li { width: 40px; height: 40px; line-height: 38px; text-align: center; border: 1px solid var(--border); border-radius: 50%; font-size: var(--fs-sm); } .pagination li a, .pagination li span { display: block; color: var(--text); } .pagination li a:hover { color: var(--brand); } .pagination li.active { background: var(--brand); border-color: var(--brand); } .pagination li.active span { color: #fff; } /* Dấu "…" không phải một trang: bỏ khung tròn để không mời người ta bấm. */ .pagination li.is-gap { border-color: transparent; } /* ── 17. Thanh tiến trình chuyển trang ──────────────────────────────────── */ /* Vạch mảnh bám đỉnh màn hình trong lúc trang sau đang tải (xem main.js mục 7). `z-index` phải trên header dính (`--z-sticky-header` nếu có) — thanh này là phản hồi cho thao tác vừa rồi, che nó đi thì người dùng tưởng cú bấm rơi vào hư không. `opacity` chuyển chậm hơn `width`: lúc kết thúc, vạch chạy nốt tới mép rồi mới mờ đi. */ .page-progress { position: fixed; top: 0; left: 0; z-index: 2000; width: 0; height: 3px; background: var(--brand); opacity: 0; pointer-events: none; transition: width .2s ease-out, opacity .3s ease-out; } .page-progress.is-active { opacity: 1; } /* Người dùng bật giảm chuyển động: giữ vạch (nó là THÔNG TIN, không phải trang trí) nhưng bỏ hoạt ảnh trượt. */ @media (prefers-reduced-motion: reduce) { .page-progress { transition: none; } } /* ── 18. Chi tiết sản phẩm ──────────────────────────────────────────────── */ /* Dựng lại `uc_control/product.ascx`. Con số lấy từ `css/style.css` bản cũ: #slide .owl-stage { padding-top: 10px; padding-bottom: 10px } .product-slide img { max-width: 100%; width: auto; object-fit: contain } .main-products { padding-top: 70px } .content-product { padding-top: 50px; padding-bottom: 50px } Mũi tên của site cũ là chữ Font Awesome cỡ 40px màu thương hiệu, đặt ở 5% hai mép — ở đây là nút của Bootstrap nên chỉnh lại cho ra đúng dáng đó. */ .section-product-detail { padding-bottom: 70px; } /* Giới hạn bề ngang băng ảnh. Khung nội dung rộng tới 1800px, mà tỉ lệ 16/7 ở bề ngang ấy cho ra khung cao gần 790px — chiếm gần trọn màn hình 1080p, người xem phải cuộn mới thấy tên sản phẩm. 1200px cho khung cao ~525px, vừa tầm mắt. */ .product-gallery { max-width: 1200px; margin: 0 auto; padding: 10px 0; } /* Bootstrap ẩn item không hoạt động bằng `display: none`, nên chiều cao của băng lấy theo item đang hiện. Khung 4/3 ở dưới giữ cho mọi item cao bằng nhau — thiếu nó thì bấm next là cả trang giật. */ .product-gallery .carousel-inner { overflow: hidden; } /* Đẩy item sang layer riêng của GPU: trượt một tấm ảnh rộng cả nghìn px bằng CPU là nguồn giật chính. `backface-visibility` chặn nốt hiện tượng ảnh nhấp nháy ở khung hình đầu. */ .product-gallery .carousel-item { backface-visibility: hidden; will-change: transform; } /* Ảnh trong băng phải cùng chiều cao, nếu không mỗi lần chuyển ảnh là cả trang giật lên xuống theo tỉ lệ tấm kế tiếp. Dùng CHIỀU CAO chứ không phải tỉ lệ: khung `aspect-ratio: 4/3` trải hết khung nội dung 1800px thành ra cao 1350px, ảnh sản phẩm nằm lọt thỏm giữa một mảng trắng mênh mông. `clamp` giữ khung vừa màn hình: không thấp hơn 280px, không cao hơn 560px, còn lại bám theo chiều cao cửa sổ. Khung này CỐ Ý không mang `media-skeleton`: quy tắc `.media-skeleton.is-loaded` gỡ tỉ lệ giữ chỗ khi ảnh tải xong và nó đặc hiệu hơn selector này. */ /* Khung ảnh mang ĐÚNG tỉ lệ của bộ ảnh: đo 319 ảnh album trong `upload/product`, tất cả đều 800×350 — tức 16/7. Khung khớp tỉ lệ ảnh thì ảnh lấp đầy, không còn dải trắng hai bên như hồi ép chiều cao theo `vh`. Vẫn phải là tỉ lệ CỐ ĐỊNH (không phải chiều cao tự do): ảnh nào lệch chuẩn cũng không làm khung đổi kích thước, nên bấm next không giật, và thao tác kéo tính đúng quãng. Ảnh sau này lệch 16/7 sẽ có viền trắng (`object-fit: contain`) chứ không bị cắt — mất một phần sản phẩm tệ hơn là thừa chút nền. */ .product-gallery__frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; background: #fff; } /* Ảnh mờ dần khi tải xong, trên nền xám nhạt giữ chỗ. Nhẹ hơn hẳn khung chờ có vệt sáng quét (`media-skeleton`) — và quan trọng hơn: KHÔNG đụng tới chiều cao, nên khung không đổi kích thước lúc ảnh về. */ .product-gallery__frame.is-loading { background: var(--surface-muted); } .product-gallery__frame img { opacity: 0; transition: opacity .25s ease; } .product-gallery__frame img.is-loaded { opacity: 1; } .product-gallery__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Một ảnh duy nhất: không có băng, in thẳng tấm ảnh cho trọn bề ngang. */ .product-gallery--single { text-align: center; } /* Bàn tay, không phải kính lúp: băng ảnh kéo được nên con trỏ phải nói đúng việc chính — phóng to chỉ là hệ quả của cú bấm. Ảnh đơn không kéo được nên dùng bàn tay trỏ. */ .product-gallery--single img { cursor: pointer; } .product-gallery--single img { max-width: 100%; height: auto; } /* Mũi tên: chỉ là mũi tên, không có nền tối phủ nửa ảnh như mặc định Bootstrap. Vẽ bằng SVG sprite của dự án nên màu đúng bằng `currentColor` — xem Detail.cshtml. */ /* Bootstrap để `.carousel-control-*` mờ 50% và chỉ rõ lên khi hover/focus, nên vừa bấm xong (nút đang giữ focus) là nó nhạt đi trông như biến mất. Ghi đè cả ba trạng thái. */ .product-gallery__nav, .product-gallery__nav:hover, .product-gallery__nav:focus { opacity: 1; color: var(--brand); } .product-gallery__nav { width: 60px; } /* Viền chỉ hiện khi đi bằng bàn phím — bấm chuột thì không cần khung bao quanh. */ .product-gallery__nav:focus-visible { outline: 2px solid var(--brand); outline-offset: -6px; } .product-gallery__nav-icon { display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1; transition: transform var(--transition-fast); } /* Sprite chỉ có chevron phải; mũi tên trái là chính nó lật ngang. */ .product-gallery__nav-icon--prev { transform: scaleX(-1); } .product-gallery__nav:hover .product-gallery__nav-icon { transform: translateX(3px); } .product-gallery__nav:hover .product-gallery__nav-icon--prev { transform: scaleX(-1) translateX(3px); } /* Chấm chỉ vị trí: tròn, nằm dưới ảnh chứ không đè lên. */ .product-gallery .carousel-indicators { position: static; margin: 15px 0 0; } .product-gallery .carousel-indicators [data-bs-target] { width: 10px; height: 10px; margin: 0 4px; border: 0; border-radius: 50%; background: var(--border); opacity: 1; } .product-gallery .carousel-indicators .active { background: var(--brand); } .main-products { padding-top: 40px; } .content-product { padding: 30px 0; } /* ── 19. Phóng to ảnh (lightbox) ────────────────────────────────────────── */ /* Lớp phủ toàn màn hình: ảnh lớn ở giữa, dải ảnh nhỏ dưới chân. Khung do main.js dựng (mục 10) nên ở đây chỉ có phần hình thức. */ /* Mở và đóng đều có hiệu ứng, nên KHÔNG dùng `display: none`: thuộc tính đó không chuyển tiếp được, bật/tắt là lớp phủ bụp ra rồi bụp mất. `visibility` có transition-delay khi ĐÓNG: giữ khối hiển thị đúng bằng thời gian mờ dần rồi mới ẩn hẳn. Thiếu nó thì lớp phủ biến mất ngay từ khung hình đầu và hiệu ứng đóng không ai kịp thấy. Cùng cách làm với sidebar tìm kiếm (mục 6b). */ .lightbox { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; } .lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .25s ease; } /* Khoá cuộn trang phía sau — cuộn trong lúc xem ảnh chỉ gây rối. `padding-right` bù đúng bề ngang thanh cuộn vừa bị giấu đi (main.js đo và ghi vào `--scrollbar-w`), nếu không cả trang nhích sang phải đúng bằng chừng ấy. */ body.has-overlay { overflow: hidden; padding-right: var(--scrollbar-w, 0px); } /* Header dính là `position: fixed` nên nó KHÔNG nằm trong luồng của body — đệm ở trên không chạm tới nó, phải bù riêng. Thiếu quy tắc này thì thân trang đứng yên mà mỗi cái header nhích sang phải. */ body.has-overlay [data-sticky-header].is-stuck { padding-right: var(--scrollbar-w, 0px); } .lightbox.is-open .lightbox__slide img { transform: scale(1); } /* Người dùng bật giảm chuyển động: hiện ra ngay, không phóng, không mờ dần. */ @media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__slide img, .lightbox__track { transition: none; } .lightbox__slide img { transform: none; } } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); } /* Khung nhìn: chỉ thấy đúng một ảnh, phần dải nằm ngoài bị cắt. */ .lightbox__viewport { position: relative; width: 100%; height: 100%; overflow: hidden; /* Chừa chỗ cho dải ảnh nhỏ ở dưới và nút đóng ở trên. */ padding: 60px 70px 140px; /* Trình duyệt sẽ tự cuộn ngang khi kéo nếu không nói rõ là ta tự xử lý cử chỉ này. */ touch-action: pan-y; cursor: grab; } .lightbox__viewport:active { cursor: grabbing; } /* Dải ảnh: mọi ảnh nằm cạnh nhau, đổi ảnh là dịch cả dải sang ngang. */ .lightbox__track { display: flex; width: 100%; height: 100%; transition: transform .32s ease-out; will-change: transform; } /* Lúc đang kéo thì dải phải bám tay tức thì, không được trễ theo hiệu ứng. */ .lightbox__track.is-dragging { transition: none; } .lightbox__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Ảnh phóng nhẹ từ 96% lên 100% khi mở — đủ để mắt thấy lớp phủ "bung ra" từ trang chứ không phải rơi từ đâu xuống. Chỉ đặt trên ẢNH, không đặt trên dải: `transform` của dải đang dùng cho việc trượt, chồng thêm scale vào đó là hỏng cả hai. */ .lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(.96); transition: transform .28s ease-out; /* Trình duyệt tự cho kéo-thả ảnh đi nơi khác; không chặn thì mỗi lần kéo lại lôi theo bóng mờ tấm ảnh và thao tác vỡ ngay từ đầu. */ -webkit-user-drag: none; user-select: none; } /* Dấu × vẽ bằng SVG trong sprite thay cho ký tự `×`: ký tự đó lấy nét từ phông chữ nên ở cỡ lớn nó dày và bè ra. Với SVG thì độ dày nét là thứ chỉnh được — 1.25 cho hai vạch mảnh, hợp với lớp phủ tối. */ .lightbox__close { position: absolute; top: 12px; right: 16px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: color var(--transition-fast); } .lightbox__close:hover { color: var(--brand); } /* `stroke-width` khai trong là thuộc tính trình bày, nên CSS ghi đè được. */ .lightbox__close .icon { stroke-width: 1.25; } .lightbox__nav { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; transform: translateY(-50%); border: 0; background: none; color: #fff; font-size: 34px; cursor: pointer; transition: color var(--transition-fast); } .lightbox__nav:hover { color: var(--brand); } .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; } /* Sprite chỉ có chevron phải; mũi tên trái là chính nó lật ngang. */ .lightbox__nav--prev .icon { transform: scaleX(-1); } .lightbox__counter { position: absolute; left: 0; right: 0; bottom: 108px; text-align: center; font-size: var(--fs-sm); color: rgba(255, 255, 255, .75); } /* Dải ảnh nhỏ: cuộn ngang khi nhiều ảnh, không bao giờ xuống dòng làm cao lên. */ .lightbox__thumbs { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; padding: 0 16px; overflow-x: auto; } .lightbox__thumb { flex: 0 0 76px; width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: 5px; /* Ảnh bên trong phải bị cắt theo góc bo, nếu không bốn góc ảnh vẫn vuông và viền bo trông như dán lệch. */ overflow: hidden; background: rgba(255, 255, 255, .1); cursor: pointer; opacity: .55; transition: opacity var(--transition-fast), border-color var(--transition-fast); } .lightbox__thumb:hover { opacity: 1; } .lightbox__thumb.is-active { border-color: var(--brand); opacity: 1; } .lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767.98px) { .lightbox__viewport { padding: 56px 12px 110px; } .lightbox__thumb { flex: 0 0 56px; width: 56px; height: 56px; } .lightbox__counter { bottom: 82px; } } /* ── 20. Sản phẩm liên quan ─────────────────────────────────────────────── */ /* Số ô thấy được đổi theo khổ màn hình; dưới 768px thì bỏ trượt, xếp dọc lần lượt. Xem _RelatedProducts.cshtml. */ .related-products { padding-top: 20px; } .related-products__title { margin-bottom: 25px; font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase; text-align: center; } /* ĐIỆN THOẠI (mặc định): các ô nối nhau theo chiều dọc, không trượt. */ .related-products__track { display: flex; flex-direction: column; gap: 20px; } /* TỪ 768px: dải trượt ngang. `scroll-snap` làm mỗi lần trượt dừng gọn ở đầu một ô thay vì đứng lưng chừng giữa hai ô. Bề ngang mỗi ô = (100% − tổng khoảng cách) / số ô. Khoảng cách luôn ít hơn số ô một nhịp: 2 ô có 1 khoảng, 3 ô có 2, 4 ô có 3. */ @media (min-width: 768px) { .related-products__track { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; /* Chừa chỗ cho thanh cuộn khỏi đè lên tên sản phẩm. */ padding-bottom: 6px; } .related-products__item { flex: 0 0 calc((100% - 20px) / 2); scroll-snap-align: start; } /* Thanh cuộn mảnh; khung nào đủ chỗ cho hết số ô thì trình duyệt tự không vẽ nó. */ .related-products__track::-webkit-scrollbar { height: 4px; } .related-products__track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } } @media (min-width: 1024px) { .related-products__item { flex: 0 0 calc((100% - 40px) / 3); } } @media (min-width: 1200px) { .related-products__item { flex: 0 0 calc((100% - 60px) / 4); } } /* Ô sản phẩm ở đây không cần khoảng trống lớn dưới tên như ở lưới danh sách. */ .related-products .name-menu { margin-bottom: 0; } /* ── 21. Trang Catalogue ────────────────────────────────────────────────── */ /* Thẻ dựng theo `_CatalogueCard.cshtml` + `.tn-res-cat-card` của dự án zendecor: khối viền bo góc gồm ảnh 4/3 → tên căn giữa → hai nút xếp lưới hai cột. Con số lấy từ `style.css` của zendecor (viền 1px bo 5px, ảnh 4/3 nền #e8e8e8, tên cắt 2 dòng, nút nền #f8f9fa với biểu tượng trên và chữ dưới); màu và cỡ chữ đổi sang biến của dự án này để đồng bộ với phần còn lại của site. */ .catalogue-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } /* Bìa là NÚT chứ không phải liên kết — bấm vào mở trình xem, không rời trang. Phải gỡ dáng mặc định của