Skip to Content

Wiki source code of Home

Version 20.1 by System Administrator on 2026/04/01 10:47
Show last authors
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 QUẢN LÝ TRI THỨC LẠC LONG QUÂN</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 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/STM.png" 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="#">
105 <div class="vtb-media">
106 <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon1.jpg" alt="Kiến trúc dịch vụ nghiệp vụ">
107 </div>
108 <div class="vtb-body"><div class="vtb-title">MÔ HÌNH KIẾN TRÚC DỊCH VỤ NGHIỆP VỤ</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/icon3.png" alt="Trung tâm phòng ban">
115 </div>
116 <div class="vtb-body"><div class="vtb-title">CÁC TRUNG TÂM / PHÒNG BAN</div></div>
117 </a>
118
119 <!-- 5 -->
120 <a class="vtb-tile" href="#">
121 <div class="vtb-media">
122 <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon4.png" alt="Từ điển nghiệp vụ">
123 </div>
124 <div class="vtb-body"><div class="vtb-title">TỪ ĐIỂN NGHIỆP VỤ</div></div>
125 </a>
126
127 <!-- 6 -->
128 <a class="vtb-tile" href="https://lms.llq.vn/course/view.php?id=17">
129 <div class="vtb-media">
130 <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon5.png" alt="Cẩm nang Quy trình kiểm thử">
131 </div>
132 <div class="vtb-body"><div class="vtb-title">CẨM NANG QUY TRÌNH KIỂM THỬ</div></div>
133 </a>
134
135 <!-- 7 -->
136 <a class="vtb-tile" href="/xwiki/bin/view/PPDTDKHL/">
137 <div class="vtb-media">
138 <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon6.png" alt="Cẩm nang Quy trình">
139 </div>
140 <div class="vtb-body"><div class="vtb-title">CẨM NANG QUY TRÌNH</div></div>
141 </a>
142
143 <!-- 8 -->
144 <a class="vtb-tile" href="#">
145 <div class="vtb-media">
146 <img loading="lazy" src="/xwiki/bin/download/Main/WebHome/icon2.png" alt="Các dự án CNTT">
147 </div>
148 <div class="vtb-body"><div class="vtb-title">CÁC DỰ ÁN CÔNG NGHỆ THÔNG TIN</div></div>
149 </a>
150
151 </section>
152 </div>
153
154 <!-- (Tuỳ chọn) preload 1-2 ảnh đầu để mở trang mượt hơn -->
155 <link rel="preload" as="image" href="/xwiki/bin/download/Main/WebHome/icon2.png">
156 <link rel="preload" as="image" href="/xwiki/bin/download/Main/WebHome/icon2.png">
157 {{/html}}