/* ============================================================ news-list.css — trang danh sách tin tức (tin-tuc.html) BA NHỊP, KHÔNG NHỊP NÀO LẶP LẠI: .m-nlead bài dẫn, ảnh 7fr | chữ 5fr, chữ canh ĐÁY .m-ntrack dải kiến thức GHIM MÀN HÌNH, cuộn dọc thành pan ngang .m-ngrid lưới hoạt động, bộ ba lệch trục 5fr/4fr/3fr, canh ĐÁY Bản trước là lưới 3 cột lặp đều 8 thẻ giống hệt nhau. Khách chê nhàm và chê đúng: tám ô cùng kích thước, cùng tỉ lệ ảnh, cùng khoảng cách thì mắt không có chỗ nào để dừng, và không có gì nói cho người đọc biết bài nào đáng đọc trước. LỀ: bản trước dùng .container mặc định (max-width 1280) trong khi header và footer dùng --maxw-wide (1600) + --pad-wide. Ở màn 1920 phần thân hụt vào trong ~200px so với mép logo, đọc ra như lỗi layout. Khối opt-in ngay dưới đây sửa việc đó, đúng cách san-pham.html đang làm (products-list.css). THẺ TIN khai lại ở đây thay vì tái dùng .news-card của home.css: home.css KHÔNG nạp trên trang này (mỗi trang một file CSS). Khác bản cũ ở một điểm có chủ ý: NHÃN CHUYÊN MỤC KHÔNG CÒN ĐÈ LÊN ẢNH. Nhãn nằm trên ảnh thì tương phản phụ thuộc vào từng tấm ảnh, nên bản cũ phải phủ nền trắng .92 để cứu chữ — tức là dán một miếng vá vào chỗ lẽ ra không nên có chữ. Đưa xuống hàng meta dưới ảnh thì tương phản cố định và ảnh được để yên. ============================================================ */ /* ---- Lề: nối đúng nhịp header/footer ------------------------------ Một dòng duy nhất, đúng khuôn products-list.css:21. ⚠️ THÊM SECTION MỚI THÌ PHẢI THÊM VÀO ĐÂY: .m-nall từng bị bỏ sót (2026-08-05) và tái diễn đúng lỗi "thân trang bóp nhỏ so với lề" mà cả đợt này sinh ra để sửa — mục lục hẹp hơn header 160px mỗi bên. */ .page-hero .container, .m-nlead .container, .m-ntrack__head, .m-ngrid .container, .m-nall .container{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);} /* ============================================================ THẺ TIN DÙNG CHUNG (.ncard) — dải kiến thức và lưới hoạt động ============================================================ */ /* position:relative để .ntag (chip chuyên mục) neo được vào góc trên ảnh — xem .ntag bên dưới. */ .ncard{position:relative;display:flex;flex-direction:column;text-decoration:none;} .ncard__media{ display:block;position:relative;overflow:hidden; aspect-ratio:4/3;background:var(--greige);border-radius:var(--radius-lg); } .ncard__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease); } .ncard:hover .ncard__media img, .ncard:focus-visible .ncard__media img{transform:scale(1.05);} /* Hàng meta: nay CHỈ còn ngày — nhãn chuyên mục đã rời khỏi luồng, lên đè góc ảnh (xem .ntag). */ .ncard__meta{ display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex-wrap:wrap; margin:clamp(14px,1.6vw,20px) 0 clamp(8px,1vw,12px); } /* CHIP CHUYÊN MỤC cho các thẻ tin — CÙNG KHUÔN với .news-card__tag của trang chủ (khách chốt 2026-09-07: "vị trí như ở home mới đúng"): nền trắng mờ, lùi 14px khỏi góc ảnh, bo --radius-sm. Trước là vàng đặc sát góc. Neo vào .ncard (position:relative) chứ KHÔNG chuyển thẻ span vào trong .ncard__media: 15 thẻ trên trang này, sửa markup từng thẻ là 15 chỗ có thể sót, mà .ncard__media luôn là phần tử ĐẦU TIÊN của thẻ nên góc trên của thẻ chính là góc trên của ảnh. */ .ntag{ position:absolute;top:14px;left:14px;z-index:4; padding:6px 12px; /* NỀN VÀNG (khách 2026-09-07, đổi từ trắng mờ): VỊ TRÍ giữ nguyên kiểu trang chủ — lùi 14px, bo --radius-sm. Chữ ĐEN: trắng trên đầu tối của gradient chỉ 1.96:1. */ background:var(--gold-grad);color:var(--btn-ink); font-family:var(--font-display);font-size:var(--fs-micro); font-weight:var(--fw-medium);letter-spacing:.1em;text-transform:uppercase; line-height:1; border-radius:var(--radius-sm); } /* line-height:1 KHÔNG PHẢI để cho gọn: align-items:center căn giữa HỘP dòng chứ không căn giữa chữ, mà hộp dòng thừa hẳn phần trên/dưới của leading — nên icon 15px trông cao hơn dãy số. Ép hộp dòng ôm sát chữ thì hai thứ mới thật sự cùng tâm. Đã đo lại bằng raster, xem ghi chú --cap-nudge. */ .ndate{ display:inline-flex;align-items:center;gap:8px; font-size:var(--fs-meta);line-height:1;letter-spacing:.04em;color:var(--gray-500); } /* VÀNG CHUẨN --gold, không --gold-deep: cả site dùng một mã vàng cho icon (khách chốt 2026-09-07 "đồng bộ cho toàn web"). */ .ndate .icon{width:15px;height:15px;color:var(--gold);} .ncard h3{ /* TIÊU ĐỀ THẺ TIN = FONT CHỮ CHẠY, NÉT BOLD (khách chốt 2026-09-07: "đồng bộ lại tiêu đề tin tức: font body bold"). Trước đó ba khối lệch nhau: thẻ nổi bật đi AlmarenaVN 500, thẻ trong dải và lưới đi Beautique 500, thẻ trang chủ đi Beautique 500. Ba call-site (.news-card h3 · .ncard h3 · .nfeat__title) phải đổi CÙNG NHAU — đây là một trong ba. */ font-family:var(--font-body);font-weight:var(--fw-bold); font-size:var(--fs-h3);line-height:var(--lh-heading); color:var(--heading);margin:0;transition:color .25s var(--ease); } .ncard:hover h3, .ncard:focus-visible h3{color:var(--dark);} /* ============================================================ 1 · BÀI NỔI BẬT — SLIDER, ảnh 7fr | chữ 5fr ============================================================ */ /* MỘT THANG ĐỆM CHO CẢ TRANG (khách chốt 2026-08-05, sau khi bốn section trôi thành bốn kiểu 48/72 · 44/28 · 68/68 · 76/76 qua các vòng sửa lẻ): mọi section của trang này dùng --news-pad, sửa một chỗ là cả trang theo. Ngoại lệ duy nhất: đệm TRÊN của .m-nlead nhỏ hơn vì nó áp ngay dưới .page-hero (hero đã tự mang đệm dưới của nó). */ .m-nlead, .m-ntrack, .m-ngrid.section-pad, .m-nall.section-pad{ /* 2026-09-07: bằng ĐÚNG nhịp section tin tức của trang chủ (.m-news.section-pad trong home.css) — khách chốt bản trang chủ là đúng. Trước là clamp(36px,4.4vw,68px), tức thấp hơn 28px ở khổ 1280. Đổi thì đổi CẢ HAI. */ --news-pad:clamp(52px,6.6vw,92px); padding-block:var(--news-pad); } .m-nlead{padding-top:clamp(24px,3.2vw,48px);} /* ---- Khung trượt -------------------------------------------------- Ba slide nằm cạnh nhau trong một hàng flex, mỗi slide rộng đúng 100% khung; đổi bài = dịch cả hàng. Cách này giữ chiều cao khung BẰNG slide cao nhất và không đổi khi chuyển bài — nếu để mỗi lúc một slide trong DOM thì tiêu đề dài ngắn khác nhau sẽ làm cả trang giật lên xuống mỗi 6 giây. */ /* Khung ngoài lặp lại đúng lưới 7fr/5fr của slide, để cụm mũi tên đặt được vào ĐÚNG cột chữ mà không phải đoán bằng px. Khung nhìn trải cả hai cột, cụm nút nằm CHỒNG lên cột 2 và tì xuống đáy — đó là cách duy nhất cho mũi tên thẳng hàng với mép dưới ẢNH, vì ảnh mới là thứ quyết định chiều cao hàng, còn cụm chữ thì ngắn hơn nhiều. */ /* Khối trượt là một cột đơn: khung nhìn ở trên, cụm mũi tên ở hàng dưới. Bản trước là lưới 7fr|5fr với cụm nút CHỒNG lên cột chữ — đúng cho bố cục "một bài, ảnh trái chữ phải", nhưng với băng ba thẻ thì cột 2 không còn tồn tại và cụm nút rơi vào GIỮA hàng thẻ, đè lên tiêu đề bài. */ .nlead-slider{display:block;} /* ---- Cụm mũi tên: hàng riêng dưới băng thẻ, dồn về phải. ---- */ .nlead-slider__nav{display:flex;gap:10px;} .nlead-slider__nav button{ width:var(--btn-icon);height:var(--btn-icon);box-sizing:border-box; border-radius:var(--radius); display:flex;align-items:center;justify-content:center; /* Viền xám nhạt như .m-news__nav button (2026-09-07) — hai bộ mũi tên phải đổi cùng nhau. */ border:1px solid var(--border-strong);background:transparent;color:var(--gold-deep); cursor:pointer; transition:background .25s var(--ease),color .25s var(--ease); } .nlead-slider__nav button:hover{background:var(--gold);border-color:var(--gold);color:var(--btn-ink);} .nlead-slider__nav .icon{width:var(--icon-nav);height:var(--icon-nav);} @media (prefers-reduced-motion:reduce){ .nlead-slider__track{transition:none;} } /* ============================================================ 2 · DẢI KIẾN THỨC — ghim màn hình, pan ngang ============================================================ MẶC ĐỊNH LÀ BẢN VUỐT TAY, KHÔNG PHẢI BẢN GHIM. effects.js §12 gắn .is-pinned khi nó thực sự dựng được ScrollTrigger. Làm ngược lại (mặc định overflow:hidden rồi chờ JS mở) thì CDN GSAP hỏng một lần là hai thẻ cuối biến mất vĩnh viễn, không cách nào tới được. */ /* Đệm đọc từ thang chung --news-pad khai ở đầu file — đừng khai số riêng ở đây nữa: section này từng qua bốn vòng chỉnh lẻ (104 → 60 → 30 → 44/28) trước khi khách chốt "các section phải đều nhau". */ .m-ntrack{ background:var(--gray-100); overflow:hidden; /* chặn pan ngang làm cả trang trượt ngang */ } .m-ntrack__head{ width:100%;margin-inline:auto; margin-bottom:clamp(22px,2.6vw,38px); } .m-ntrack__head h2{ font-size:var(--fs-h2); line-height:var(--lh-heading);letter-spacing:var(--ls-heading); color:var(--heading);margin:0 0 clamp(10px,1.2vw,16px); } .m-ntrack__head p{ font-size:var(--fs-body);line-height:var(--lh-body); color:var(--gray-700);margin:0;max-width:68ch; } .m-ntrack__viewport{ overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; /* CHỖ CHO THANH CUỘN. Ở máy cảm ứng / khổ hẹp, dải này không được ghim màn nên trình duyệt vẽ thanh cuộn ngang ngay dưới nội dung — nó đè lên dòng tiêu đề bài (khách báo 2026-09-08 "dời thanh scroll xuống xíu"). Đệm dưới đẩy thanh xuống dưới chữ; ở desktop dải chạy chế độ ghim và không có thanh nào nên 14px chỉ là khoảng hở vô hại. */ padding-bottom:14px; /* BẮT BUỘC, không phải tinh chỉnh: scroll-snap-align:start neo mép thẻ vào mép SCROLLPORT chứ không phải vào mép hộp nội dung, nên nó cuộn vượt qua luôn padding của rail. Đo tại 390px: rail padding 21.44px nhưng thẻ đầu nằm ở x=0, dán sát mép màn trong khi tiêu đề ngay trên vẫn thụt vào 21px. scroll-padding trả lại đúng khoảng đó cho vị trí neo — công thức phải TRÙNG với padding-inline của rail bên dưới. */ scroll-padding-inline:max( var(--pad-wide), calc((100% - var(--maxw-wide)) / 2 + var(--pad-wide)) ); } /* Vòng focus của vùng cuộn được: phải nhìn thấy vì đây là chỗ bàn phím thao tác được (tabindex=0), nhưng đặt lùi vào trong để khỏi bị overflow cắt. */ .m-ntrack__viewport:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-4px;} .m-ntrack__rail{ display:flex;width:max-content; gap:clamp(20px,2.6vw,40px); /* Canh mép trái thẻ đầu tiên THẲNG với mép chữ của .m-ntrack__head. Phần trăm trong padding tính theo bề rộng khối chứa — đúng thứ mà .container cũng tính theo — nên hai bên ra cùng một con số. */ padding-inline:max( var(--pad-wide), calc((100% - var(--maxw-wide)) / 2 + var(--pad-wide)) ); } /* ẢNH THẤP ĐI 10% so với 4/3 dùng chung (khách 2026-09-07): cao 0.75w → 0.675w, tức tỉ lệ 40/27. Chỉ đổi ở dải này, lưới bài viết bên dưới giữ 4/3. */ .m-ntrack__rail .ncard__media{aspect-ratio:40/27;} .m-ntrack__rail .ncard{ flex:0 0 clamp(258px,38vw,560px); scroll-snap-align:start; } /* Khi effects.js §12 tiếp quản: JS dịch rail, viewport không tự cuộn nữa. */ .m-ntrack.is-pinned .m-ntrack__viewport{ overflow:hidden;scroll-snap-type:none; } /* SECTION GHIM CAO TỰ NHIÊN, KHÔNG CÒN min-height:100svh (bản thứ TƯ, khách chốt 2026-08-05 — và lần này là gỡ tận gốc, đừng quay lại các bản cũ): 1) 100svh + canh giữa → khách chê hở trên quá lớn 2) 100svh + canh trên → khách chê hở dưới 225px 3) 100svh + thẻ nở lấp → khách chê thẻ cao 603px 4) 100svh + chia đôi → khách chê "khoảng cách trên dưới quá to" Cả bốn cùng một gốc: ép section cao 100svh thì phần chênh ~110-220px PHẢI nằm đâu đó, dời kiểu gì cũng bị nhìn thấy. Bỏ ràng buộc là hết chỗ chứa nó: section cao theo nội dung, đệm 68/68 đều nhịp với mọi section khác. CÁI GIÁ và cách nó được trả: trong quãng ghim, phần màn hình dưới section là pin-spacer trong suốt → lộ nền body (TRẮNG). Vì thế section kế tiếp (.m-ngrid) PHẢI nền trắng — dải hở khi đó đọc ra như section sau đang ló lên, không phải lỗ thủng. ĐỔI NỀN .m-ngrid LÀ VỠ trò này: nếu cần đổi, quay lại đọc chú thích này trước. */ /* ============================================================ 3 · LƯỚI HOẠT ĐỘNG — bộ ba lệch trục ============================================================ Ba cột KHÔNG bằng nhau (5/4/3) và ba tỉ lệ ảnh KHÁC nhau (4:5 · 1:1 · 4:3), canh đáy. Đây chính là chỗ trả lời cho "lưới nhàm": cùng một bộ thẻ nhưng có nhịp cao thấp thay vì ba ô đúc khuôn. */ /* NỀN TRẮNG — BẮT BUỘC, không phải lựa chọn thẩm mỹ: section này nằm ngay dưới quãng ghim của .m-ntrack, và từ khi bỏ min-height:100svh (xem chú thích dài ở .m-ntrack) thì trong lúc ghim, dưới section ghim lộ một dải nền body màu TRẮNG. Section này trắng theo thì dải đó đọc ra như chính nó đang ló lên — đổi nền ở đây là dải hở thành lỗ thủng trắng giữa hai mảng màu. Chuỗi nền cả trang (mỗi cặp kề nhau phải khác màu): hero + bài nổi bật trắng kiến thức ngành xám --gray-100 hoạt động Hữu Tín TRẮNG ← khoá theo nền body tất cả bài viết kem --cream dải CTA liên hệ xám --gray-100 (khối chung, KHÔNG sửa được vì trang sản phẩm cũng dùng) */ .m-ngrid{background:var(--bg);} /* Đệm đọc từ thang chung --news-pad ở đầu file (đè .section-pad của common.css bằng selector cùng cấp — đừng sửa token gốc, cả site dùng). */ .m-ngrid__head{ font-size:var(--fs-h2); line-height:var(--lh-heading);letter-spacing:var(--ls-heading); color:var(--heading);margin:0 0 clamp(22px,2.6vw,38px); } /* BA CỘT ĐỀU, BA ẢNH CÙNG TỈ LỆ (khách chốt 2026-08-05, vòng 3 của lưới này). Lịch sử để khỏi đi lại đường cũ: 1) 5fr/4fr/3fr + 4:5·1:1·4:3, canh đáy → "canh hình bị lệch" 2) như trên nhưng canh đỉnh + hạ 4:5→4:3 → "dài ngắn lung tung không có quy luật" (420/448/252) Tức là khách muốn TRẬT TỰ, không muốn nhịp lệch ở lưới này — sự đa dạng của trang đã nằm ở việc BỐN section là bốn bố cục khác nhau, không cần từng lưới lệch thêm lần nữa. Ba class --lead/--sq/--wide giữ nguyên trong HTML làm móc, nhưng không còn khác nhau về tỉ lệ. */ .m-ngrid__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); align-items:start; } .m-ngrid__grid .ncard__media{aspect-ratio:4/3;} /* ============================================================ 4 · TẤT CẢ BÀI VIẾT — MỤC LỤC, không phải lưới thẻ ============================================================ Nhịp thứ tư phải khác hẳn ba nhịp trên. KHÔNG CÓ ẢNH là điểm khác chính: tới đây người đọc đã lướt qua ảnh của cả tám bài, thứ họ cần là quét nhanh theo ngày và theo chuyên mục. Bỏ ảnh cũng bỏ luôn tám lượt tải trùng. Kẻ MỘT nét trên mỗi dòng, không kẻ cả trên lẫn dưới: kẻ kín tám dòng đọc ra như bảng dữ liệu chứ không phải mục lục. */ /* TRẮNG (khách chốt 2026-08-19, trước là --cream). Lập luận "kem để tách khỏi hai section kẹp hai bên" nay hết hiệu lực: .m-ngrid ở trên ĐÃ GỠ, nên section này tiếp giáp trực tiếp với băng thẻ nổi bật (nền trắng) và dải CTA (xám --gray-100). Trắng-liền-trắng ở trên là có chủ ý — hai khối đọc thành một mạch, và ranh giới màu duy nhất còn lại là với dải CTA xám ở dưới. Đệm đọc từ thang chung --news-pad ở đầu file. */ .m-nall{background:var(--bg);} /* CANH GIỮA (khách chốt 2026-08-19). Đây là tiêu đề DUY NHẤT còn lại của trang nằm trên một lưới đối xứng 4 cột — canh trái thì nó lệch hẳn khỏi trục của lưới bên dưới. */ .m-nall__head{ font-size:var(--fs-h2);text-align:center; line-height:var(--lh-heading);letter-spacing:var(--ls-heading); color:var(--heading);margin:0 0 clamp(22px,2.6vw,38px); } /* LƯỚI THẺ 4 CỘT (khách chốt 2026-08-05, bản thứ ba của mục này — trước là mục lục 2 cột thuần chữ, rồi danh sách hàng ngang có ảnh nhỏ). Dùng lại .ncard chứ không khai khuôn thẻ thứ tư: cùng là một bài viết thì phải nhìn ra cùng một thứ. Phân biệt với hai lưới trên bằng CỠ và NỀN. 4 cột: tám bài chia hết cho 4, 2 và 1 nên hàng cuối luôn đầy ở mọi ngưỡng. Ba cột sẽ để thò một ô trống ở hàng thứ ba. */ .m-nall__grid{ list-style:none;margin:0;padding:0; /* BỐN THẺ MỖI HÀNG ở desktop, HAI ở tablet và điện thoại (khách chốt 2026-09-08 — lượt trước tôi để 2 cột cho cả desktop, sai). Mốc rơi xuống 2 cột là 1024px, và KHÔNG có nhánh 1 cột: điện thoại vẫn 2 thẻ một hàng. */ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,2.8vw,44px) clamp(16px,2vw,32px); } /* Thẻ nằm trong
  • (giữ
      vì đây là danh sách CÓ THỨ TỰ theo ngày); li phải dựng cột để .ncard cao bằng ô lưới. */ .m-nall__grid li{display:flex;} /* ⚠️ PHẢI CÓ, đừng gỡ: thuộc tính `hidden` (plist-page.js dùng để ẩn ô ngoài trang đang xem) chạy bằng rule `[hidden]{display:none}` của TRÌNH DUYỆT, mà `display:flex` ở dòng trên là rule của TÁC GIẢ nên nó thắng. Thiếu dòng này thì phân trang "chạy" trong DOM nhưng cả 8 bài vẫn hiện nguyên trên màn — lỗi chỉ thấy khi xem bằng mắt. Cùng bẫy với .plist-card[hidden]. */ .m-nall__grid li[hidden]{display:none;} .m-nall__grid .ncard{width:100%;} /* Cỡ nhỏ hơn hai lưới trên: đây là kho lưu, không phải mục nổi bật. */ .m-nall__grid .ncard h3{font-size:var(--fs-h4);} .m-nall__grid .ncard__meta{margin:clamp(10px,1.2vw,14px) 0 clamp(6px,.8vw,8px);} /* ============================================================ RESPONSIVE — cùng ngưỡng với các trang con khác ============================================================ */ @media (max-width:1024px){ /* Hai cột, thẻ thứ ba trải ngang hết hàng dưới: giữ được nhịp lệch thay vì để một ô cụt lủn cạnh một ô trống. */ .m-ngrid__grid{grid-template-columns:repeat(2,1fr);} .ncard--wide{grid-column:1 / -1;} .ncard--wide .ncard__media{aspect-ratio:16/7;} /* 4 → 2 cột, bỏ qua 3: chín bài thì hàng cuối lẻ kiểu nào cũng lẻ, mà 2 cột giữ được ảnh đủ lớn để đọc. */ .m-nall__grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:560px){ .m-ngrid__grid{grid-template-columns:1fr;gap:clamp(28px,7vw,40px);} /* MỘT thẻ mỗi hàng trên điện thoại (khách chốt lại 2026-09-08 — lượt trước là 2 thẻ, thử rồi thấy ở 390px mỗi thẻ chỉ còn 168px). Nhịp: 4 cột ở desktop → 2 ở tablet → 1 ở điện thoại. */ .m-nall__grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,7vw,40px);} /* Về một cột thì thẻ --wide thôi 16/7, quay lại 4/3 như hai thẻ kia. */ .ncard--wide .ncard__media{aspect-ratio:4/3;} .m-ntrack__rail .ncard{flex-basis:min(78vw,340px);} } /* Cảm ứng: hover dính lại sau khi chạm nên tắt hẳn cú phóng ảnh. Cùng cách xử lý products-list.css đang dùng. */ @media (hover:none){ .ncard:hover .ncard__media img{transform:none;} } /* ===== BÀI NỔI BẬT — băng thẻ 3-ô (khách chốt 2026-08-19) ================== Thay bản slider 1-slide (ảnh 7fr | chữ 5fr). Hình mẫu khách gửi: ba thẻ ngang, ảnh trên, CHIP CHUYÊN MỤC vàng đè góc ảnh, ngày + tiêu đề bên dưới. Số thẻ MỖI KHUNG NHÌN khai bằng biến để news-lead.js đọc ngược ra — cùng kiểu --news-lead/--news-span của băng tin trang chủ. JS không được tự đoán theo bề rộng: media query và JS mà mỗi bên giữ một mốc thì đến lúc đổi breakpoint sẽ lệch nhau âm thầm. */ .nlead-slider{--nfeat-per:3;} @media (max-width:1024px){ .nlead-slider{--nfeat-per:2;} } @media (max-width:640px){ .nlead-slider{--nfeat-per:1;} } .nlead-slider__viewport{overflow:hidden;} .nlead-slider__track{ display:flex; /* Không gap: khe là padding TRONG thẻ, nhờ vậy một bước trượt đúng bằng 100%/--nfeat-per, không phải cộng trừ phần gap dư. Cùng lý do đã ghi ở .m-news__swiper .swiper-slide (home.css). */ transition:transform var(--news-dur,1900ms) var(--ease-glide); } @media (prefers-reduced-motion:reduce){ .nlead-slider__track{transition:none;} } .nfeat{ flex:0 0 calc(100% / var(--nfeat-per)); box-sizing:border-box;padding-inline:clamp(6px,.8vw,12px); display:block;text-decoration:none;color:inherit; } .nfeat__media{ display:block;position:relative;overflow:hidden; aspect-ratio:16/10;border-radius:var(--radius-lg);background:var(--greige); } .nfeat__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ease); } .nfeat:hover .nfeat__media img{transform:scale(1.05);} /* CHIP CHUYÊN MỤC — thứ khách yêu cầu "nổi bật hơn". Vàng đặc + chữ ĐEN (8.67:1). Chữ trắng trên vàng chỉ 2.11:1 — xem bảng màu trong common.css. Đè lên ảnh chứ không nằm dưới ảnh: ở ảnh mẫu nó là thứ đọc được đầu tiên, đặt xuống dưới là nó lại thành một dòng meta như cũ. */ .nfeat__tag{ display:inline-block; position:absolute;top:14px;left:14px;z-index:4; padding:6px 12px; /* NỀN VÀNG (khách 2026-09-07, đổi từ trắng mờ): VỊ TRÍ giữ nguyên kiểu trang chủ — lùi 14px, bo --radius-sm. Chữ ĐEN: trắng trên đầu tối của gradient chỉ 1.96:1. */ background:var(--gold-grad);color:var(--btn-ink); font-family:var(--font-display);font-size:var(--fs-micro); font-weight:var(--fw-medium);letter-spacing:.1em;text-transform:uppercase; line-height:1; border-radius:var(--radius-sm); } .nfeat__body{display:block;padding-top:14px;} .nfeat .ndate{ display:flex;align-items:center;gap:8px; font-size:var(--fs-meta);line-height:1;color:var(--gray-500);letter-spacing:.04em;margin-bottom:8px; } .nfeat .ndate .icon{width:15px;height:15px;color:var(--gold);} .nfeat__title{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; /* Chừa sẵn đúng 2 dòng: tiêu đề 1 dòng và 2 dòng mà khác chiều cao thì đáy ba thẻ trong cùng khung nhìn so le nhau. */ min-height:calc(2em * var(--lh-heading)); /* TIÊU ĐỀ THẺ TIN = FONT CHỮ CHẠY, NÉT BOLD (khách chốt 2026-09-07: "đồng bộ lại tiêu đề tin tức: font body bold"). Trước đó ba khối lệch nhau: thẻ nổi bật đi AlmarenaVN 500, thẻ trong dải và lưới đi Beautique 500, thẻ trang chủ đi Beautique 500. Ba call-site (.news-card h3 · .ncard h3 · .nfeat__title) phải đổi CÙNG NHAU — đây là một trong ba. */ font-family:var(--font-body);font-weight:var(--fw-bold); font-size:var(--fs-h4);line-height:var(--lh-heading); color:var(--heading); transition:color .25s var(--ease); } .nfeat:hover .nfeat__title{color:var(--dark);} /* CANH GIỮA (khách chốt 2026-09-07, trước là dồn phải). */ .nlead-slider__ui{display:flex;justify-content:center;margin-top:clamp(16px,1.8vw,26px);}