1<style>
2 /* block he thong csdl */
3 .img-big-news-csdl {
4 width: 100%;
5 aspect-ratio: 4 / 3;
6 object-fit: cover;
7 border-radius: 10px;
8 height: 100%;
9 max-height: 230px;
10 }
11
12 .txt-title-big-news-csdl {
13 font-size: clamp(14px, 3vw, 18px);
14 font-weight: 700;
15 line-height: 25.2px;
16 text-align: left;
17 color: #2E2E2E;
18 }
19
20 .txt-description-big-news-csdl {
21 font-family: Roboto;
22 font-size: clamp(14px, 2vw, 16px);
23 font-weight: 400;
24 line-height: 22.4px;
25 text-align: left;
26 color: #2E2E2E;
27 }
28
29 .border-right-csdl {
30 border-right: 1px solid #848A8F;
31 }
32
33 .item-sub-news-csdl {
34 cursor: pointer;
35 color: #2E2E2E;
36 font-size: clamp(14px, 2vw, 16px);
37 font-weight: 600;
38 background-color: #E0E0E04D;
39 padding: 1rem;
40 border-bottom: 1px solid #EBEBEB;
41 transition: 0.3s ease;
42 cursor: pointer;
43 }
44
45 .item-sub-news-csdl:hover {
46 color: #035FB5;
47 }
48
49 .item-big-news-csdl:hover {
50 cursor: pointer;
51 }
52
53 .item-big-news-csdl:hover .img-big-news-csdl {
54 box-shadow: 4px 4px 4px 0px #00000040;
55 }
56
57 .item-big-news-csdl:hover .txt-title-big-news-csdl {
58 color: #035FB5;
59 }
60
61
62 .list-subnews-csdl {
63 max-height: 200px;
64 overflow: auto;
65 }
66
67 /* Tùy chỉnh thanh cuộn cho WebKit (Chrome, Safari, Edge) */
68 .list-subnews-csdl::-webkit-scrollbar {
69 width: 6px !important;
70 }
71
72 .list-subnews-csdl::-webkit-scrollbar-track {
73 background: #f9f9f9;
74 }
75
76 .list-subnews-csdl::-webkit-scrollbar-thumb {
77 background: #ccc;
78 border-radius: 3px;
79 }
80
81 .list-subnews-csdl::-webkit-scrollbar-thumb:hover {
82 background: #aaa;
83 }
84
85 @media (max-width: 1024px) {
86 .border-right-csdl {
87 border-right: none;
88 }
89 }
90
91 .wrap-text-content-limit {
92 max-height: 200px;
93 overflow: auto;
94 scrollbar-width: none;
95 }
96
97 .bottom-shadow {
98 position: absolute;
99 bottom: -1px;
100 left: 0;
101 height: 15px;
102 width: 100%;
103 background: linear-gradient(to top, rgb(255 255 255 / 76%), rgb(255 255 255 / 65%));
104 }
105</style>
106
107<div class="row">
108 <#assign indexLocal=0 />
109 <div class="col-12 col-xl-8 border-right-csdl">
110 <div class="row item-big-news-csdl">
111 <#list entries as curEntry>
112 <#assign renderer=curEntry.getAssetRenderer() className=renderer.getClassName() />
113 <#if className=="com.liferay.journal.model.JournalArticle">
114 <#assign title=curEntry.getTitle(locale) article=renderer.getArticle()
115 description=article.getDescription(locale) noiDung=article.getContent()
116 idBaiViet=article.getId()
117 viewURL="${themeDisplay.getPathFriendlyURLPublic()}${themeDisplay.getSiteGroup().getFriendlyURL()}/-/${renderer.getUrlTitle()}"
118 indexLocal=indexLocal + 1 />
119 <#if curEntry.getAssetRenderer().getThumbnailPath(renderRequest)??>
120 <#assign smallImageUrl=curEntry.getAssetRenderer().getThumbnailPath(renderRequest)>
121 <#else>
122 <#assign
123 smallImageUrl="/documents/37638/0/%E1%BA%A3nh-%C4%91%E1%BA%A1i-di%E1%BB%87n-%C4%91%C3%A0-n%E1%BA%B5ng-01.jpg">
124 </#if>
125 <#if indexLocal==1>
126 <a class="col-12 col-md-5 col-xl-5" href="${viewURL}" title="${title}">
127 <img src="${smallImageUrl}" alt="" class="img-big-news-csdl">
128 </a>
129 <a class="col-12 col-md-7 col-xl-7 align-self-center" href="${viewURL}" title="${title}">
130 <div class="wrap-text-content-limit">
131 <div class="txt-title-big-news-csdl mb-2">${title}</div>
132 <div class="txt-description-big-news-csdl">${description}</div>
133 <div class="bottom-shadow"></div>
134 </div>
135 </a>
136 </#if>
137</#if>
138</#list>
139</div>
140</div>
141
142
143<div class="col-12 col-xl-4">
144 <div class="list-subnews-csdl mt-2 mt-xl-0">
145 <#assign subIndex=0 />
146 <#list entries as curEntry>
147 <#assign renderer=curEntry.getAssetRenderer() className=renderer.getClassName() />
148 <#if className=="com.liferay.journal.model.JournalArticle" &&
149 curEntry.getAvailableLanguageIds()?seq_contains(locale)>
150 <#assign title=curEntry.getTitle(locale) article=renderer.getArticle()
151 description=article.getDescription(locale) noiDung=article.getContent()
152 idBaiViet=article.getId()
153 viewURL="${themeDisplay.getPathFriendlyURLPublic()}${themeDisplay.getSiteGroup().getFriendlyURL()}/-/${renderer.getUrlTitle()}"
154 subIndex=subIndex + 1 />
155 <#if curEntry.getAssetRenderer().getThumbnailPath(renderRequest)??>
156 <#assign smallImageUrl=curEntry.getAssetRenderer().getThumbnailPath(renderRequest)>
157 <#else>
158 <#assign
159 smallImageUrl="/documents/37638/0/%E1%BA%A3nh-%C4%91%E1%BA%A1i-di%E1%BB%87n-%C4%91%C3%A0-n%E1%BA%B5ng-01.jpg">
160 </#if>
161 <#if subIndex gt 1>
162
163 <a class="mb-2 pr-lg-1" href="${viewURL}" title="${title}">
164 <div class="item-sub-news-csdl">${title}</div>
165 </a>
166
167</#if>
168</#if>
169</#list>
170</div>
171</div>
172</div>