/* ============================================================ IMV Homepage — layout flex/grid responsive Tông màu + illustration lấy từ bản thiết kế WEB3 (Figma export), nhưng dựng lại bằng flexbox/grid semantic để chạy responsive trong WordPress (không dùng position:absolute tọa độ cứng). ============================================================ */ .imv-home * { box-sizing: border-box; } .imv-home { --imv-blue: #0062e7; --imv-blue-dark: #0255af; --imv-navy: #053b6d; --imv-red: #eb1f3c; --imv-orange: #ed740d; --imv-green: #22a06b; --imv-text: #1f2430; --imv-muted: #83849f; --imv-line: #eaeaea; --imv-bg: #ffffff; --imv-card: #ffffff; --imv-radius: 16px; /* Bóng nhẹ mềm theo mockup Figma: cạnh trên gần như phẳng (offset-y đẩy bóng xuống), đáy đổ bóng nhẹ. Lớp 1 = contact mảnh, lớp 2 = bóng lan mềm. */ --imv-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06); /* Hệ lưới thống nhất để mọi hàng thẳng trục: cột phải ngoài cùng (rail) + cột giữa. */ --imv-gap: 20px; --imv-rail: 318px; /* cột phải: Quick Access / Upcoming list / Quick Announcements (khớp mockup Figma 318.21px) */ --imv-mid: 300px; /* cột giữa: Upcoming Events (số liệu) */ font-family: Inter, "Helvetica Neue", Arial, sans-serif; color: var(--imv-text); background: var(--imv-bg); font-size: 14px; line-height: 1.5; } body.imv-body, body.imv-homepage-body { margin: 0; background: var(--imv-bg); } .imv-home a { text-decoration: none; color: inherit; } /* Nếu trang chủ nhúng bằng shortcode [imv_homepage] trong 1 trang Flatsome, nội dung bị bọc trong .container/.page-wrapper (~1030px) của theme. Ép các wrapper đó full-width để .imv-container 1440px hiển thị đúng. Chỉ ảnh hưởng khi bên trong có .imv-home nên không đụng trang khác. */ .page-wrapper:has(.imv-home), .page-wrapper:has(.imv-home) #content, #content:has(.imv-home), .entry-content:has(.imv-home), .container:has(> .imv-home), .row:has(> .col .imv-home), .col:has(.imv-home) { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; flex-basis: 100% !important; } /* Ép wrapper của .imv-home full-width, thoát giới hạn "Site Width" Flatsome */ #imv-homepage-wrap, .imv-home { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box; } .imv-container { max-width: 1440px !important; width: 100% !important; margin: 0 auto !important; padding: 20px 24px 60px !important; box-sizing: border-box; } /* ---------- Hàng đầu: 3 cột (Featured | Birthdays+Members | Quick Access) ---------- */ .imv-toprow { display: grid; /* Trục dọc thống nhất với các hàng dưới: cột giữa = mid, cột phải = rail. */ grid-template-columns: minmax(0, 1fr) var(--imv-mid) var(--imv-rail); /* Welcome ở hàng trên (cột 1-2); Quick Access span cả 2 hàng (cột 3) nên CAO HƠN. Hàng 2 TỐI THIỂU 356px (khớp mockup Figma) nhưng GIÃN theo nội dung cao nhất (vd cột giữa Birthdays + New Members khi tên dài) → không ô nào bị cắt. */ grid-template-rows: auto minmax(356px, auto); grid-template-areas: "welcome welcome qa" "featured side qa"; gap: 16px var(--imv-gap); align-items: stretch; margin-bottom: 20px; } .imv-top-welcome { grid-area: welcome; margin-bottom: 0; align-self: center; } .imv-top-col1 { grid-area: featured; } .imv-top-col2 { grid-area: side; } .imv-top-col3 { grid-area: qa; } .imv-toprow > .imv-top-col1, .imv-toprow > .imv-top-col2, .imv-toprow > .imv-top-col3 { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Featured lấp đủ chiều cao hàng 2 (356px cố định); min-height:0 để không ép cao thêm */ .imv-top-col1 > .imv-featured { flex: 1; min-height: 0; } /* New Members giãn xuống lấp đáy */ .imv-top-col2 > .imv-card:last-child { flex: 1; } /* Quick Access giãn full chiều cao (span 2 hàng) */ .imv-top-col3 > .imv-card { flex: 1; } /* ---------- Các hàng dưới: dùng CÙNG hệ 3 cột với hàng Hot News ---------- main (Life/Recognition/Project) trải CỘT 1 + 2 → lề trái = Hot News, lề phải = mép phải ô Upcoming Events (số liệu, cột giữa). Side (Quick Announcements/Quote) ở cột rail ngoài cùng, thẳng với Upcoming list + Quick Access. */ .imv-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--imv-mid) var(--imv-rail); gap: var(--imv-gap); align-items: start; } .imv-col-main { grid-column: 1 / 3; } /* phủ cột 1 (Hot News) + cột 2 (Upcoming stats) */ .imv-col-side { grid-column: 3; } /* rail ngoài cùng */ .imv-col-main, .imv-col-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* ---------- Card base: nền trắng, CHỈ ĐỔ BÓNG (không viền) ---------- */ .imv-card { background: var(--imv-card); border-radius: var(--imv-radius); box-shadow: var(--imv-shadow); padding: 18px; } .imv-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .imv-card-head h3, .imv-card-head h2 { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .imv-head-ic { width: 18px; height: 20px; object-fit: contain; } /* Icon trong tiêu đề khối (từ trang "Nội dung giao diện") */ .imv-card-head h3 .imv-ic-img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .imv-card-head h3 .imv-ic-emoji, .imv-side-title .imv-ic-emoji { font-size: 17px; line-height: 1; } .imv-side-title { display: flex; align-items: center; gap: 8px; } .imv-side-title .imv-ic-img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .imv-viewall { font-size: 12.5px; font-weight: 700; color: #0062e7 !important; } .imv-viewall:hover { text-decoration: underline; } .imv-section-title { margin: 0 0 14px; font-size: 17px; font-weight: 800; display:flex; align-items:center; gap:8px; } /* ---------- Welcome: không nền/viền, chỉ text ---------- */ .imv-welcome { margin-bottom: 20px; } .imv-welcome h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; } .imv-welcome h2 .imv-hl { color: var(--imv-blue); } .imv-welcome p { margin: 0; color: var(--imv-muted); font-weight: 600; } .imv-welcome p .imv-hl { color: var(--imv-blue); } /* ---------- Featured Event banner ---------- */ .imv-featured { position: relative; border-radius: var(--imv-radius); overflow: hidden; min-height: 356px; display: flex; /* Nội dung dồn xuống đáy khung. Khung LUÔN 356px; tiêu đề/mô tả dài được clamp số dòng + giảm font (bên dưới) nên body luôn vừa, badge không bị cắt. */ align-items: flex-end; color: #fff; background: linear-gradient(135deg, #0a3a86, #0062e7); } .imv-featured__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .imv-featured::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,26,66,.94) 0%, rgba(6,26,66,.82) 42%, rgba(6,26,66,.25) 100%); } .imv-featured__body { position: relative; z-index: 2; padding: 24px 30px; max-width: 620px; } .imv-badge-featured { display: inline-flex; align-items: center; gap: 6px; background: var(--imv-blue); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .4px; padding: 6px 14px; border-radius: 20px; margin-bottom: 12px; } .imv-badge-featured svg { width: 13px; height: 13px; } /* Tiêu đề: tối đa 2 dòng (dài hơn → "…"), font gọn để KHÔNG làm khung tràn 356px. */ .imv-featured__title { margin: 0 0 6px; font-size: 24px; font-weight: 800; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Mô tả: tối đa 2 dòng. */ .imv-featured__tagline { margin: 0 0 12px; font-size: 14px; color: #cfe0ff; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .imv-featured__meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .imv-featured__meta li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #eaf1ff; } .imv-featured__meta .imv-ic { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .imv-featured__meta .imv-ic svg { width: 14px; height: 14px; } .imv-featured__btn, .imv-featured .imv-featured__btn { display: inline-block; background: #fff !important; color: var(--imv-blue) !important; font-weight: 700; font-size: 14px; padding: 11px 26px; border-radius: 10px; border: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; text-decoration: none; } .imv-featured__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.2); color: var(--imv-blue-dark) !important; background: #fff !important; } /* ---------- Card grids (news / life / recognition-row) ---------- */ .imv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .imv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .imv-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } /* News card — chỉ đổ bóng, không viền */ .imv-post { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; /* Bóng nhẹ: trên gần phẳng, dưới mềm (khớp mockup Figma) */ box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.06); transition: transform .2s ease, box-shadow .2s ease; height: 100%; } .imv-post:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,24,40,.12); } .imv-post__thumb { position: relative; aspect-ratio: 16/9; background: #e9edf3 center/cover no-repeat; } .imv-post__thumb--tall { aspect-ratio: 4/3; } .imv-post__badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 3px 9px; border-radius: 6px; color: #fff; background: var(--imv-red); } .imv-post__badge--event { background: var(--imv-green); } .imv-post__badge--new { background: var(--imv-blue); } .imv-post__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .imv-post__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .imv-post__excerpt { margin: 0; font-size: 12.5px; color: var(--imv-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Lượt xem/thích dồn sang PHẢI (như demo). justify-content:flex-end lo trường hợp Life at IMV (chỉ 1 span ♥) → like sát phải; span đầu margin-right:auto lo Hot News/ Project (3 span) → thời gian sát trái, xem+thích sát phải. */ .imv-post__meta { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 12px; color: var(--imv-muted); } .imv-post__meta span { display: inline-flex; align-items: center; gap: 4px; } .imv-post__meta span:first-child { margin-right: auto; } /* ---------- List card (Recognition / AI / Learning) ---------- */ .imv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .imv-list li { padding: 12px 0; border-bottom: 1px solid var(--imv-line); } .imv-list li:last-child { border-bottom: none; padding-bottom: 0; } .imv-list li:first-child { padding-top: 0; } .imv-list a { display: flex; gap: 12px; align-items: flex-start; } .imv-list__ic { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; background: #eef3ff center/22px no-repeat; display:flex; align-items:center; justify-content:center; font-size:18px; } .imv-list__ic img { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; } .imv-list__ic svg { width: 26px; height: 26px; display: block; } .imv-list__tx strong { display: block; font-size: 13.5px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .imv-list__tx span { font-size: 12px; color: var(--imv-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Hàng 3 ô: Hot News | Upcoming Events (số liệu) | Upcoming Events (danh sách) ---------- */ /* Full-width 3 cột, các ô cao BẰNG NHAU (align-items: stretch mặc định của grid). */ .imv-hotnews-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--imv-mid) var(--imv-rail); gap: var(--imv-gap); align-items: stretch; margin-bottom: 20px; } /* Cột 1: Hot News — head + 2 thẻ, chiếm hết chiều cao để bằng 2 cột kia */ .imv-hotnews-col { display: flex; flex-direction: column; } /* 2 thẻ Hot News: mỗi thẻ ~311px, ảnh cao 160px; giãn để lấp đầy chiều cao cột */ .imv-hotnews-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; flex: 1; } .imv-hotnews-cards .imv-post { height: 100%; } .imv-hotnews-cards .imv-post__thumb { aspect-ratio: auto; height: 160px; flex-shrink: 0; } /* Đưa tiêu đề "Upcoming Events" (trong card có padding) ngang hàng với "Hot News" (nằm ngoài card, không padding): bù đúng phần padding-top của card. */ .imv-hotnews-col .imv-card-head { padding: 16px 2px 0; margin-bottom: 14px; } /* Cột giữa: card Upcoming Events (301x343) — 3 hàng */ .imv-stats-card { padding: 16px; display: flex; flex-direction: column; } .imv-stats-rows { display: flex; flex-direction: column; gap: 10px; flex: 1; } /* Mỗi hàng con */ .imv-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; min-height: 74px; } .imv-stat--event { background: #ffffff; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); } .imv-stat--announce { background: #E5EEFC; } .imv-stat__text strong { display: block; font-size: 28px; font-weight: 800; line-height: 1; color: var(--imv-text); } .imv-stat__text span { font-size: 13px; font-weight: 600; color: var(--imv-muted); } .imv-stat__ic { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; } /* Hàng 3: bài nổi bật */ .imv-stat--spot { display: block; background: #fff; padding: 12px 16px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); transition: transform .15s ease, box-shadow .2s ease; } .imv-stat--spot:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.1); } .imv-stat__spot-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--imv-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .imv-stat__spot-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--imv-muted); } .imv-stat__spot-meta span { display: inline-flex; align-items: center; gap: 4px; } /* ---------- Carousel (Project Highlight) ---------- */ .imv-carousel-wrap { position: relative; background: #F7F8FB; border-radius: var(--imv-radius); padding: 20px 44px; } .imv-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } .imv-carousel::-webkit-scrollbar { display: none; } .imv-carousel > * { flex: 0 0 calc(25% - 12px); min-width: 220px; scroll-snap-align: start; } .imv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: #fff; color: #1f2430; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 2px 10px rgba(16,24,40,.15); transition: background .15s ease, color .15s ease; } .imv-arrow--prev { left: 6px; } .imv-arrow--next { right: 6px; } .imv-arrow:hover { background: var(--imv-blue); color: #fff; } /* ---------- Sidebar: Birthdays ---------- */ /* Birthdays: card có confetti trang trí góc (như demo) */ .imv-card--birthday { position: relative; overflow: hidden; } .imv-card--birthday .imv-card-head { position: relative; z-index: 2; } .imv-card--birthday::before, .imv-card--birthday::after { content: ""; position: absolute; pointer-events: none; z-index: 1; background-repeat: no-repeat; } /* Confetti góc phải-trên */ .imv-card--birthday::before { top: 6px; right: 8px; width: 120px; height: 60px; background-image: radial-gradient(circle, #ffca28 2.5px, transparent 3px), radial-gradient(circle, #e43b3f 2px, transparent 2.5px), radial-gradient(circle, #00b69c 2px, transparent 2.5px), radial-gradient(circle, #4f7cff 2px, transparent 2.5px); background-position: 10px 8px, 40px 2px, 70px 14px, 95px 4px; background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px; opacity: .9; } /* Confetti góc trái */ .imv-card--birthday::after { top: 40px; left: 10px; width: 60px; height: 40px; background-image: radial-gradient(circle, #ffe94d 2px, transparent 2.5px), radial-gradient(circle, #ec4899 2px, transparent 2.5px); background-position: 4px 6px, 26px 18px; background-size: 22px 22px, 22px 22px; opacity: .8; } .imv-avatars { display: flex; flex-wrap: wrap; gap: 10px 8px; position: relative; z-index: 2; justify-content: center; } /* Mỗi người tự chia đều theo SỐ NGƯỜI: 1 người → nằm giữa; 2 → 1/2; 3 → 1/3. flex:1 chia đều phần còn lại; max-width chặn 1 người khỏi giãn quá to. */ .imv-avatars .imv-person { flex: 1 1 0; min-width: 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .imv-person__ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #eef0f4; border: 2px solid #fff; box-shadow: 0 0 0 1px #eaeaea; flex-shrink: 0; } .imv-person__name { font-size: 11.5px; font-weight: 600; color: var(--imv-text); line-height:1.25; max-width: 100%; word-break: break-word; hyphens: auto; } /* New members */ .imv-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .imv-members li { display: flex; align-items: center; gap: 12px; } .imv-members img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #eef0f4; box-shadow: 0 0 0 1px #eaeaea; flex-shrink: 0; } .imv-members strong { display: block; font-size: 13.5px; font-weight: 700; } .imv-members span { font-size: 12px; color: var(--imv-muted); } /* Upcoming events sidebar (nền #F7F8FB, 301px) */ .imv-card--events { background: #F7F8FB; } .imv-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .imv-events li { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid #E8E8E8; } .imv-events li:last-child { border-bottom: none; padding-bottom: 0; } .imv-events li:first-child { padding-top: 0; } .imv-events__ic { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: #eef3ff; } .imv-events__ic img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .imv-events__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .imv-events strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--imv-text); line-height: 1.3; } .imv-events__when { font-size: 12px; color: var(--imv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .imv-events__loc { font-size: 12px; color: var(--imv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Quick announcements */ .imv-announce { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .imv-announce li { padding: 12px 0; border-bottom: 1px solid var(--imv-line); } .imv-announce li:last-child { border-bottom: none; padding-bottom: 0; } .imv-announce li:first-child { padding-top: 0; } .imv-announce__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; } .imv-announce__ic { display: inline-flex; flex-shrink: 0; } .imv-announce__ic svg { width: 18px; height: 18px; display: block; } .imv-announce--important .imv-announce__tag { color: var(--imv-red); } .imv-announce--reminder .imv-announce__tag { color: var(--imv-orange); } /* Announcement: label dạng pill nền xanh nhạt (như thiết kế) */ .imv-announce--announcement .imv-announce__tag { color: var(--imv-blue); background: #E5EEFC; padding: 3px 10px; border-radius: 20px; } .imv-announce__title { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; color: var(--imv-text); } .imv-announce__due { font-size: 12px; color: var(--imv-muted); } /* Quick access grid (icons) */ /* Card Quick Access: nền xám nhạt #F7F8FB, các ô con màu trắng (như demo) */ .imv-card--qa { background: #f7f8fb; display: flex; flex-direction: column; } .imv-quickaccess { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; flex: 1; align-content: stretch; } .imv-qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 12px; background: #fff; text-align: center; border: 1px solid var(--imv-line); transition: transform .15s ease, box-shadow .15s ease; } .imv-qa:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,24,40,.08); } .imv-qa__ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .imv-qa__ic img { width: 32px; height: 32px; object-fit: contain; } .imv-qa__ic svg { width: 28px; height: 28px; } .imv-qa__label { font-size: 11.5px; font-weight: 600; color: var(--imv-text); line-height: 1.25; } /* Survey / Poll */ .imv-poll { background: #F7F8FB; } .imv-poll__q { margin: 0 0 14px; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--imv-text); } .imv-poll__opt { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; font-weight: 600; cursor: pointer; } .imv-poll__opt input { width: 17px; height: 17px; accent-color: var(--imv-blue); flex-shrink: 0; } .imv-poll__actions { display: flex; align-items: center; gap: 18px; margin-top: 14px; } .imv-poll__submit { background: var(--imv-blue); color: #fff; border: none; font-weight: 700; font-size: 13px; padding: 10px 24px; border-radius: 8px; cursor: pointer; transition: background .15s ease; } .imv-poll__submit:hover { background: var(--imv-blue-dark); } .imv-poll__submit:disabled { opacity: .6; cursor: default; } .imv-poll__viewresults, .imv-poll__revote { font-size: 12.5px; font-weight: 700; color: var(--imv-blue); cursor: pointer; } .imv-poll__viewresults:hover, .imv-poll__revote:hover { text-decoration: underline; } /* Kết quả */ .imv-poll__results { display: flex; flex-direction: column; gap: 12px; } .imv-poll__bar-row { display: flex; flex-direction: column; gap: 5px; } .imv-poll__bar-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--imv-text); } .imv-poll__bar-top b { color: var(--imv-blue); font-weight: 800; } .imv-poll__bar { height: 8px; border-radius: 5px; background: #eef1f6; overflow: hidden; } .imv-poll__bar span { display: block; height: 100%; border-radius: 5px; background: var(--imv-blue); transition: width .4s ease; } .imv-poll__total { font-size: 12px; color: var(--imv-muted); margin-top: 2px; } .imv-poll__revote { align-self: flex-start; margin-top: 2px; } /* Quote / Slogan */ .imv-quote { position: relative; background: #eef4ff; border-radius: var(--imv-radius); padding: 26px 28px; min-height: 190px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .imv-quote__mark { width: 28px; margin-bottom: 14px; } .imv-quote p { margin: 0; font-size: 18px; font-weight: 700; color: var(--imv-blue); line-height: 1.5; } .imv-quote__author { margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--imv-navy); } .imv-quote__logo { position: absolute; right: 24px; bottom: 22px; width: 52px; height: auto; } /* ---------- Single post (chi tiết bài viết) ---------- */ /* Breadcrumb riêng trên đầu trang chi tiết */ .imv-crumb--single { padding: 18px 0 6px; flex-wrap: wrap; } .imv-crumb--single b { color: var(--imv-text); font-weight: 700; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tác giả trên dòng meta */ .imv-single__author { display: inline-flex; align-items: center; gap: 7px; } .imv-single__ava { width: 26px; height: 26px; border-radius: 50%; } .imv-single__author b { color: var(--imv-text); font-weight: 700; } .imv-single__head .imv-nw__badge { margin-bottom: 12px; } /* Thanh Like + Share */ .imv-single__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .imv-share { display: flex; align-items: center; gap: 8px; } .imv-share__label { font-size: 13px; font-weight: 700; color: var(--imv-muted); margin-right: 2px; } .imv-share__btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--imv-line); background: #fff; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .imv-share__btn:hover { transform: translateY(-2px); color: #fff; } .imv-share__btn--fb:hover { background: #1877f2; border-color: #1877f2; } .imv-share__btn--li:hover { background: #0a66c2; border-color: #0a66c2; } .imv-share__btn--mail:hover { background: #64748b; border-color: #64748b; } .imv-share__btn--copy:hover { background: var(--imv-blue); border-color: var(--imv-blue); } .imv-share__btn.is-copied { background: #12805c; border-color: #12805c; color: #fff; } /* Tin liên quan */ .imv-related { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--imv-line); } .imv-related .imv-nw__title { font-size: 14.5px; } /* Mục lục (sidebar) */ .imv-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .imv-toc li a { display: block; padding: 7px 0 7px 12px; font-size: 13px; font-weight: 600; color: var(--imv-text); border-left: 2px solid #e3e8ef; line-height: 1.45; } .imv-toc li a:hover { color: var(--imv-blue); border-left-color: var(--imv-blue); } .imv-toc li.imv-toc__lv3 a { padding-left: 26px; font-size: 12.5px; font-weight: 500; color: var(--imv-muted); } .imv-single { padding: 8px 0 40px; } .imv-single__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .imv-single__cats a { font-size: 12px; font-weight: 700; color: var(--imv-blue); background: #E5EEFC; padding: 4px 12px; border-radius: 20px; } .imv-single__title { margin: 0 0 12px; font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--imv-text); } .imv-single__meta { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--imv-muted); margin-bottom: 22px; } .imv-single__thumb { border-radius: var(--imv-radius); overflow: hidden; margin-bottom: 24px; } .imv-single__thumb img { width: 100%; height: auto; display: block; } .imv-single__content { font-size: 16px; line-height: 1.75; color: #2b3240; } .imv-single__content p { margin: 0 0 18px; } .imv-single__content img { max-width: 100%; height: auto; border-radius: 10px; } .imv-single__content h2, .imv-single__content h3 { margin: 28px 0 12px; font-weight: 800; color: var(--imv-text); } .imv-single__actions { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--imv-line); } /* Nút thích */ .imv-like { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--imv-line); border-radius: 24px; padding: 9px 20px; font-size: 14px; font-weight: 700; color: var(--imv-text); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .imv-like:hover { border-color: var(--imv-red); color: var(--imv-red); } .imv-like__ic { fill: none; stroke: currentColor; stroke-width: 2; transition: fill .15s ease, stroke .15s ease; } .imv-like__count { color: var(--imv-muted); font-weight: 700; } .imv-like.is-liked { border-color: var(--imv-red); color: var(--imv-red); background: #fff1f3; } .imv-like.is-liked .imv-like__ic { fill: var(--imv-red); stroke: var(--imv-red); } .imv-like.is-liked .imv-like__count { color: var(--imv-red); } .imv-like:disabled { opacity: .6; cursor: default; } /* Empty state */ .imv-empty { color: var(--imv-muted); font-size: 13px; padding: 20px 0; text-align: center; } .imv-empty-card { padding: 30px 20px; text-align: center; color: var(--imv-muted); font-size: 13px; } /* Footer */ .imv-footer { background: var(--imv-blue); color: #fff; text-align: center; padding: 18px 16px; margin-top: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; } .imv-footer * { font-family: inherit !important; } .imv-footer b { font-weight: 500; font-size: 13.5px; letter-spacing: .2px; } /* ============================================================ HEADER (thanh phẳng full-width, nền trắng, 3 cột — theo demo WEB3) ============================================================ */ .imv-header { width: 100%; background: #fff; border-bottom: 1px solid var(--imv-line); position: sticky; top: 0; z-index: 100; /* Dùng CÙNG font với toàn site (Inter), không để theme cha/serif ghi đè */ font-family: Inter, "Helvetica Neue", Arial, sans-serif; } /* Ép mọi phần tử CON của header dùng đúng font header (thắng serif của theme cha) */ .imv-header * { font-family: inherit !important; } /* Bỏ gạch chân mặc định của link trong header */ .imv-header a { text-decoration: none; } body.admin-bar .imv-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .imv-header { top: 46px; } } .imv-header__inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; min-height: 81px; /* chiều cao header theo Figma: 81.15px */ display: flex; align-items: center; gap: 24px; box-sizing: border-box; } .imv-header__logo { flex-shrink: 0; display: flex; align-items: center; } .imv-header__logo img { height: 34px; width: auto; max-height: 34px; object-fit: contain; } .imv-header__logo-text { font-size: 20px; font-weight: 800; color: var(--imv-blue-dark); } /* Cột giữa: menu, tự căn giữa nhờ margin auto 2 bên */ .imv-header__nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } .imv-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .imv-header__menu::-webkit-scrollbar { display: none; } .imv-header__menu li { flex-shrink: 0; display: flex; } .imv-header__menu a { position: relative; display: flex; align-items: center; height: 81px; padding: 0 16px; font-size: 14px; font-weight: 700; color: #1f2430; white-space: nowrap; transition: color .2s ease; } /* Gạch chân trượt từ giữa ra khi hover */ .imv-header__menu a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; background: var(--imv-blue); border-radius: 3px 3px 0 0; transition: left .22s ease, right .22s ease; } .imv-header__menu a:hover { color: var(--imv-blue); } .imv-header__menu a:hover::after { left: 12px; right: 12px; } /* Mục đang mở: gạch chân đầy + màu xanh */ .imv-header__menu .current-menu-item a, .imv-header__menu .current_page_item a, .imv-header__menu .current-menu-parent a { color: var(--imv-blue); } .imv-header__menu .current-menu-item a::after, .imv-header__menu .current_page_item a::after, .imv-header__menu .current-menu-parent a::after { left: 12px; right: 12px; } .imv-header__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .imv-header__search { display: flex; align-items: center; background: #f1f5f9; border-radius: 20px; height: 36px; padding: 0 6px 0 14px; gap: 6px; } .imv-header__search input { border: none; background: transparent; outline: none; font-size: 13px; width: 130px; color: #0f172a; } .imv-header__search button { border: none; background: transparent; cursor: pointer; color: #64748b; display: flex; align-items: center; padding: 6px; } .imv-header__bell { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; } .imv-header__bell:hover { background: #e2e8f0; } .imv-header__bell-badge { position: absolute; top: -2px; right: -2px; background: var(--imv-red); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .imv-header__lang { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: #f8fafc; font-size: 12px; font-weight: 700; color: #64748b; } .imv-header__lang img { width: 16px; height: 16px; border-radius: 3px; } /* Nút chuyển ngôn ngữ VI | EN (toggle pill) */ .imv-lang { display: inline-flex; align-items: center; background: #f1f5f9; border-radius: 20px; padding: 3px; gap: 2px; } .imv-lang__btn { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 10px; border-radius: 16px; font-size: 12.5px; font-weight: 700; color: #64748b; transition: background .18s ease, color .18s ease; } .imv-lang__btn:hover { color: var(--imv-blue); } .imv-lang__btn.is-active { background: var(--imv-blue); color: #fff; box-shadow: 0 1px 3px rgba(0,98,231,.3); } .imv-lang__btn.is-active:hover { color: #fff; } .imv-header__user { display: flex; align-items: center; gap: 8px; cursor: pointer; } .imv-header__user-ava { position: relative; } .imv-header__user-ava img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .imv-header__user-status { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--imv-green); border: 1.5px solid #fff; } .imv-header__user-name { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; } /* Mobile bottom nav (hidden desktop) */ .imv-mobile-nav { display: none; } /* ============================================================ TRANG LANDING (Life at IMV …) ============================================================ */ .imv-page { background: #fff; } /* Page head: icon + tiêu đề + breadcrumb */ .imv-pagehead { background: #f7f9fc; border-bottom: 1px solid var(--imv-line); } .imv-pagehead__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px !important; padding-bottom: 22px !important; } .imv-pagehead__left { display: flex; align-items: center; gap: 16px; } /* Icon page-head là ảnh đã có sẵn vòng tròn → không cần nền */ .imv-pagehead__ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .imv-pagehead__title { margin: 0 0 4px; font-size: 26px; font-weight: 800; color: var(--imv-text); } .imv-pagehead__sub { margin: 0; font-size: 14px; color: var(--imv-muted); } .imv-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--imv-muted); white-space: nowrap; } .imv-crumb a { color: var(--imv-muted); } .imv-crumb a:hover { color: var(--imv-blue); } .imv-crumb b { color: var(--imv-blue); font-weight: 700; } /* Thanh tab + tìm kiếm */ .imv-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 22px; } /* Cụm tab CO LẠI được (min-width:0) + cuộn ngang khi thiếu chỗ, thay vì đẩy ô tìm kiếm xuống dòng riêng. Tiếng Việt dài hơn tiếng Anh nên dễ tràn — giữ tất cả trên 1 hàng. */ .imv-tabbar__tabs { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .imv-tabbar__tabs::-webkit-scrollbar { display: none; } .imv-tab { flex-shrink: 0; white-space: nowrap; padding: 9px 18px; border-radius: 22px; font-size: 13.5px; font-weight: 700; color: var(--imv-text); transition: background .15s ease, color .15s ease; } .imv-tab:hover { background: #eef2f8; color: var(--imv-blue); } .imv-tab.is-active { background: var(--imv-blue); color: #fff; } /* Tab điều hướng One-page: con trỏ tay + section chừa khoảng cho header sticky khi cuộn tới (fallback cho khi mở trực tiếp bằng #hash; click tab thì JS tự bù offset). */ .imv-tabbar--anchor .imv-tab { cursor: pointer; } #rec-overview, #rec-awards, #rec-fame, #rec-shouts, #rec-milestones, #rec-certificates, #rec-leader { scroll-margin-top: 96px; } .imv-tabbar__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .imv-tabsearch { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--imv-line); border-radius: 10px; padding: 0 12px; height: 40px; min-width: 240px; } /* Màn hình hẹp: cho tabbar xuống dòng (tab hàng trên, tìm kiếm hàng dưới) — hợp lý trên mobile. */ @media (max-width: 820px) { .imv-tabbar { flex-wrap: wrap; } .imv-tabbar__tabs { flex-basis: 100%; } .imv-tabbar__right { width: 100%; } .imv-tabsearch { flex: 1; min-width: 0; } } .imv-tabsearch input { border: none; outline: none; background: transparent; font-size: 13.5px; width: 100%; } /* Dropdown SẮP XẾP (imv_sort_dropdown). Nút khớp style pill cũ, menu bung xuống. */ .imv-sortbox { position: relative; display: inline-block; } .imv-sortbox__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--imv-line); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--imv-text); cursor: pointer; background: #fff; font-family: inherit; white-space: nowrap; } .imv-sortbox__btn:hover { border-color: #cdd4de; } .imv-sortbox__btn svg { transition: transform .15s ease; flex-shrink: 0; } .imv-sortbox.is-open .imv-sortbox__btn { border-color: var(--imv-blue); } .imv-sortbox.is-open .imv-sortbox__btn svg { transform: rotate(180deg); } .imv-sortbox__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--imv-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,28,45,.12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; } .imv-sortbox.is-open .imv-sortbox__menu { opacity: 1; visibility: visible; transform: translateY(0); } .imv-sortbox__menu li { margin: 0; } .imv-sortbox__opt { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; font-size: 13.5px; font-weight: 600; color: var(--imv-text); cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap; } .imv-sortbox__opt:hover { background: #eef2f8; color: var(--imv-blue); } .imv-sortbox__opt.is-active { background: var(--imv-blue); color: #fff; } /* Trang 404 */ .imv-404 { max-width: 620px; margin: 0 auto; padding: 64px 20px 80px; text-align: center; } .imv-404__code { display: block; font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -2px; color: var(--imv-blue); opacity: .16; } .imv-404__title { margin: 8px 0 12px; font-size: 30px; font-weight: 800; color: var(--imv-text); } .imv-404__desc { margin: 0 auto 28px; max-width: 460px; font-size: 15px; line-height: 1.6; color: var(--imv-muted); } .imv-404__search { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 0 auto 20px; padding: 6px 6px 6px 16px; border: 1px solid var(--imv-line); border-radius: 12px; background: #fff; } .imv-404__search svg { flex-shrink: 0; } .imv-404__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14.5px; color: var(--imv-text); } .imv-404__search button { flex-shrink: 0; height: 40px; padding: 0 20px; border: 0; border-radius: 9px; background: var(--imv-blue); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .imv-404__search button:hover { filter: brightness(.95); } .imv-404__btn { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border-radius: 10px; background: var(--imv-text); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; } .imv-404__btn:hover { filter: brightness(1.15); } .imv-404__count { margin: 22px 0 0; font-size: 13.5px; color: var(--imv-muted); } .imv-404__num { display: inline-block; min-width: 1.4em; padding: 0 .3em; border-radius: 6px; background: #eef2f8; color: var(--imv-blue); font-weight: 800; } /* Popup Share Knowledge */ .imv-modal { position: fixed; inset: 0; z-index: 99999; display: none !important; align-items: center; justify-content: center; padding: 20px; opacity: 1; visibility: visible; } /* Hỗ trợ cả .is-open (modal mới) lẫn .is-active (modal cũ) — thắng mọi rule display khác. */ .imv-modal.is-open, .imv-modal.is-active { display: flex !important; } .imv-modal__overlay { position: absolute; inset: 0; background: rgba(20,28,45,.55); backdrop-filter: blur(2px); } .imv-modal__box { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(20,28,45,.3); animation: imv-modal-in .18s ease; } @keyframes imv-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .imv-modal__x { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--imv-muted); cursor: pointer; } .imv-modal__x:hover { color: var(--imv-text); } .imv-modal__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--imv-text); padding-right: 24px; } .imv-modal__sub { margin: 0 0 20px; font-size: 13.5px; color: var(--imv-muted); } .imv-knform__label { display: block; margin-bottom: 16px; font-size: 13.5px; font-weight: 700; color: var(--imv-text); } .imv-knform__label span { color: #eb1f3c; } .imv-knform__label input[type="text"], .imv-knform__label textarea, .imv-knform__label select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--imv-line); border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--imv-text); background: #fff; box-sizing: border-box; } .imv-knform__label input[type="file"] { display: block; width: 100%; margin-top: 6px; font-size: 13px; font-weight: 500; } .imv-knform__label textarea { resize: vertical; } .imv-knform__label input:focus, .imv-knform__label textarea:focus, .imv-knform__label select:focus { outline: 0; border-color: var(--imv-blue); } .imv-knform__hint { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--imv-muted); } .imv-knform__msg { margin: 4px 0 12px; font-size: 13px; font-weight: 600; min-height: 1px; } .imv-knform__msg.is-err { color: #eb1f3c; } .imv-knform__msg.is-ok { color: #22a06b; } .imv-knform__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .imv-knform__cancel { height: 42px; padding: 0 20px; border: 1px solid var(--imv-line); border-radius: 9px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--imv-text); cursor: pointer; } .imv-knform__cancel:hover { background: #f3f5f9; } .imv-knform__submit { height: 42px; padding: 0 24px; border: 0; border-radius: 9px; background: var(--imv-blue); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .imv-knform__submit:hover { filter: brightness(.95); } .imv-knform__submit:disabled { opacity: .6; cursor: default; } /* Danh sách sinh nhật cả tháng trong popup */ /* ===== Popup Sinh nhật trong tháng (festive) ===== */ /* Ép font Inter cho toàn popup để đồng bộ với site (thắng serif của theme cha). */ .imv-modal, .imv-modal * { font-family: Inter, "Helvetica Neue", Arial, sans-serif !important; } .imv-bdaymodal__box { position: relative; width: 100%; max-width: 860px; max-height: 88vh; overflow: hidden; background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(20,28,45,.35); display: flex; flex-direction: column; animation: imv-modal-in .2s ease; } .imv-bdaymodal__x { position: absolute; top: 12px; right: 14px; z-index: 3; color: #fff; } .imv-bdaymodal__x:hover { color: #fff; opacity: .8; } /* Banner gradient + trang trí */ .imv-bdaymodal__banner { position: relative; overflow: hidden; padding: 22px 26px; display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, #0062e7 0%, #3b8bff 55%, #7c3aed 100%); color: #fff; } .imv-bdaymodal__logo { flex-shrink: 0; background: #fff; border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; max-width: 150px; } .imv-bdaymodal__logo img { max-height: 34px; width: auto; display: block; } .imv-bdaymodal__headtext { position: relative; z-index: 2; } .imv-bdaymodal__headtext h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: #fff; line-height: 1.3; } .imv-bdaymodal__headtext p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.9); } .imv-bdaymodal__deco { position: absolute; font-size: 22px; opacity: .85; pointer-events: none; z-index: 1; animation: imv-bday-float 3s ease-in-out infinite; } .imv-bdaymodal__deco--1 { top: 6px; right: 130px; font-size: 26px; animation-delay: 0s; } .imv-bdaymodal__deco--2 { top: 40px; right: 24px; font-size: 24px; animation-delay: .4s; } .imv-bdaymodal__deco--3 { top: 4px; right: 60px; font-size: 30px; animation-delay: .8s; } .imv-bdaymodal__deco--4 { bottom: 6px; right: 100px; font-size: 20px; animation-delay: 1.2s; } .imv-bdaymodal__deco--5 { bottom: 8px; right: 20px; font-size: 22px; animation-delay: 1.6s; } @keyframes imv-bday-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } } .imv-bdaymodal__body { padding: 18px 22px 22px; overflow-y: auto; background: #f0f8ff; } .imv-bdaylist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 620px) { .imv-bdaylist { grid-template-columns: 1fr; } } /* Mỗi dòng: SỐ NGÀY lớn (trái) · avatar · tên (đậm) + chức danh (dưới). Nền pastel, tên hiện ĐỦ. */ .imv-bdaylist__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e4eefb; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(20,28,45,.05); } .imv-bdaylist__daynum { flex-shrink: 0; width: 40px; text-align: center; font-size: 26px; font-weight: 800; color: var(--imv-blue); line-height: 1; font-variant-numeric: tabular-nums; } .imv-bdaylist__ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #eef0f4; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px #e7e9ef; } .imv-bdaylist__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .imv-bdaylist__name { font-size: 14px; font-weight: 700; color: var(--imv-text); line-height: 1.3; word-break: break-word; } .imv-bdaylist__role { font-size: 12px; color: var(--imv-muted); line-height: 1.3; } /* Bố cục 2 cột: nội dung + sidebar */ .imv-life-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--imv-rail); gap: var(--imv-gap); align-items: start; padding-bottom: 28px; } .imv-life-main { display: flex; flex-direction: column; gap: 34px; min-width: 0; align-self: stretch; } .imv-life-main > .imv-cta { margin-top: auto; } /* Bỏ padding-bottom 60px của .imv-container trên TRANG CON (Life/Events/News) — nó cộng với padding layout tạo khoảng trống ~84px giữa CTA và footer. Trang chủ giữ nguyên. */ .imv-page .imv-container { padding-bottom: 0 !important; } .imv-life-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .imv-sec { min-width: 0; } /* Hero */ /* Hero Life at IMV — khung tỉ lệ 997×405 (theo thiết kế), ảnh nằm nửa PHẢI, nửa trái phủ xanh đặc để chữ nổi rõ. */ .imv-hero { position: relative; border-radius: var(--imv-radius); overflow: hidden; aspect-ratio: 997 / 405; min-height: 300px; display: flex; align-items: center; background: linear-gradient(135deg, #0a2c6b, #123f8f); } /* Ảnh phủ toàn khung; lớp gradient bên trên mới quyết định chỗ nào lộ ảnh. Số đo lấy từ demo (Lite.pdf): xanh ĐẶC tới ~53% bề ngang, chuyển tiếp 53%→78%, từ 78% trở đi là ảnh rõ. */ /* Lấy nét về BÊN PHẢI ảnh: vùng người/tay nằm lệch phải, canh `right center` để phần hiện ra (nửa phải khung) đúng chủ thể như demo. */ .imv-hero__bg { position: absolute; inset: 0; background: right center/cover no-repeat; z-index: 0; } .imv-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #012269 0%, #012269 53%, rgba(1,34,105,.82) 62%, rgba(1,34,105,.45) 70%, rgba(1,34,105,.12) 78%, rgba(1,34,105,0) 88%); } .imv-hero__body { position: relative; z-index: 2; padding: 40px 44px; max-width: 54%; color: #fff; } .imv-hero__title { margin: 0 0 16px; font-size: 34px; font-weight: 800; line-height: 1.2; } .imv-hero__desc { margin: 0 0 24px; font-size: 15px; font-weight: 600; line-height: 1.6; color: #dbe6ff; } .imv-hero__btn { display: inline-flex; align-items: center; gap: 10px; background: #fff !important; color: #0062e7 !important; font-weight: 700; font-size: 14px; padding: 12px 26px; border-radius: 10px; transition: transform .15s ease, box-shadow .2s ease; } .imv-hero__btn-arrow { font-size: 19px; line-height: 1; } .imv-hero__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); color: #0255af !important; background: #fff !important; } /* Our Values */ .imv-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } /* Our Values — ô có VIỀN #EDEFF3, KHÔNG đổ bóng (đồng bộ với People Stories). */ .imv-value { background: #fff; border: 1px solid #EDEFF3; border-radius: 14px; padding: 20px 16px; text-align: center; box-shadow: none; transition: transform .15s ease, border-color .2s ease; } .imv-value:hover { transform: translateY(-3px); border-color: #dfe3ea; } /* Vùng icon cao cố định → 5 thẻ Values thẳng hàng dù icon khác tỉ lệ */ .imv-value__ic { display: flex; align-items: center; justify-content: center; height: 34px; margin-bottom: 12px; } /* Icon ảnh thật (export Figma) — giữ tỉ lệ, không bị méo */ .imv-ic-img { object-fit: contain; display: block; max-height: 100%; width: auto; height: auto; } .imv-art-img { object-fit: contain; display: block; height: auto; } .imv-numbers__ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; } .imv-value strong { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 7px; color: var(--imv-text); } .imv-value p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--imv-muted); } /* People Stories — 4 ô CANH LỀ TRÁI: ô giữ kích thước cố định (~248px), dồn về trái (justify-start), KHÔNG giãn full container (như demo). auto-fill để khi ô ít vẫn canh trái. */ .imv-stories-grid { display: grid; grid-template-columns: repeat(4, 232px); gap: 20px; justify-content: start; } @media (max-width: 1180px) { .imv-stories-grid { grid-template-columns: repeat(3, minmax(0, 232px)); } } @media (max-width: 900px) { .imv-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .imv-stories-grid { grid-template-columns: 1fr; } } /* People Stories — ô có VIỀN #EDEFF3, KHÔNG đổ bóng (như demo hình 3). */ .imv-story { position: relative; background: #fff; border: 1px solid #EDEFF3; border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; height: 100%; box-shadow: none; } /* Phần đầu (icon + quote) flex ngang; icon 34px + gap 10px = quote text thụt 44px. */ .imv-story__head { display: flex; align-items: flex-start; gap: 10px; } .imv-story__mark, .imv-story__ava { flex-shrink: 0; line-height: 0; display: block; width: 34px; } .imv-story__mark img { width: 26px; height: auto; } .imv-story__ava img { width: 34px; height: 34px; border-radius: 50%; } .imv-story__quote { margin: 0; font-size: 13px; line-height: 1.62; color: #6b7280; } /* Tên + chức danh + tag THẲNG HÀNG với quote text (thụt 44px = icon 34 + gap 10). */ .imv-story__person, .imv-story__tag { margin-left: 44px; } .imv-story__person strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--imv-text); margin-bottom: 2px; } .imv-story__person span { font-size: 12.5px; color: var(--imv-muted); } .imv-story__tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; padding: 5px 13px; border-radius: 20px; } .imv-story__tag--blue { background: #e5eefc; color: #0062e7; } .imv-story__tag--green { background: #e3f6ed; color: #22a06b; } .imv-story__tag--purple { background: #ede9fe; color: #7c3aed; } .imv-story__tag--pink { background: #fde8ef; color: #eb1f3c; } /* Gallery */ .imv-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .imv-gallery__item { display: block; height: 170px; border-radius: 12px; background: #e9edf3 center/cover no-repeat; transition: transform .2s ease, box-shadow .2s ease; } .imv-gallery__item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16,24,40,.14); } .imv-gallery__item--wide { grid-column: span 2; } /* CTA cuối */ .imv-cta { position: relative; display: flex; align-items: center; gap: 20px; background: #eef4ff; border-radius: var(--imv-radius); padding: 24px 28px; overflow: hidden; } .imv-cta__text { flex: 1; } .imv-cta__text strong { display: block; font-size: 18px; font-weight: 800; color: var(--imv-text); margin-bottom: 5px; } .imv-cta__text span { font-size: 13.5px; color: var(--imv-muted); } .imv-cta__btn { background: #0062e7 !important; color: #fff !important; font-weight: 700; font-size: 13.5px; padding: 11px 22px; border-radius: 9px; white-space: nowrap; } .imv-cta__btn:hover { background: #0255af !important; color: #fff !important; } .imv-cta__ic { display: flex; align-items: center; flex-shrink: 0; line-height: 0; } .imv-cta__ic svg { display: block; } /* ---- Sidebar cards ---- */ .imv-side-card { background: #f7f9fc; } .imv-side-title { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--imv-text); } .imv-qlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .imv-qlinks a { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 700; color: var(--imv-text); } .imv-qlinks a:hover { color: var(--imv-blue); } .imv-qlinks__dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; } .imv-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; } .imv-numbers li { display: flex; align-items: center; gap: 20px; } .imv-numbers li > .imv-numbers__ic { flex-shrink: 0; } .imv-numbers strong { display: block; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--imv-text); margin-bottom: 3px; } .imv-numbers span { font-size: 13px; color: var(--imv-muted); } .imv-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .imv-acts li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #e8ecf2; } .imv-acts li:last-child { border-bottom: none; padding-bottom: 0; } .imv-acts li:first-child { padding-top: 0; } .imv-acts__date { width: 46px; flex-shrink: 0; background: #fff; border-radius: 10px; padding: 7px 0; text-align: center; box-shadow: 0 1px 4px rgba(16,24,40,.07); } .imv-acts__date i { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--imv-blue); letter-spacing: .4px; } .imv-acts__date b { display: block; font-size: 17px; font-weight: 800; color: var(--imv-text); line-height: 1.2; } .imv-acts__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .imv-acts__title { font-size: 13.5px; font-weight: 800; color: var(--imv-text); } .imv-acts__title:hover { color: var(--imv-blue); } .imv-acts__row { font-size: 12px; color: var(--imv-muted); } .imv-say__mark { display: block; line-height: 0; margin-bottom: 14px; } /* Dấu móc (quote icon) nhỏ gọn — icon gốc là img ~54px nên phải ép kích thước. */ .imv-say__mark svg, .imv-say__mark img { display: block; width: 30px; height: auto; } .imv-say__quote { margin: 0 0 22px; font-size: 14.5px; line-height: 1.62; color: #6b7280; } /* Person: avatar bên TRÁI + tên/chức danh bên phải (như demo hình 5). */ .imv-say__person { display: flex; align-items: center; gap: 12px; } .imv-say__ava { flex-shrink: 0; line-height: 0; display: block; } .imv-say__ava img, .imv-say__ava svg { width: 44px; height: 44px; border-radius: 50%; display: block; } .imv-say__who { min-width: 0; } .imv-say__person strong { display: block; font-size: 14px; font-weight: 700; color: var(--imv-text); margin-bottom: 2px; } .imv-say__person span { font-size: 12.5px; font-weight: 600; color: var(--imv-muted); } .imv-say__dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; } .imv-say__dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9dee7; } .imv-say__dots i.is-active { width: 22px; border-radius: 5px; background: var(--imv-blue); } .imv-join__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .imv-join__head strong { font-size: 16px; font-weight: 800; color: var(--imv-text); } /* máy bay giấy + vệt cong NỐI LIỀN vào đuôi máy bay (như demo) */ .imv-join__ic { display: flex; align-items: flex-end; line-height: 0; flex-shrink: 0; margin-top: -2px; } .imv-join__ic img { display: block; } /* Icon nhỏ gọn như demo: vệt cong (đuôi) NỐI LIỀN vào đuôi máy bay — đáy 2 icon bằng nhau (margin-bottom:0) + chồng ngang 14px cho liền mạch. */ .imv-join__ic img:first-child { width: 32px; height: auto; margin-bottom: 0; margin-right: -14px; position: relative; z-index: 0; } .imv-join__ic img:last-child { width: 34px; height: auto; position: relative; z-index: 1; } .imv-join p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--imv-muted); } .imv-join__btn { display: inline-block; border: 1.5px solid #0062e7; color: #0062e7 !important; font-weight: 700; font-size: 13px; padding: 9px 20px; border-radius: 9px; transition: background .15s ease, color .15s ease; } .imv-join__btn:hover { background: #0062e7; color: #fff !important; } /* ============================================================ TRANG EVENTS ============================================================ */ /* Hero sự kiện nổi bật */ .imv-evhero { position: relative; border-radius: var(--imv-radius); overflow: hidden; min-height: 363px; display: flex; align-items: center; background: linear-gradient(135deg, #0a2c6b, #123f8f); } .imv-evhero__bg { position: absolute; inset: 0; background: center/cover no-repeat; z-index: 0; } .imv-evhero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0a2c6b 0%, rgba(10,44,107,.9) 45%, rgba(10,44,107,.2) 100%); } .imv-evhero__body { position: relative; z-index: 2; padding: 34px 38px; max-width: 560px; color: #fff; } .imv-evhero__title { margin: 14px 0 8px; font-size: 30px; font-weight: 800; line-height: 1.18; text-transform: uppercase; } .imv-evhero__sub { margin: 0 0 18px; font-size: 14.5px; color: #cfe0ff; } .imv-evhero__meta { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .imv-evhero__meta li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #eaf1ff; } .imv-evhero__meta img { filter: brightness(0) invert(1); } .imv-evhero__btn { display: inline-block; background: #fff !important; color: #0062e7 !important; font-weight: 700; font-size: 13.5px; padding: 11px 26px; border-radius: 9px; } .imv-evhero__btn:hover { color: #0255af !important; } /* Danh sách sự kiện */ /* Danh sách sự kiện: các tin liền nhau, ngăn bằng LINE MỜ NHẸ (không đổ bóng) — như demo. */ .imv-evlist { display: flex; flex-direction: column; } .imv-ev { display: grid; grid-template-columns: 150px 78px minmax(0,1fr) auto; gap: 16px; align-items: center; background: transparent; border: none; border-bottom: 1px solid #edf0f4; border-radius: 0; padding: 18px 4px; transition: background .15s ease; } .imv-ev:last-child { border-bottom: none; } .imv-ev:hover { background: #fafbfd; } .imv-ev__thumb { width: 150px; height: 104px; border-radius: 10px; background: #e9edf3 center/cover no-repeat; } /* Khối ngày: thẻ có VIỀN #EDEFF3, bo góc, nền trắng (như demo). */ .imv-ev__date { text-align: center; border: 1px solid #EDEFF3; border-radius: 10px; padding: 10px 6px; background: #fff; } .imv-ev__date i { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--imv-red); letter-spacing: .4px; } .imv-ev__date b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--imv-text); } .imv-ev__date s { display: block; text-decoration: none; font-size: 11.5px; color: var(--imv-muted); } .imv-ev__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .imv-ev__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .imv-ev__title { font-size: 15px; font-weight: 800; color: var(--imv-text); } .imv-ev__title:hover { color: var(--imv-blue); } .imv-ev__badge { font-size: 11px; font-weight: 700; color: var(--imv-blue); background: #E5EEFC; padding: 3px 11px; border-radius: 20px; } .imv-ev__meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--imv-muted); } .imv-ev__desc { margin: 0; font-size: 12.5px; color: var(--imv-muted); } .imv-ev__going { font-size: 12px; color: var(--imv-muted); font-weight: 600; } /* Nút Register: outline (viền xanh, chữ xanh, nền trắng) như demo; hover mới đổ nền xanh. */ .imv-regbtn { background: #fff; color: var(--imv-blue); border: 1.5px solid var(--imv-blue); font-weight: 700; font-size: 13px; padding: 9px 22px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; } .imv-regbtn:hover { background: var(--imv-blue); color: #fff; } .imv-regbtn.is-on { background: #e3f6ed; color: #12805c; border-color: #b7e6cf; } .imv-regbtn:disabled { opacity: .6; cursor: default; } /* Lịch tháng */ .imv-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .imv-cal__head b { font-size: 14.5px; font-weight: 800; } .imv-cal__nav { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(16,24,40,.12); font-size: 16px; line-height: 1; color: var(--imv-muted); transition: background .15s ease, color .15s ease; } .imv-cal__nav:hover { background: var(--imv-blue); color: #fff; } .imv-cal.is-loading { opacity: .55; pointer-events: none; } .imv-cal { transition: opacity .15s ease; } .imv-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; text-align: center; } .imv-cal__dow span { font-size: 11px; font-weight: 700; color: var(--imv-muted); padding-bottom: 6px; } .imv-cal__d { position: relative; font-size: 13px; font-weight: 600; color: var(--imv-text); padding: 9px 0; border-radius: 50%; } .imv-cal__d.is-we { color: var(--imv-red); } .imv-cal__d.is-today { background: var(--imv-blue); color: #fff; font-weight: 800; } .imv-cal__d.has-ev::after { content: ""; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--imv-blue); } .imv-cal__d.is-today.has-ev::after { background: #fff; } .imv-cal__legend { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--imv-muted); } .imv-cal__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } .imv-cal__legend .dot-ev { background: #9AA4B2; } .imv-cal__legend .dot-today { background: var(--imv-blue); } /* số đếm trong Event Categories */ .imv-qlinks__n { margin-left: auto; font-size: 12px; color: var(--imv-muted); font-weight: 700; } .imv-qlinks a { width: 100%; } /* My Events — trạng thái */ .imv-myev__st { font-size: 11.5px; font-weight: 700; } .imv-myev__st--registered { color: #12805c; } .imv-myev__st--pending { color: #ed740d; } /* Form subscribe */ .imv-sub { display: flex; gap: 8px; } .imv-sub input { flex: 1; min-width: 0; border: 1px solid var(--imv-line); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; outline: none; background: #fff; } .imv-sub button { background: var(--imv-blue); color: #fff; border: none; font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .imv-sub button:hover { background: var(--imv-blue-dark); } @media (max-width: 900px) { .imv-ev { grid-template-columns: 1fr; } .imv-ev__thumb { width: 100%; height: 150px; } .imv-ev__date { display: flex; gap: 8px; align-items: baseline; text-align: left; } } /* ============================================================ TRANG NEWS — 4 kiểu hiển thị (list / grid / magazine / compact) ============================================================ */ .imv-pagehead__ic--news { width: 48px; height: 48px; } .imv-pagehead__ic--news svg { display: block; } /* Thẻ bài dùng chung — không viền, chỉ bóng nhẹ (trên phẳng, dưới mềm) như mockup */ .imv-nw { background: #fff; border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.06); transition: transform .18s ease, box-shadow .2s ease; } .imv-nw:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.10); } .imv-nw__thumb { display: block; background: #e9edf3 center/cover no-repeat; } .imv-nw__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; } .imv-nw__badge { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 4px 11px; border-radius: 20px; background: #E5EEFC; color: #0062e7; } .imv-nw__badge--0 { background: #fde8ec; color: #eb1f3c; } .imv-nw__badge--1 { background: #e3f6ed; color: #12805c; } .imv-nw__badge--2 { background: #e5eefc; color: #0062e7; } .imv-nw__badge--3 { background: #f3e8ff; color: #7c3aed; } .imv-nw__badge--4 { background: #e8eaff; color: #4f46e5; } .imv-nw__badge--5 { background: #fef3c7; color: #b45309; } .imv-nw__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.32; color: var(--imv-text); } .imv-nw__title a:hover { color: var(--imv-blue); } .imv-nw__excerpt { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--imv-muted); } .imv-nw__meta { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--imv-muted); font-weight: 600; } /* --- Kiểu LIST: ảnh trái, nội dung phải (mặc định, như demo) --- */ .imv-nwlist--list { display: flex; flex-direction: column; gap: 16px; } .imv-nwlist--list .imv-nw { display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: stretch; } .imv-nwlist--list .imv-nw__thumb { height: 100%; min-height: 168px; } .imv-nwlist--list .imv-nw__body { padding: 18px 22px; justify-content: center; } /* --- Kiểu GRID: lưới 2–3 cột --- */ .imv-nwlist--grid { display: grid; gap: 18px; } .imv-nwlist--c2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .imv-nwlist--c3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .imv-nwlist--grid .imv-nw { display: flex; flex-direction: column; } .imv-nwlist--grid .imv-nw__thumb { aspect-ratio: 16/10; } .imv-nwlist--grid .imv-nw__title { font-size: 15.5px; } .imv-nwlist--grid .imv-nw__body { flex: 1; } .imv-nwlist--grid .imv-nw__meta { margin-top: auto; } /* --- Kiểu MAGAZINE: bài đầu nổi bật, còn lại lưới 2 cột --- */ .imv-nwlist--magazine { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } .imv-nwlist--magazine .imv-nw { display: flex; flex-direction: column; } .imv-nwlist--magazine .imv-nw__thumb { aspect-ratio: 16/10; } .imv-nwlist--magazine .imv-nw--lead { grid-column: 1 / -1; } .imv-nwlist--magazine .imv-nw--lead .imv-nw__thumb { aspect-ratio: 21/9; } .imv-nwlist--magazine .imv-nw--lead .imv-nw__title { font-size: 24px; } .imv-nwlist--magazine .imv-nw--lead .imv-nw__excerpt { font-size: 14.5px; } .imv-nwlist--magazine .imv-nw__title { font-size: 15.5px; } /* --- Kiểu COMPACT: thumbnail nhỏ, không mô tả --- */ .imv-nwlist--compact { display: flex; flex-direction: column; gap: 10px; } .imv-nwlist--compact .imv-nw { display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; } .imv-nwlist--compact .imv-nw__thumb { height: 68px; } .imv-nwlist--compact .imv-nw__body { padding: 10px 16px; gap: 6px; } .imv-nwlist--compact .imv-nw__title { font-size: 14.5px; } .imv-nwlist--compact .imv-nw__badge { font-size: 9.5px; padding: 3px 9px; } /* Phân trang */ .imv-pager { display: flex; justify-content: center; margin-top: 26px; } .imv-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; margin: 0 3px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--imv-text); background: #fff; border: 1px solid var(--imv-line); transition: background .15s ease, color .15s ease; } .imv-pager .page-numbers:hover { background: #eef4ff; color: var(--imv-blue); } .imv-pager .page-numbers.current { background: var(--imv-blue); color: #fff; border-color: var(--imv-blue); } .imv-pager .page-numbers.dots { border: none; background: transparent; } /* Trending News (sidebar) */ .imv-trend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .imv-trend li { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #e8ecf2; } .imv-trend li:last-child { border-bottom: none; padding-bottom: 0; } .imv-trend li:first-child { padding-top: 0; } .imv-trend__n { width: 22px; height: 22px; border-radius: 50%; background: #1f2430; color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .imv-trend__ic { width: 52px; height: 38px; border-radius: 8px; overflow: hidden; background: #eef3ff; flex-shrink: 0; } .imv-trend__ic img { width: 52px; height: 38px; object-fit: cover; } .imv-trend__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .imv-trend__title { font-size: 13px; font-weight: 800; color: var(--imv-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .imv-trend__title:hover { color: var(--imv-blue); } .imv-trend__meta { font-size: 11.5px; color: var(--imv-muted); } /* News Archive — gọn: 1 dòng/tháng, không kẻ ngang, số bên phải */ .imv-archive { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .imv-archive li { font-size: 13.5px; } .imv-archive a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--imv-text); font-weight: 700; border-radius: 8px; transition: color .15s ease; } .imv-archive a:hover { color: var(--imv-blue); } .imv-archive a b { font-size: 13px; font-weight: 700; color: #b6bcc9; } .imv-archive a:hover b { color: var(--imv-blue); } /* Categories: mục đang chọn */ .imv-qlinks a.is-active { color: var(--imv-blue); } @media (max-width: 900px) { .imv-nwlist--c3 { grid-template-columns: repeat(2, minmax(0,1fr)); } .imv-nwlist--list .imv-nw { grid-template-columns: 1fr; } .imv-nwlist--list .imv-nw__thumb { min-height: 180px; } } @media (max-width: 620px) { .imv-nwlist--c2, .imv-nwlist--c3, .imv-nwlist--magazine { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .imv-life-layout { grid-template-columns: 1fr; } .imv-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .imv-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .imv-gallery { grid-template-columns: 1fr 1fr; } .imv-gallery__item--wide { grid-column: span 2; } .imv-hero__body { padding: 28px 22px; } .imv-hero__title { font-size: 28px; } .imv-pagehead__inner { flex-direction: column; align-items: flex-start; } .imv-cta { flex-wrap: wrap; } } @media (max-width: 1180px) { /* Welcome full-width trên; Featured full-width; Birthdays+Members | Quick Access 2 cột dưới */ .imv-toprow { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "welcome welcome" "featured featured" "side qa"; } } @media (max-width: 1080px) { .imv-layout { grid-template-columns: 1fr; } .imv-grid-4 { grid-template-columns: repeat(2, 1fr); } .imv-carousel > * { flex-basis: calc(33.333% - 11px); } } @media (max-width: 720px) { .imv-toprow { grid-template-columns: 1fr; grid-template-areas: "welcome" "featured" "side" "qa"; } } @media (max-width: 1024px) { .imv-header__user-name { display: none; } } @media (max-width: 860px) { .imv-header__search { display: none; } .imv-grid-3 { grid-template-columns: 1fr; } } /* ============================================================ MOBILE (≤640px) — dựng lại trang chủ 1 cột theo thứ tự thiết kế. Các wrapper lưới (toprow / hotnews-row / layout / col-main / col-side) dùng display:contents để mọi khối "trồi" lên thành con trực tiếp của .imv-container (flex column), rồi sắp lại bằng order. Nhờ vậy Quick Access (vốn nằm trong toprow) có thể xếp SAU Recognition/AI (vốn nằm trong layout). ============================================================ */ @media (max-width: 640px) { .imv-container { padding: 14px 14px 84px !important; display: flex; flex-direction: column; gap: 22px; } /* HEADER mobile: ẩn menu chính (đã có bottom-nav thay thế), dồn phải gọn. Trước đây menu ngang + nút "Đăng nhập" tràn khỏi mép phải màn hình. */ .imv-header__nav { display: none !important; } .imv-header__inner { padding: 0 14px; gap: 10px; min-height: 64px; } .imv-header__right { margin-left: auto; gap: 8px; } .imv-header__logo img { height: 28px; } .imv-header__lang { padding: 4px 8px; font-size: 11px; } /* Bỏ lưới đa cột — các wrapper trung gian tan ra, con trồi lên 1 mạch */ .imv-toprow, .imv-hotnews-row, .imv-layout, .imv-col-main, .imv-col-side { display: contents; } /* triệt tiêu margin-bottom cũ của các hàng (đã có gap của container) */ .imv-toprow, .imv-hotnews-row { margin-bottom: 0; } /* Thứ tự dọc đúng theo 6 hình thiết kế */ .imv-top-welcome { order: 1; margin-bottom: 0; } .imv-top-col1 { order: 2; } /* Featured Event */ .imv-top-col2 { order: 3; } /* Birthdays + New Members (2 cột) */ .imv-stats-card { order: 4; } /* Upcoming Events — số liệu */ .imv-hotnews-col { order: 5; } /* Hot News */ .imv-mob-life { order: 6; } /* Life at IMV */ .imv-grid-3 { order: 7; } /* Recognition / AI / Learning */ .imv-top-col3 { order: 8; } /* Quick Access */ .imv-mob-announce { order: 9; } /* Quick Announcements */ .imv-poll { order: 10; } .imv-mob-project { order: 11; } /* Project Highlight */ .imv-quote { order: 12; } /* Ẩn cột "Upcoming Events (danh sách)" — không có trong thiết kế mobile */ .imv-card--events { display: none; } /* Featured: các con của top-col1/col3 vốn là flex-column, giữ nguyên. (dùng .imv-toprow > để thắng đặc hiệu rule flex-column ở trên) */ .imv-toprow > .imv-top-col1, .imv-toprow > .imv-top-col3 { gap: 14px; } /* Birthdays | New Members đứng CẠNH NHAU (2 cột) như demo. QUAN TRỌNG: dùng minmax(0,1fr) — nếu để 1fr thường thì min-width:auto của grid item khiến New Members (nội dung không co) bóp Birthdays còn ~36px. Tiền tố .imv-toprow > để đặc hiệu (0,2,0) thắng rule flex-column gốc. */ .imv-toprow > .imv-top-col2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; } .imv-toprow > .imv-top-col2 > .imv-card { min-width: 0; height: auto; padding: 14px 12px; overflow: hidden; } .imv-top-col2 .imv-card-head h3 { font-size: 13.5px; } /* Birthdays: 3 avatar ngang, thu nhỏ vừa nửa cột */ .imv-avatars { gap: 4px; } .imv-avatars .imv-person { min-width: 0; } .imv-avatars .imv-person__ava { width: 42px; height: 42px; } .imv-avatars .imv-person__name { font-size: 10.5px; max-width: 100%; word-break: break-word; } /* New Members: danh sách DỌC gọn (avatar trái, tên/team phải; cắt text tràn). li phải width:100% để không lấy max-content đẩy tràn card. */ .imv-members { flex-direction: column; gap: 10px; } .imv-members li { flex-direction: row; align-items: center; gap: 8px; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .imv-members img { width: 34px; height: 34px; flex-shrink: 0; } .imv-members li > div { min-width: 0; flex: 1 1 0; overflow: hidden; } .imv-members strong { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } .imv-members span { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; } /* Hot News: 2 thẻ xếp DỌC, ảnh gọn trong khung (fix tràn) */ .imv-hotnews-cards { grid-template-columns: 1fr; gap: 14px; } .imv-hotnews-cards .imv-post__thumb { height: 150px; } .imv-hotnews-col .imv-card-head { padding: 0; } /* Upcoming số liệu: card gọn */ .imv-stats-card { padding: 16px; } /* Life 2 thẻ / Grid chung → 1–2 cột an toàn */ .imv-grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; } .imv-grid-4 { grid-template-columns: 1fr 1fr; gap: 14px; } .imv-grid-3 { grid-template-columns: 1fr; gap: 16px; } /* Quick Access: 4 icon / hàng cho vừa màn nhỏ */ .imv-quickaccess { grid-template-columns: repeat(4, 1fr); gap: 10px; } /* Project carousel: 1 thẻ rưỡi/khung, cuộn ngang */ .imv-carousel-wrap { padding: 16px 12px; } .imv-carousel > * { flex-basis: 82%; min-width: 0; } .imv-arrow { display: none; } .imv-featured__title { font-size: 24px; } .imv-featured__body { padding: 24px 22px; } /* Mobile bottom nav */ .imv-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: #fff; border-top: 1px solid var(--imv-line); box-shadow: 0 -2px 12px rgba(0,0,0,.06); /* chừa vùng safe-area đáy (iPhone gesture bar) */ padding-bottom: env(safe-area-inset-bottom, 0); } .imv-mobile-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0; font-size: 10.5px; font-weight: 600; color: var(--imv-muted); /* reset cho