/* ═══════════════════════════════════════════════════════════════════════════════════════════ PAL SITE 2026 — giao diện SÁNG cho mọi trang public TRỪ trang chủ. Từ 25/08/2026 (đợt 9) TRANG CHỦ CŨNG NỀN SÁNG (xem assets/css/pal-home.css và docs/quyet-dinh/0009-doi-toan-site-sang-tone-sang.md) — hai tệp nay là hai nửa của CÙNG một hệ màu sáng, không còn là "sáng đối lại tối" như trước. Sửa token ở đây thì soi lại pal-home.css và ngược lại. Bản đối chiếu với pal-home.css: --pal-blue-deep #1965AF -> --xanh (nút chính, liên kết, tiêu điểm) --pal-blue-bright #2BADE3 -> --xanh-sang (nhấn phụ, gạch chân đang xem) --pal-text-primary #12263A -> --chu --pal-text-secondary #46586E -> --chu-2 --pal-bg-tint #F1F7FC -> --nen-2 (nền phụ pha xanh logo) --pal-vach #DCE7F2 -> --vach --pal-radius-large 32px -> --bo-lon 28px (thẻ lớn; nhỏ hơn chút vì khối ở đây nhỏ hơn) --pal-radius-small 16px -> --bo 16px (thẻ nhỏ, ô nhập, nút) nav bo tròn 999px nổi -> giữ nguyên hình, cùng kính sáng spring cubic-bezier(.175,.885,.32,1.15) -> giữ nguyên, dùng cho mọi hover nâng khối ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* Cả thang xám/đen trung tính kiểu Apple (#F5F5F7, #1D1D1F, #86868B…) đã ĐỔI sang họ XANH NAVY cùng tông logo ở đợt 9 — yêu cầu là "màu sắc phù hợp với logo chính". Chênh lệch nhỏ (2-4 điểm trên kênh xanh) nên không "xanh lè", nhưng đủ để nền, viền và chữ cùng nằm trong một họ màu với logo thay vì xám trung tính vay của hệ điều hành. Tương phản đã đo lại: --chu 15:1, --chu-2 7.2:1, --chu-3 4.7:1 trên nền trắng — cả ba đều vượt AA cho chữ thường (bản cũ --chu-3 #86868B chỉ 3.5:1, KHÔNG đạt; đây là sửa luôn một lỗi tiếp cận có sẵn). */ :root{ --nen:#FFFFFF; --nen-2:#F1F7FC; /* = --pal-bg-tint của trang chủ */ --nen-3:#F8FBFE; --vach:#DCE7F2; --vach-dam:#C3D5E6; --chu:#12263A; --chu-2:#46586E; --chu-3:#66768A; --xanh:#1965AF; --xanh-dam:#123F6E; --xanh-sang:#2BADE3; --xanh-nen:#EAF4FC; --do:#C7261C; --do-nen:#FDECEC; --luc:#1B7A3D; --luc-nen:#E9F6EE; --cam:#9A5B00; --cam-nen:#FDF3E5; --bo-lon:28px; --bo:16px; --bo-nho:12px; /* Bóng pha navy thay vì đen thuần — xem ghi chú cùng nội dung ở pal-home.css. */ --bong:0 1px 2px rgba(18,63,110,.05), 0 12px 32px -18px rgba(18,63,110,.28); --bong-noi:0 4px 16px -8px rgba(18,63,110,.2), 0 24px 48px -32px rgba(18,63,110,.34); --nay:cubic-bezier(.175,.885,.32,1.15); /* 'Inter Variable' tự host — xem assets/css/pal-fonts.css (nạp chung ở khung.php cho mọi trang) và ghi chú tương tự trong assets/css/pal-home.css. */ --font:'Inter Variable','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--nen);color:var(--chu);font:17px/1.7 var(--font); -webkit-font-smoothing:antialiased;overflow-x:hidden} /* Vân hạt phủ toàn trang — ĐÚNG công thức đã kiểm ở pal-home.css (đợt 12, 25/08/2026), xem chú thích đầy đủ ở đó. `opacity` thường, KHÔNG `mix-blend-mode` — multiply với nhiễu gần-trắng ở opacity thấp cho ra 0 tuyệt đối, đã đo bằng pixel trước khi chốt công thức này. */ body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E"); background-size:180px 180px} img{max-width:100%;height:auto} a{color:var(--xanh);text-decoration-thickness:1px;text-underline-offset:2px} /* Vòng focus đổi sang --xanh (đợt 9): --xanh-sang #2BADE3 trên nền trắng chỉ 2.6:1, dưới ngưỡng 3:1 mà WCAG đòi cho thành phần phi văn bản — vòng focus mảnh 2px gần như không thấy. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--xanh);outline-offset:3px;border-radius:4px} ::selection{background:rgba(43,173,227,.25)} /* MỘT bề rộng duy nhất cho mọi trang public. Trước đây trang tin tức, trang tĩnh (chính sách, giới thiệu) và trang danh mục còn bọc thêm một lớp `.bo-hep` 760px CĂN GIỮA bên trong `.bo` — nên tiêu đề của chúng bắt đầu thụt vào 136px so với logo trên thanh nav và so với chân trang, trong khi trang Liên hệ hay Sản phẩm thì thẳng hàng. Hai trang cạnh nhau lệch mép trái như vậy đọc ra là hai bố cục khác nhau, không phải một website. Bề rộng ĐỌC của bài viết dài do `article` lo (xem dưới), đó là việc của con chữ chứ không phải của khung trang. */ .bo{max-width:1080px;margin:0 auto;padding:0 24px} /* ── Thanh điều hướng: cùng hình dáng với nav trang chủ, đổi kính tối thành kính sáng ────── */ .dau{position:sticky;top:0;z-index:50;padding:14px 0;background:rgba(255,255,255,.72); backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%); border-bottom:1px solid rgba(25,101,175,.12)} .dau .bo{display:flex;align-items:center;gap:18px;justify-content:space-between} .hieu{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:680; letter-spacing:-.02em;color:var(--chu);text-decoration:none;flex:none} .hieu img{display:block;height:30px;width:auto} .dieu-huong{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;font-size:15px} .dieu-huong a{color:var(--chu-2);text-decoration:none;padding:7px 13px;border-radius:999px; transition:color .25s ease,background .25s ease;white-space:nowrap} .dieu-huong a:hover{color:var(--chu);background:var(--nen-2)} .dieu-huong a[aria-current]{color:var(--xanh);background:var(--xanh-nen);font-weight:550} .dieu-huong .nut-lien-he{border:1px solid var(--vach-dam);color:var(--chu);font-weight:550} .dieu-huong .nut-lien-he:hover{border-color:var(--xanh);color:var(--xanh);background:transparent} .gh-nut{font-weight:600;color:var(--chu)!important;background:var(--nen-2)} /* Bộ chọn ngôn ngữ — cùng hình dáng viên thuốc/2 nút của nav trang chủ (.pal-nav__ngonngu), chỉ đổi kính tối thành nền xám nhạt cho khớp nav sáng ở đây. */ .ngonngu{display:flex;gap:2px;background:var(--nen-2);border-radius:999px;padding:3px;margin-left:2px;flex:none} .ngonngu a{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em; color:var(--chu-3);text-decoration:none;transition:background .2s ease,color .2s ease} .ngonngu a:hover{color:var(--chu)} .ngonngu a.dang-chon{background:var(--xanh);color:#fff} /* ── Mục nav xổ xuống danh mục con (Tin tức / Sản phẩm) ───────────────────────────────────
/ gốc HTML — không cần JS. Bấm chữ (thẻ trong ) đi thẳng tới trang; bấm mũi tên tròn cạnh bên mới xổ danh sách. Đóng lại bằng cách bấm mũi tên lần nữa hoặc bấm sang mục khác — trình duyệt tự lo, không cần script "đóng khi click ra ngoài". */ .dieu-huong details{position:relative} .dieu-huong details > summary{list-style:none;display:flex;align-items:center;cursor:pointer} .dieu-huong details > summary::-webkit-details-marker{display:none} .dieu-huong details > summary::marker{content:''} .mui-ten{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none; border-radius:50%;color:var(--chu-3);transition:transform .2s ease,background .2s ease,color .2s ease} .mui-ten::before{content:'';display:block;width:6px;height:6px;margin-top:-3px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)} .dieu-huong details:hover .mui-ten,.dieu-huong details[open] .mui-ten{background:var(--nen-2);color:var(--chu)} .dieu-huong details[open] .mui-ten{transform:rotate(180deg);margin-top:-2px} .menu-tha{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;max-width:min(300px,calc(100vw - 32px)); background:var(--nen);border:1px solid var(--vach);border-radius:var(--bo);box-shadow:var(--bong); padding:8px;z-index:70;display:flex;flex-direction:column;gap:1px} .menu-tha a{display:block;padding:9px 13px;border-radius:9px;color:var(--chu);text-decoration:none; font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-tha a:hover{background:var(--nen-2);color:var(--xanh)} .menu-tha a.tat-ca{font-weight:600;border-bottom:1px solid var(--vach);border-radius:9px 9px 0 0; margin-bottom:5px;padding-bottom:11px} .gh-so-tren{display:inline-block;min-width:19px;text-align:center;background:var(--xanh);color:#fff; border-radius:999px;font-size:12px;font-weight:650;padding:1px 6px;margin-left:5px;vertical-align:1px} /* ── Đầu trang: khối tiêu đề rộng rãi, cùng nhịp chữ với hero trang chủ ─────────────────── */ main{display:block;min-height:60vh} .trang-dau{padding:56px 0 8px} /* Nền phải ĐỦ ĐẬM để mắt thấy đây là một khối riêng. Bản đầu dùng gradient xuống trắng, kết quả là một vệt xám gần như vô hình — khối tiêu đề và phần nội dung dính làm một. */ /* ĐỢT 11 (25/08/2026, "hiệu ứng hiện đại/AI/ấn tượng hơn cho toàn web") — trước đây khối này chỉ có một màu nền phẳng, còn trang chủ có cả lưới chấm "dữ liệu" trôi + quầng sáng brand. Mang đúng hai thứ đó (thu nhỏ, tiết chế hơn cho hợp một trang NỘI DUNG chứ không phải landing) vào mọi khối đầu trang có nền: lưới chấm dùng lại NGUYÊN CÔNG THỨC của `.pal-aurora__luoi` bên pal-home.css (radial- gradient chấm 1px + mask hình ellipse mờ biên + trôi chậm bằng transform), quầng sáng dùng lại công thức của `.pal-aurora__khoi` (blob blur + mix-blend-mode:multiply — multiply vì đây LÀ nền sáng, xem bẫy "screen cho ra trắng tuyệt đối trên nền sáng" ở docs/bay-ky-thuat.md). Vạch màu thương hiệu mỏng ở mép trên KHÔNG dùng pseudo-element (chỉ có 2 slot ::before/::after mà đã cần cho lưới chấm + quầng sáng) — vẽ bằng cách xếp một lớp `background` gradient dừng cứng ở 3px LÊN TRÊN màu nền phẳng trong cùng khai báo `background`, không cần thêm phần tử nào. */ .trang-dau.co-nen{position:relative;overflow:hidden; background:linear-gradient(180deg,var(--xanh) 0 3px,transparent 3px) top/100% 3px no-repeat,var(--nen-2); padding:60px 0 48px;margin-bottom:48px;border-bottom:1px solid var(--vach)} .trang-dau.co-nen::before{content:"";position:absolute;inset:-20% -6%;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(25,101,175,.16) 1px,transparent 1.4px);background-size:30px 30px; -webkit-mask-image:radial-gradient(ellipse 60% 85% at 14% 30%,#000 25%,transparent 72%); mask-image:radial-gradient(ellipse 60% 85% at 14% 30%,#000 25%,transparent 72%); animation:pal-luoi-troi-site 52s linear infinite} .trang-dau.co-nen::after{content:"";position:absolute;z-index:0;pointer-events:none; width:min(46vw,520px);height:min(46vw,520px);right:-12%;top:-32%;border-radius:50%; background:radial-gradient(circle,var(--xanh-sang) 0%,transparent 70%); filter:blur(70px);opacity:.28;mix-blend-mode:multiply;animation:pal-blob-troi-site 24s ease-in-out infinite} /* .bo BẮT BUỘC lên trên hai lớp trang trí: ::after là con cuối cùng trong thứ tự vẽ (paint order) của phần tử cha dù nó nằm "phía sau" về mặt hình ảnh mong muốn — không có z-index thì nó VẼ ĐÈ lên tiêu đề/breadcrumb ở dưới (dù pointer-events:none nên vẫn bấm xuyên qua được, chữ vẫn bị ám màu). position:relative để z-index có tác dụng (z-index vô nghĩa trên phần tử static). */ .trang-dau.co-nen .bo{position:relative;z-index:1} @keyframes pal-luoi-troi-site{from{transform:translate(0,0)}to{transform:translate(-30px,-30px)}} @keyframes pal-blob-troi-site{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,5%) scale(1.08)}} @media (max-width:640px){.trang-dau.co-nen::after{filter:blur(46px);width:70vw;height:70vw}} @media (prefers-reduced-motion:reduce){ .trang-dau.co-nen::before,.trang-dau.co-nen::after{animation:none} } .duong-di{font-size:14px;color:var(--chu-3);margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center} .duong-di a{color:var(--chu-2);text-decoration:none} .duong-di a:hover{color:var(--xanh)} .duong-di span{color:var(--vach-dam)} h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 14px; font-weight:700;text-wrap:balance} h2{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.25;letter-spacing:-.022em;margin:52px 0 14px; font-weight:680;text-wrap:balance} h3{font-size:1.2rem;letter-spacing:-.014em;margin:36px 0 10px;font-weight:650} p{margin:0 0 22px} .dan-de{font-size:1.18rem;line-height:1.6;color:var(--chu-2);max-width:62ch;margin:0 0 8px} /* ── Bài viết ──────────────────────────────────────────────────────────────────────────── Giới hạn theo `ch` (bề rộng con chữ), KHÔNG theo pixel: một dòng dài quá chừng 70 ký tự thì mắt nhảy về đầu dòng sau hay trượt sang nhầm dòng. Khối bài CĂN TRÁI trong `.bo` — mép trái thẳng với tiêu đề, với logo và với chân trang; chỗ trống nằm hết bên phải, đúng lối trang chữ dài. */ article{max-width:72ch;font-size:1.06rem;line-height:1.78} article h2:first-child,article h3:first-child{margin-top:0} article ul,article ol{padding-left:24px;margin:0 0 22px} article li{margin-bottom:9px} article img{border-radius:var(--bo);display:block} article a{color:var(--xanh)} figure{margin:32px 0} figure img{width:100%} blockquote{margin:32px 0;padding:20px 26px;border-left:3px solid var(--xanh-sang); background:var(--nen-2);border-radius:0 var(--bo) var(--bo) 0;color:var(--chu-2);font-size:1.06rem} blockquote p:last-child{margin:0} hr{border:0;border-top:1px solid var(--vach);margin:44px 0} code{background:var(--nen-2);border-radius:6px;padding:2px 6px;font-size:.92em} .ngay{color:var(--chu-3);font-size:14.5px;margin:0 0 32px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .ngay a{color:var(--chu-2);text-decoration:none;background:var(--nen-2);border-radius:999px;padding:3px 12px;font-size:13.5px} .ngay a:hover{background:var(--xanh-nen);color:var(--xanh)} /* ── Nút ───────────────────────────────────────────────────────────────────────────────── */ /* Gradient hai tông + tia sáng lướt định kỳ — ĐỢT 11 (25/08/2026), lấy nguyên công thức nút CTA chính của trang chủ (`a.pal-hero__cta` ở pal-home.css) cho nhất quán: nút chính ở BẤT KỲ trang nào trong site (gửi liên hệ, thêm giỏ hàng…) đều phải là "cùng một nút", không phải hai kiểu thiết kế khác nhau tuỳ trang. overflow:hidden để giữ tia sáng gọn trong viên thuốc. */ .nut{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 26px;border-radius:999px; background:linear-gradient(135deg,var(--xanh) 0%,var(--xanh-dam) 100%);color:#fff;text-decoration:none; font:inherit;font-size:16px;font-weight:600;border:1px solid transparent;cursor:pointer; transition:transform .4s var(--nay),background .25s ease,box-shadow .4s ease} .nut:hover{background:var(--xanh-dam);transform:translateY(-1px);box-shadow:var(--bong-noi)} .nut:active{transform:translateY(0)} /* Tia sáng CHỈ gắn cho nút chính (:not(.phu)) — nút phụ nền nhạt gần như không thấy hiệu ứng, chạy vô ích. Cùng công thức pal-cta-quet của trang chủ: chỉ animate transform, rẻ dù chạy vô hạn. */ .nut:not(.phu):not(.phu-nut)::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%); transform:translateX(-120%);animation:pal-nut-quet 6s ease-in-out infinite;animation-delay:2s} @keyframes pal-nut-quet{0%,18%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}} /* Selector PHẢI lặp lại ĐÚNG các `:not()` của luật gốc (không chỉ `.nut::after`): `:not(.phu):not(.phu-nut)` mỗi cái cộng thêm 1 vào độ đặc hiệu (bộ chọn phủ định tính điểm như class thường), nên luật gốc có độ đặc hiệu (0,3,1), cao hơn hẳn `.nut::after` trần (0,1,1) — viết trần thì `animation:none` bị luật gốc ĐÈ MẤT dù nằm sau và dù khớp đúng @media, chỉ có `display:none` (không bị luật gốc tranh chấp) là còn tác dụng. Vẫn "trông như đúng" (phần tử ẩn thật) nên rất dễ lọt qua kiểm bằng mắt — chỉ lộ khi đọc `getComputedStyle(...).animationName` bằng Playwright. Cùng họ bẫy độ-đặc-hiệu đã ghi ở docs/bay-ky-thuat.md, tái phát vì lần này là animation/pseudo-element chứ không phải màu. */ @media (prefers-reduced-motion:reduce){.nut:not(.phu):not(.phu-nut)::after{animation:none;display:none}} .nut.phu-nut,.nut.phu{background:var(--nen);color:var(--chu);border-color:var(--vach-dam);box-shadow:none} .nut.phu-nut:hover,.nut.phu:hover{background:var(--nen-2);border-color:var(--chu-3);box-shadow:none} .nut-lon{padding:15px 32px;font-size:17px} /* ── Viền quét khi hover — ĐỢT 11 (25/08/2026) ───────────────────────────────────────────── Lấy nguyên công thức "viền quét AI" của thẻ sản phẩm trang chủ (`.pal-o::after`, xem pal-home.css): conic-gradient xoay quanh viền qua mặt nạ padding-box/border-box. CHỈ gắn cho thẻ thật sự CLICK ĐƯỢC (`.ds-bai li` chứa link bài viết, `.sp-o` là chính thẻ ``) — `.the` (khối liên hệ, bản đồ, biểu mẫu) KHÔNG phải link nên không gắn, tránh ngụ ý "bấm được" sai chỗ. `@property` phải khai LẠI ở đây (không dùng chung khai báo bên pal-home.css) vì trang public và trang chủ không bao giờ nạp chung một trang — hai tệp CSS độc lập, mỗi tệp cần khai đủ thứ nó dùng. Chỉ vẽ+chạy khi đang hover (giống hệt lý do ở pal-home.css): tối đa một thẻ hover cùng lúc trên desktop nên chi phí thực tế gần 0 dù danh sách có bao nhiêu thẻ. */ @property --goc-vien-site{syntax:'';inherits:false;initial-value:0deg} .ds-bai li,.sp-o{position:relative} /* "Sao chổi" thay vì dải màu đối xứng — cùng nâng cấp và cùng lý do với `.pal-o::after` của trang chủ (đợt 12, 25/08/2026, xem chú thích đầy đủ ở pal-home.css). Khai `background` 2 lần: dòng đầu không cần `color-mix()` làm nền cho trình duyệt cũ, dòng sau mới là bản comet thật. */ .ds-bai li::after,.sp-o::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;opacity:0; background:conic-gradient(from var(--goc-vien-site,0deg),var(--xanh),transparent 24%,transparent 76%,var(--xanh-sang)); background:conic-gradient(from var(--goc-vien-site,0deg), color-mix(in srgb,var(--xanh) 55%,white) 0deg,var(--xanh) 8deg, color-mix(in srgb,var(--xanh-sang) 30%,transparent) 70deg, transparent 150deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;transition:opacity .35s ease} @media (hover:hover) and (pointer:fine){ .ds-bai li:hover::after,.sp-o:hover::after{opacity:1;animation:pal-vien-xoay-site 3.2s linear infinite} } @keyframes pal-vien-xoay-site{to{--goc-vien-site:360deg}} @media (prefers-reduced-motion:reduce){.ds-bai li::after,.sp-o::after{display:none}} /* ── Hiện dần khi cuộn tới — ĐỢT 11 (25/08/2026) ──────────────────────────────────────────── Trước đây MỌI trang public trừ trang chủ không có lấy MỘT hiệu ứng chuyển động nào — vào là thấy hết ngay, đọc "cứng" hơn hẳn trang chủ. `assets/js/pal-site.js` (IntersectionObserver, không phụ thuộc GSAP — trang public phải NHẸ, không kéo thêm 2 thư viện ~70KB chỉ để làm hiệu ứng) gắn lớp `.hien-cuon` khi từng khối cuộn tới, cùng triết lý `.pal-reveal` của trang chủ nhưng độc lập tên lớp vì cơ chế JS khác hẳn (GSAP ScrollTrigger vs IntersectionObserver thuần). ⚠ Trạng thái ẩn mặc định (opacity:0) là KHÔNG AN TOÀN nếu JS không chạy — đã thêm khối `