Wiki source code of Spaces Index
Version 72.1 by System Administrator on 2026/04/13 21:19
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{html clean="false"}} | ||
| 2 | <style> | ||
| 3 | /* ====== VTB HOME (NO {{style}} MACRO) ====== */ | ||
| 4 | .vtb-home{max-width:100%;margin:0 auto;padding:12px 12px 24px;font-family:BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;} | ||
| 5 | .vtb-hero{ | ||
| 6 | background:linear-gradient(90deg,#005993,#0b78c5); | ||
| 7 | border-radius:10px;overflow:hidden; | ||
| 8 | box-shadow:0 10px 24px rgba(0,0,0,.10); | ||
| 9 | margin-bottom:16px; | ||
| 10 | } | ||
| 11 | .vtb-hero__inner{padding:28px 22px;text-align:center;color:#fff;} | ||
| 12 | .vtb-hero__inner h1{margin:0;font-size:30px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;} | ||
| 13 | .vtb-hero__line{width:120px;height:3px;margin:12px auto 0;background:rgba(255,255,255,.9);border-radius:99px;} | ||
| 14 | |||
| 15 | .vtb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;} | ||
| 16 | @media (max-width:1100px){.vtb-grid{grid-template-columns:repeat(3,1fr);}} | ||
| 17 | @media (max-width:820px){.vtb-grid{grid-template-columns:repeat(2,1fr);}} | ||
| 18 | @media (max-width:520px){.vtb-grid{grid-template-columns:1fr;}} | ||
| 19 | |||
| 20 | .vtb-tile{ | ||
| 21 | display:block;text-decoration:none !important;color:inherit !important; | ||
| 22 | background:#fff;border-radius:10px;overflow:hidden; | ||
| 23 | border:1px solid rgba(0,0,0,.06); | ||
| 24 | box-shadow:0 8px 18px rgba(0,0,0,.10); | ||
| 25 | border-bottom:4px solid rgba(11,120,197,.75); | ||
| 26 | transition:transform .15s ease, box-shadow .15s ease; | ||
| 27 | } | ||
| 28 | .vtb-tile:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.14);} | ||
| 29 | |||
| 30 | /* VÙNG ẢNH ĐỘNG */ | ||
| 31 | .vtb-media{ | ||
| 32 | height:200px; /* KÍCH THƯỚC VÙNG ẢNH */ | ||
| 33 | overflow:hidden; | ||
| 34 | position:relative; | ||
| 35 | background:#e9eef5; | ||
| 36 | } | ||
| 37 | .vtb-media img{ | ||
| 38 | width:100%; | ||
| 39 | height:100%; | ||
| 40 | object-fit:cover; | ||
| 41 | display:block; | ||
| 42 | transform:scale(1); | ||
| 43 | transition:transform .35s ease, filter .35s ease; | ||
| 44 | filter:saturate(1.05); | ||
| 45 | } | ||
| 46 | .vtb-tile:hover .vtb-media img{transform:scale(1.08);filter:saturate(1.12) contrast(1.02);} | ||
| 47 | |||
| 48 | /* overlay nhẹ để giống portal */ | ||
| 49 | .vtb-media::after{ | ||
| 50 | content:""; | ||
| 51 | position:absolute;inset:0; | ||
| 52 | background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)); | ||
| 53 | pointer-events:none; | ||
| 54 | opacity:.9; | ||
| 55 | } | ||
| 56 | |||
| 57 | .vtb-body{ | ||
| 58 | min-height:68px; /* GIỮ CHO CÁC TILE CAO ĐỀU */ | ||
| 59 | display:flex;align-items:center;justify-content:center; | ||
| 60 | padding:14px 12px 16px; | ||
| 61 | } | ||
| 62 | .vtb-title{ | ||
| 63 | text-align:center; | ||
| 64 | font-weight:900; | ||
| 65 | text-transform:uppercase; | ||
| 66 | font-size:13px; | ||
| 67 | line-height:1.25; | ||
| 68 | color:#2b2b2b; | ||
| 69 | } | ||
| 70 | |||
| 71 | /* (Tuỳ chọn) viền focus khi tab keyboard */ | ||
| 72 | .vtb-tile:focus{outline:3px solid rgba(11,120,197,.35);outline-offset:2px;} | ||
| 73 | </style> | ||
| 74 | |||
| 75 | <div class="vtb-home"> | ||
| 76 | |||
| 77 | <section class="vtb-hero"> | ||
| 78 | <div class="vtb-hero__inner"> | ||
| 79 | <h1>CHÀO MỪNG TỚI HỆ THỐNG TRANG QUẢN LÝ TRI THỨC</h1> | ||
| 80 | <div class="vtb-hero__line"></div> | ||
| 81 | </div> | ||
| 82 | </section> | ||
| 83 | |||
| 84 | <!-- GRID 8 TILE --> | ||
| 85 | <section class="vtb-grid"> | ||
| 86 | |||
| 87 | <!-- 1 --> | ||
| 88 | <a class="vtb-tile" href="#"> | ||
| 89 | <div class="vtb-media"> | ||
| 90 | <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon2.png" alt="Quản lý tài liệu dự án CNTT"> | ||
| 91 | </div> | ||
| 92 | <div class="vtb-body"><div class="vtb-title">CHUYỂN ĐỔI SỐ</div></div> | ||
| 93 | </a> | ||
| 94 | |||
| 95 | <!-- 2 --> | ||
| 96 | <a class="vtb-tile" href="#"> | ||
| 97 | <div class="vtb-media"> | ||
| 98 | <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon3.jpg" alt="Quản lý tài liệu CNTT"> | ||
| 99 | </div> | ||
| 100 | <div class="vtb-body"><div class="vtb-title">QUẢN LÝ TÀI LIỆU CÔNG NGHỆ THÔNG TIN - CNTT</div></div> | ||
| 101 | </a> | ||
| 102 | |||
| 103 | <!-- 3 --> | ||
| 104 | <a class="vtb-tile" href="https://lms.llq.vn/course/view.php?id=17"> | ||
| 105 | <div class="vtb-media"> | ||
| 106 | <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon5.jpg" alt="Cẩm nang Quy trình kiểm thử"> | ||
| 107 | </div> | ||
| 108 | <div class="vtb-body"><div class="vtb-title">CẨM NANG QUY TRÌNH</div></div> | ||
| 109 | </a> | ||
| 110 | |||
| 111 | <!-- 4 --> | ||
| 112 | <a class="vtb-tile" href="#"> | ||
| 113 | <div class="vtb-media"> | ||
| 114 | <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon4.jpg" alt="Các dự án CNTT"> | ||
| 115 | </div> | ||
| 116 | <div class="vtb-body"><div class="vtb-title">CÁC DỰ ÁN CÔNG NGHỆ THÔNG TIN</div></div> | ||
| 117 | </a> | ||
| 118 | |||
| 119 | </section> | ||
| 120 | </div> | ||
| 121 | |||
| 122 | <!-- (Tuỳ chọn) preload 1-2 ảnh đầu để mở trang mượt hơn --> | ||
| 123 | <link rel="preload" as="image" href="/xwiki/bin/download/Main/WebHome/icon2.png"> | ||
| 124 | <link rel="preload" as="image" href="/xwiki/bin/download/Main/WebHome/icon2.png"> | ||
| 125 | {{/html}} | ||
| 126 | |||
| 127 | |||
| 128 |