/* ========================================================================== Lolool — Hero trang chủ (.kb-hero, 18/08/2026, thiết kế theo omrimalka.art) + DẢI VIDEO #dai-video (06/09/2026) đã thay chỗ khảm 15 ảnh cũ. Scope: .kb-* (hero) và .dv-* (dải video) — không đụng phần còn lại của app. Font: Libre Caslon Text (display) · Archivo Narrow (nhãn) · EB Garamond (body) ========================================================================== */ .kham-band { /* full-bleed thoát khỏi .main-content */ margin: 0 calc(50% - 50vw); background: #05211A; } /* Lưới hero đầu trang. 18/08–05/09: hero-anat (2/3) + ô ảnh "sổ thai theo tuần" (1/3) + ảnh "thiền 10 phút" nghiêng 3° phá lưới. 06/09 (anh Tú: "bỏ ảnh này đi"): hai ảnh TĨNH đó đã gỡ khỏi index.html — .kb-hero còn đúng một ô, hero-anat chiếm cả bề ngang. Giữ nguyên .kb-hero và .kb-hero-cell .hero-anat (test/hero-cta.test.js khoá), chỉ đổi số cột. Ảnh bìa mẹ-bé phát sáng (.ha-visual trong hero-anat) KHÔNG đụng — đó là ảnh động anh Tú muốn giữ. */ .kb-hero { position: relative; display: grid; grid-template-columns: 1fr; /* 20/08/2026 — SỬA LỖI MẤT NÚT "Theo dõi chỉ số của bé". Trước là `grid-auto-rows: 115px` cứng. Hero chiếm grid-row 1/5 nên cao đúng 4×115 = 460px, trừ padding 96 trên + 40 dưới còn 324px cho nội dung. Chữ trong hero dùng clamp() theo vw nên màn càng rộng chữ càng to: ở ~1900px thì badge + tiêu đề 2 dòng + slogan + mô tả 3 dòng + nút ngốn khoảng 390px. .hero-anat lại có overflow:hidden → nút CTA là phần tử CUỐI, bị cắt cụt. Điện thoại không dính vì @media 860px đã cho height:auto. minmax cho hàng nở ra vừa nội dung; ô ảnh bên cạnh tự giãn theo (grid mặc định stretch) nên hai bên vẫn bằng nhau. */ grid-auto-rows: minmax(115px, auto); gap: 0; margin: 0 calc(50% - 50vw); background: #05211A; } .kb-hero-cell { grid-column: 1/-1; grid-row: 1/5; } .kb-hero-cell .hero-anat { /* height:100% + hàng cứng chính là cái khoá chiều cao. Nay hero tự quyết chiều cao của mình, 460px chỉ còn là mức TỐI THIỂU. */ height: auto; min-height: 460px; border-radius: 0; margin: 0; box-shadow: none; padding: 96px 48px 40px; } /* Mẹ đã có hồ sơ (html.lolo-co-ho-so, 05/09 Task 1): hero gọn không cần giữ mức tối thiểu 460px của bản đầy đủ. Rule RIÊNG — không sửa .kb-hero-cell .hero-anat gốc ở trên (khoá bởi test/hero-cta.test.js). Class nằm trên (gắn từ , xem index.html) để hero ra đúng dạng ngay lần vẽ đầu, không co lại sau khi mẹ đã nhìn thấy bản đầy đủ. */ html.lolo-co-ho-so .kb-hero .kb-hero-cell .hero-anat { min-height: 0; } /* (06/09) .kb-thai / .kb-tile / .kb-lbl / .kb-float-a đã xoá cùng hai ảnh tĩnh. */ /* CTA lớn dưới dải video */ .kb-cta { display: inline-flex; align-items: center; justify-content: center; font-family: 'Archivo Narrow', sans-serif; font-size: 20px; font-weight: 700; color: #05211A; background: #8DEFC0; border-radius: 999px; padding: 22px 44px; min-height: 56px; text-decoration: none; box-shadow: 0 16px 44px rgba(141,239,192,.28); transition: transform .18s ease, box-shadow .18s ease; } .kb-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 54px rgba(141,239,192,.4); } .kb-cta:focus-visible { outline: 2px solid #8DEFC0; outline-offset: 3px; } /* Hero trang chủ: chuyển display serif sang Caslon (duyệt 18/08, theo Iron Branches) */ .hero-anat .ha-title, .hero-anat .ha-slogan { font-family: 'Libre Caslon Text', Georgia, serif; } /* Mobile */ @media (max-width: 860px) { .kb-hero { display: block; } .kb-hero-cell .hero-anat { height: auto; padding: 96px 22px 36px; } .kb-cta { font-size: 18.5px; padding: 18px 28px; } } /* Giảm chuyển động */ @media (prefers-reduced-motion: reduce) { .kb-cta { transition: none; } .kb-cta:hover { transform: none; filter: none; } } /* ========================================================================== dải video (06/09) — #dai-video. Dựng theo carousel "Lo principal" của apple.com/es/apple-watch-se-3 (reference lock P2), màu/font là token Lolool. 06/09 CHIỀU — SỬA THEO ANH TÚ ("trên máy tính bị vỡ"). 11 file mp4 là khổ DỌC 560×752 (tỉ lệ 0,745), dài 4,04 s. Bản sáng dựng card NGANG 16:9 rộng ~1036px → video bị phóng ~2× và object-fit cắt trên/dưới: trên laptop thấy rõ hạt, trên điện thoại card chỉ ~360px nên không ai thấy. Nay: · card đúng aspect-ratio 560/752 và KHÔNG BAO GIỜ rộng quá 560px (bề rộng gốc của video) — không còn phóng lên, hết vỡ; · desktop ≥900px: 3 card một khung, snap CENTER, card giữa = card đang phát; · ô đầu/ô cuối cũng vào được giữa nhờ lề mép (.dv-o:first/last-child) — nếu thiếu lề này thì ô 0 và ô 10 không bao giờ tới tâm, tức không bao giờ được phát, tức vòng quay tự động gãy ở hai đầu; · pill điều khiển xuống DƯỚI dải: card dọc hẹp, đè pill lên giữa là che mặt. ========================================================================== */ .dv { --dv-card: min(78vw, 360px); /* bề rộng card — trần 560px là bề rộng video gốc */ --dv-khe: 12px; /* khe giữa hai ô */ --dv-nga: #FAF8F3; /* chữ trên scrim — kem của app, đọc được ở cả 2 chế độ */ /* ĐIỆN THOẠI: lề để ô đầu/cuối cũng vào được chính giữa ray. Card ở khổ này rộng 78vw nên phần lề chỉ đọc ra như canh lề hai bên, không phải chỗ trống. Dùng margin của flex item (không phải padding của ray): margin luôn được tính vào vùng cuộn ở mọi trình duyệt, padding-inline-end thì không. DESKTOP đặt về 0 (xem @media min-width:900px) — ở đó khung chứa 3 card, lề canh giữa sẽ để lại nguyên một ô trống bên trái, nhìn như lỗi. */ --dv-mep: max(0px, calc((100% - var(--dv-card)) / 2)); margin: 34px 0 4px; /* dải cần thở tách khỏi hero */ } .dv-ten { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0 0 20px; } .dv-khung { position: relative; } /* Ray cuộn: cuộn NGANG trong chính nó, trang không bao giờ cuộn ngang theo. */ .dv-ray { display: flex; gap: var(--dv-khe); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .dv-ray::-webkit-scrollbar { display: none; } .dv-ray:focus-visible { outline: 2px solid var(--primary-dark, #469F4C); outline-offset: 4px; border-radius: var(--radius-lg, 20px); } .dv-o { position: relative; display: block; overflow: hidden; flex: 0 0 var(--dv-card); max-width: 560px; /* trần cứng: bề rộng thật của file video */ aspect-ratio: 560 / 752; /* đúng khổ 560×752 → object-fit không phải cắt gì */ border-radius: var(--radius-xl, 28px); background: var(--bg-soft, #082A20); scroll-snap-align: center; text-decoration: none; } .dv-o:first-child { margin-inline-start: var(--dv-mep); } .dv-o:last-child { margin-inline-end: var(--dv-mep); } .dv-vid { width: 100%; height: 100%; object-fit: cover; display: block; } /* Scrim CHỈ ở 45% dưới — đủ cho chữ đọc được, không phủ mờ cả video. */ .dv-o::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.55)); pointer-events: none; z-index: 1; } .dv-chu { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; } .dv-chu b { display: block; font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; line-height: 1.22; color: var(--dv-nga); } .dv-chu span { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: rgba(250, 248, 243, .8); } /* Pill điều khiển ĐẶT DƯỚI dải, căn giữa khung (06/09 chiều) */ .dv-dieu-khien { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; } .dv-cham, .dv-play { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink); border: 1px solid var(--border-light); border-radius: 980px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .dv-cham, .dv-play { background: var(--surface); } } .dv-cham { display: flex; align-items: center; gap: 8px; padding: 11px 14px; } .dv-cham-nut { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 980px; background: currentColor; opacity: .35; cursor: pointer; transition: width .24s cubic-bezier(.3,.55,.25,1), opacity .24s ease; } .dv-cham-nut.on { width: 18px; opacity: 1; } .dv-cham-nut:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .dv-play { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .dv-play .dv-ic-phat { display: none; } .dv-play.dv-dang-tam .dv-ic-tam { display: none; } .dv-play.dv-dang-tam .dv-ic-phat { display: block; } /* Ô đang phát nổi lên, hai ô bên cạnh lùi lại một nấc. Dùng filter chứ KHÔNG dùng opacity: opacity đang là kênh của hiệu ứng reveal bên dưới, chồng lên nhau là hai luật đánh nhau. Gate .dv-anim: JS tắt thì mọi ô sáng đều. */ html.dv-anim #dai-video .dv-o { filter: brightness(.74) saturate(.92); transition: filter .35s ease; } html.dv-anim #dai-video .dv-o.dv-hien { filter: none; } .dv-day { margin-top: 30px; text-align: center; } /* Reveal vào-khi-cuộn — chỉ ẩn khi js/dai-video.js đã bật cờ .dv-anim */ html.dv-anim #dai-video [data-dv-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.3,.55,.25,1), transform .6s cubic-bezier(.3,.55,.25,1); } html.dv-anim #dai-video [data-dv-reveal].is-in { opacity: 1; transform: none; } /* Desktop: 3 card một khung. 26vw trần 344px — ở 1280 card 332,8px (3 card + 2 khe = 1030px trong ray 1112px, mỗi mép còn ~25px ló ra làm dấu "còn nữa"); ở 1440 trần 344px giữ đúng dấu ló đó thay vì ăn kín cả ray. */ @media (min-width: 900px) { .dv { --dv-card: clamp(240px, 26vw, 344px); --dv-khe: 16px; --dv-mep: 0px; } .dv-chu { left: 24px; right: 24px; bottom: 20px; } } @media (max-width: 860px) { .dv { margin-top: 22px; } .dv-ten { margin-bottom: 14px; } .dv-cham { gap: 7px; padding: 9px 12px; } .dv-play { width: 32px; height: 32px; } .dv-day { margin-top: 22px; } } /* Điện thoại: ray chạy sát hai mép màn (âm đúng bằng padding của .main-content ở khổ này) để ô kế ló ra ~30px thay vì ~13px. Dùng số cố định, KHÔNG dùng 100vw/50vw — vw tính cả thanh cuộn nên đó chính là công thức đẻ ra cuộn ngang. */ @media (max-width: 768px) { .dv-khung { margin-inline: -18px; } .dv-ten, .dv-day { padding-inline: 0; } } @media (prefers-reduced-motion: reduce) { .dv-ray { scroll-behavior: auto; } .dv-cham-nut { transition: none; } html.dv-anim #dai-video .dv-o { transition: none; } html.dv-anim #dai-video [data-dv-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }