/* ========================================================== LUMINA — Profile stylesheet (dùng chung cho index.html & index-en.html) Bảng màu chính thức: trắng chủ đạo · xanh lá · vàng mật ong ========================================================== */ :root{ --green:#5FAF58; --green-lt:#84C86B; --green-bg:#DFF3D7; --honey:#F2B31A; --honey-lt:#FFD76A; --cream:#FFF7E7; --white:#FFFFFF; --dark:#1E4A33; --dark-2:#143323; --charcoal:#2B2B2B; --line:#E6E6E6; --maxw:1200px; --serif:"Playfair Display",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,-apple-system,sans-serif; --pad-sec:96px; } *{box-sizing:border-box} /* 🔴 `overflow-x` PHẢI đặt ở , TUYỆT ĐỐI KHÔNG đặt ở . Đặt ở body sẽ biến body thành khung cuộn riêng → trên iOS Safari `position:sticky` của header CHẾT (logo trôi mất khi cuộn), còn Chrome máy tính vẫn chạy bình thường nên rất dễ tưởng là không có lỗi. Đã mắc đúng lỗi này 18/07/2026 — đừng chuyển ngược lại. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} /* Cỡ chữ nền: 17px + giãn dòng 1.78 — ưu tiên dễ đọc cho người lớn tuổi. Muốn to/nhỏ toàn trang chỉ cần đổi font-size ở đây. */ body{margin:0;font-family:var(--sans);color:var(--charcoal);background:var(--white); font-size:17px;line-height:1.78;font-weight:400;-webkit-font-smoothing:antialiased} body.menu-open{overflow:hidden} h1,h2,h3,h4{font-family:var(--serif);color:var(--dark);font-weight:600;line-height:1.2;margin:0} p{margin:0 0 1em} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase; font-size:13px;color:#C68A08;margin-bottom:14px} .eyebrow.green{color:#3F8C39} .lede{font-size:21px;color:#3f3f3f} section{padding:var(--pad-sec) 0;position:relative} .sec-head{text-align:center;max-width:760px;margin:0 auto 44px} .divider-leaf{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 8px} .divider-leaf .ln{height:1px;width:70px;background:var(--green-lt)} .note{font-size:15px;color:#6b6b6b;font-style:italic} /* ---------- NỀN SECTION: sáng ---------- */ .tint{background:linear-gradient(180deg,#fff,var(--cream))} .tint-green{background:var(--green-bg)} .soft{background:#FBFDF9} /* ---------- NỀN SECTION: ĐẬM (điểm nhấn xen kẽ) ---------- */ .sec-dark{background:linear-gradient(155deg,var(--dark) 0%,var(--dark-2) 100%);color:#cfe3d6; position:relative;overflow:hidden} .sec-dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06; background-image:radial-gradient(circle at 20% 30%,#F2B31A 0 2px,transparent 2px), radial-gradient(circle at 70% 60%,#F2B31A 0 2px,transparent 2px); background-size:90px 90px} .sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff} .sec-dark p,.sec-dark .lede{color:#d5e8dc} .sec-dark .eyebrow,.sec-dark .eyebrow.green{color:var(--honey-lt)} .sec-dark .card,.sec-dark .item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .sec-dark .card p,.sec-dark .item span{color:#d0e5d8} .sec-dark .card:hover{box-shadow:0 18px 40px rgba(0,0,0,.3);background:rgba(255,255,255,.08)} .sec-dark .num{color:var(--honey-lt)} .sec-dark .card .ic,.sec-dark .item .ic{color:var(--honey-lt)} .sec-dark .gal img{border-color:rgba(255,255,255,.1)} .sec-green{background:linear-gradient(155deg,var(--green) 0%,#4A9445 100%);color:#f2fbef; position:relative;overflow:hidden} .sec-green h1,.sec-green h2,.sec-green h3,.sec-green h4{color:#fff} .sec-green p,.sec-green .lede{color:#e6f6e2} .sec-green .eyebrow{color:#fff} .sec-green .step .n{background:#fff;color:var(--green);box-shadow:0 8px 20px rgba(0,0,0,.18)} .sec-green .step b{color:#fff} .sec-green .step span{color:#eaf8e6} .sec-green .col-img img{box-shadow:0 20px 50px rgba(0,0,0,.25)} .sec-honey{background:linear-gradient(155deg,var(--honey-lt) 0%,var(--honey) 100%);color:#4a3800} /* Dải hình ảnh thương hiệu ngay trên chân trang — KHÔNG chữ, nền tối hẳn (khách chốt 18/07/2026). Nền gần như đen để 3 ảnh infographic (vốn cũng nền tối) hoà liền vào trang, không thấy viền ảnh. Cố tình tối hơn `.sec-dark` — nếu đổi sang màu sáng thì mép ảnh lộ ra, mất hiệu ứng. */ .sec-ink{background:#0B120E;padding:56px 0} .info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .info-strip img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px; display:block;transition:transform .3s,box-shadow .3s} .info-strip img:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.55)} @media(max-width:900px){.info-strip{gap:12px}} /* ≤700px: 3 ảnh nằm ngang thì mỗi ảnh chỉ ~110px — chữ trong infographic không đọc nổi. Cho về 1 cột để xem được, vẫn bấm phóng to bằng lightbox. */ @media(max-width:700px){.info-strip{grid-template-columns:1fr;gap:14px}.sec-ink{padding:40px 0}} .sec-honey h1,.sec-honey h2,.sec-honey h3{color:#3d2f00} .sec-honey p,.sec-honey .lede{color:#503e00} .sec-honey .eyebrow,.sec-honey .eyebrow.green{color:#6b5000} .sec-honey .item{background:rgba(255,255,255,.82);border-color:#fff} .sec-honey .item .ic{color:var(--dark)} .sec-honey .item b{color:var(--dark)} .sec-honey .item span{color:#4a3900} /* ---------- NAV ---------- */ /* 🔴 TUYỆT ĐỐI KHÔNG thêm `backdrop-filter` vào header này. Dải chứng nhận chạy ngang (.trust-strip) nằm BÊN TRONG header. Trên iOS Safari, phần tử cha có backdrop-filter tạo "backdrop root" → phần tử con chạy animation `transform` KHÔNG được vẽ lại, dải đứng im như chết. Chrome trên PC vẫn vẽ bình thường nên giả lập mobile không thấy lỗi — khách xem trên iPhone thật mới phát hiện (18/07/2026). Nền phải ĐỤC HOÀN TOÀN. Trước đây nền trong mờ (.94) trông ổn vì có blur che; bỏ blur mà vẫn để trong mờ thì chữ của section phía sau lộ xuyên qua logo — đã thấy tận mắt khi kiểm. */ header.nav{position:sticky;top:0;z-index:60;background:var(--white); border-bottom:1px solid var(--line)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:10px 28px;display:flex;align-items:center; justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:12px} .logo{width:40px;height:50px;flex:0 0 auto} /* Logo ảnh ở header — chỉ dùng trên nền SÁNG (chữ "LIÊN LINH" màu xanh đậm) */ .brand-logo{height:46px;width:auto;display:block} /* Logo có 2 bản: chữ xanh đậm cho nền sáng, chữ sáng cho nền tối. Không đổi thì ở chế độ tối chữ "LIÊN LINH" sẽ tàng hình. */ .logo-dark{display:none} [data-theme="dark"] .logo-light{display:none} [data-theme="dark"] .logo-dark{display:block} @media(max-width:760px){.brand-logo{height:44px}} @media(max-width:400px){.brand-logo{height:42px}} .nav-links{display:flex;gap:24px;align-items:center;font-size:16px;font-weight:500} .nav-links a{color:#444;transition:color .2s} .nav-links a:hover{color:var(--green)} .nav-right{display:flex;align-items:center;gap:10px} /* ========================================================== DẢI CHỨNG NHẬN CHẠY NGANG (chỉ hiện trên mobile) Nằm BÊN TRONG

nên dính cùng logo/menu khi cuộn. Bấm vào → nhảy tới phần chứng nhận. ========================================================== */ .trust-strip{display:block;overflow:hidden;position:relative; background:linear-gradient(90deg,var(--dark) 0%,#26603f 50%,var(--dark) 100%)} /* làm mờ hai mép cho mượt */ .trust-strip::before,.trust-strip::after{content:"";position:absolute;top:0;bottom:0;width:26px;z-index:2;pointer-events:none} .trust-strip::before{left:0;background:linear-gradient(90deg,var(--dark),transparent)} .trust-strip::after{right:0;background:linear-gradient(270deg,var(--dark),transparent)} /* Mỗi nửa track = 3 bộ huy hiệu (~2550px) để phủ kín cả màn hình rộng, tránh hở khoảng trắng khi lặp. Thời lượng 70s tương ứng ~36px/giây — đổi số này nếu muốn chạy nhanh/chậm hơn. */ .trust-track{display:flex;width:max-content;animation:trustScroll 70s linear infinite} .trust-item{display:inline-flex;align-items:center;gap:7px;padding:9px 15px; color:#EAF6EE;font-family:var(--sans);font-size:13.5px;font-weight:700; letter-spacing:.03em;white-space:nowrap} .trust-item svg{width:16px;height:16px;flex:0 0 auto;color:var(--honey-lt)} .trust-item.dot{padding:9px 0;color:var(--honey);font-size:15px} @keyframes trustScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* tiếng Ả Rập chạy ngược chiều cho đúng hướng đọc */ [dir="rtl"] .trust-track{animation-name:trustScrollRtl} @keyframes trustScrollRtl{from{transform:translateX(0)}to{transform:translateX(50%)}} /* trên mobile thu gọn lại một chút cho đỡ chiếm chỗ */ @media(max-width:760px){ .trust-item{padding:8px 13px;font-size:12.5px} .trust-item svg{width:15px;height:15px} } /* Tôn trọng thiết lập "Giảm chuyển động" của người dùng (iOS: Cài đặt › Trợ năng › Chuyển động). ⚠️ Bản dự phòng cũ để `overflow-x:auto` — 30 huy hiệu tràn ngang một dải cuộn tay mà không ai biết là cuộn được, nhìn y như dải bị đứng máy. Nay chỉ giữ **1 bộ 5 huy hiệu đầu** (9 phần tử gồm cả chấm ngăn), căn giữa, cho ra dáng một dải tĩnh cố ý. */ @media (prefers-reduced-motion:reduce){ .trust-track{animation:none;width:100%;justify-content:center;flex-wrap:nowrap} /* ⚠️ CHỈ giữ 3 huy hiệu đầu (ISO · HACCP · HALAL) = 5 phần tử kể cả 2 chấm ngăn. Giữ đủ 5 huy hiệu thì KHÔNG vừa bề ngang 390px → xuống 2 dòng, nhìn như vỡ layout (đã mắc, khách chụp màn hình iPhone 12 Pro Max báo 18/07/2026). Đây là 3 mục giá trị nhất; 2 mục còn lại đã có nguyên một section chứng nhận ở dưới. TUYỆT ĐỐI KHÔNG dùng flex-wrap:wrap ở đây. */ .trust-track>:nth-child(n+6){display:none} /* Đã đo thật: padding 8/7 + chữ 12.5px → dải rộng 357px, vừa màn 375px. Nới rộng hơn nữa là tràn. Màn hẹp 360px trở xuống thu thêm một nấc. */ .trust-item{padding:8px 7px;gap:7px} .trust-strip::before,.trust-strip::after{display:none} /* hết chạy thì không cần mờ mép */ /* ---- Luân phiên 2 bộ, mờ dần tại chỗ (khách chốt 18/07/2026) ---- Không trượt, không dịch chuyển → vẫn tôn trọng "Giảm chuyển động" (thiết lập này nhắm vào chuyển động VỊ TRÍ gây chóng mặt, chứ fade tại chỗ thì không). Bộ A = ISO · HACCP · HALAL (phần tử 1–5) Bộ B = 100% NGUYÊN BẢN · ĐÃ KIỂM NGHIỆM (7–9). `data-set` do app.js gắn. Nếu app.js lỗi/không tải được thì KHÔNG có data-set → tự động về bộ A tĩnh 1 hàng, vẫn đẹp. Đây là lý do phải giữ luật mặc định ở trên. */ .trust-track{transition:opacity .4s ease} .trust-track[data-set="b"]>:nth-child(-n+5){display:none} .trust-track[data-set="b"]>:nth-child(n+7):nth-child(-n+9){display:inline-flex} } @media (prefers-reduced-motion:reduce) and (max-width:360px){ .trust-item{padding:8px 5px;gap:5px;font-size:11.5px} /* đo được 310px, vừa cả màn 320px */ } /* nút hamburger — ĐÃ BỎ khỏi header (mobile dùng nút Menu ở thanh dưới). Giữ lại luật phòng khi cần dùng lại. */ .menu-btn{display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff; border-radius:14px;align-items:center;justify-content:center;flex-direction:column;gap:5px; cursor:pointer;padding:0;flex:0 0 auto} .menu-btn span{display:block;width:20px;height:2px;background:var(--dark);border-radius:2px; transition:transform .3s,opacity .2s} body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .menu-btn span:nth-child(2){opacity:0} body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* menu mobile toàn màn hình — kiểu app */ .mobile-menu{position:fixed;inset:0;z-index:55;background:linear-gradient(160deg,var(--dark),var(--dark-2)); display:flex;flex-direction:column;justify-content:center;padding:90px 28px env(safe-area-inset-bottom) 28px; opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .28s,transform .28s,visibility .28s} body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none} .mobile-menu a{display:flex;align-items:center;justify-content:space-between;color:#fff; font-family:var(--serif);font-size:26px;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.14)} .mobile-menu a::after{content:"→";color:var(--honey-lt);font-size:20px} .mobile-menu .mm-foot{margin-top:28px;color:#9fc4ac;font-size:15px} .mobile-menu .mm-foot a{display:inline;border:0;font-family:var(--sans);font-size:15px; color:var(--honey-lt);padding:0} .mobile-menu .mm-foot a::after{content:""} /* ---------- HERO ---------- */ .hero{background:linear-gradient(160deg,var(--cream) 0%,#fff 60%);padding:0;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px; min-height:calc(100vh - 69px)} .hero-txt{padding:60px 0} .hero h1{font-size:clamp(38px,6vw,72px);line-height:1.05;margin-bottom:22px} .hero h1 em{font-style:italic;color:var(--honey)} .hero .sub{font-size:20px;color:#3f3f3f;max-width:480px;margin-bottom:28px} /* ========================================================== 3 Ô ĐỊNH VỊ (RAW · UNHEATED · UNPROCESSED) — khách chốt 18/07/2026 Ô VUÔNG 3 cột 1 dòng ở CẢ pc lẫn mobile (trước là 3 viên thuốc bo tròn xếp tự do). ⚠️ Giữ đúng 3 cột — thêm ô thứ 4 là vỡ bố cục, phải sửa lại số cột. ⚠️ Nhãn dài nhất là bản Việt ("KHÔNG XỬ LÝ NHIỆT") nên chữ dưới phải nhỏ và cho xuống dòng. ========================================================== */ .badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:32px} .badge{position:relative;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;text-align:center;padding:14px 10px;border-radius:14px; background:rgba(255,255,255,.7);overflow:hidden;isolation:isolate} .badge b{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--dark);line-height:1.2} .badge i{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.03em; color:#5d6b62;line-height:1.35} /* Viền có ánh sáng chạy vòng: dải conic quay tròn, dùng mask chừa đúng 1.5px viền. Đặt ở lớp dưới cùng (z-index:-1) nên KHÔNG che chữ. 3 ô lệch pha cho sinh động. */ .badge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--a),rgba(95,175,88,.25) 0deg,var(--honey-lt) 70deg, #fff 110deg,var(--green-lt) 160deg,rgba(95,175,88,.25) 260deg,rgba(95,175,88,.25) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;animation:badgeSpin 4.5s linear infinite;z-index:-1} .badge:nth-child(2)::before{animation-delay:-1.5s} .badge:nth-child(3)::before{animation-delay:-3s} @property --a{syntax:"";initial-value:0deg;inherits:false} @keyframes badgeSpin{to{--a:360deg}} /* Trình duyệt không hỗ trợ @property (Firefox cũ) thì --a đứng yên → viền vẫn đẹp, chỉ không chạy. */ .cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px; background:var(--honey);color:#3a2c00;font-weight:600;padding:16px 32px;border-radius:999px; font-size:17px;box-shadow:0 10px 26px rgba(242,179,26,.32);transition:transform .2s,box-shadow .2s} .cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(242,179,26,.44)} /* vệt sáng quét ngang cho nút long lanh */ .cta::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent); transform:skewX(-18deg);animation:ctaShine 3.6s ease-in-out infinite;pointer-events:none} @keyframes ctaShine{0%{left:-45%}55%,100%{left:125%}} @media (prefers-reduced-motion:reduce){ .cta::after{animation:none;opacity:0} .badge::before{animation:none} } .hero-img{position:relative;height:100%;min-height:520px} .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-bottom-left-radius:120px} /* ---------- SPLIT ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split.rev .col-img{order:2} .col-img img{border-radius:14px;box-shadow:0 20px 50px rgba(30,74,51,.14);width:100%;object-fit:cover} /* ⚠️ BẢO HIỂM: chặn ảnh DỌC kéo cột cao vống lên (vd founder.jpg 975×1600). Ảnh nào cần cao hơn thì đặt height inline — sẽ ghi đè max-height này. */ .col-img img{max-height:520px} /* Ảnh Nhà sáng lập ở mục Thư ngỏ — dùng thẻ