/* =========================================================
DENTOT.VN - BLOG ARCHIVE
Premium Editorial / Lighting Magazine / Responsive
Scope: #content.blog-wrapper
========================================================= */
/* =========================================================
01. DESIGN TOKENS
========================================================= */
#content.blog-wrapper {
--dt-blog-primary: #ff7100;
--dt-blog-primary-dark: #e85d00;
--dt-blog-primary-light: #ff9e1b;
--dt-blog-yellow: #ffc34d;
--dt-blog-text: #242424;
--dt-blog-heading: #141414;
--dt-blog-muted: #747474;
--dt-blog-soft: #9a9a9a;
--dt-blog-bg: #f7f8fa;
--dt-blog-card: #ffffff;
--dt-blog-border: #e8eaed;
--dt-blog-border-warm: #ffe1c2;
--dt-blog-radius: 22px;
--dt-blog-radius-small: 14px;
--dt-blog-shadow:
0 16px 44px rgba(24, 28, 34, 0.07),
0 3px 10px rgba(24, 28, 34, 0.035);
--dt-blog-shadow-hover:
0 24px 64px rgba(24, 28, 34, 0.12),
0 8px 22px rgba(255, 113, 0, 0.06);
--dt-blog-mouse-x: 50%;
--dt-blog-mouse-y: 50%;
position: relative;
margin: 0;
padding:
54px 0 72px;
overflow: hidden;
background:
radial-gradient(circle at 6% 4%,
rgba(255, 166, 68, 0.12),
transparent 24%),
radial-gradient(circle at 94% 35%,
rgba(255, 113, 0, 0.055),
transparent 27%),
linear-gradient(180deg,
#fbfbfc 0%,
#f7f8fa 100%);
}
/* =========================================================
02. BACKGROUND DECORATION
========================================================= */
#content.blog-wrapper::before,
#content.blog-wrapper::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 50%;
}
#content.blog-wrapper::before {
width: 430px;
height: 430px;
top: -260px;
left: -210px;
background:
radial-gradient(circle,
rgba(255, 162, 51, 0.13),
transparent 70%);
}
#content.blog-wrapper::after {
width: 500px;
height: 500px;
right: -300px;
bottom: -180px;
background:
radial-gradient(circle,
rgba(255, 113, 0, 0.07),
transparent 70%);
}
/* =========================================================
03. MAIN BLOG CONTAINER
========================================================= */
#content.blog-wrapper>.row {
position: relative;
z-index: 2;
display: grid !important;
grid-template-columns:
minmax(0, 1fr) 300px;
align-items: start;
gap: 28px;
width:
min(1240px,
calc(100% - 36px));
max-width: none !important;
margin:
0 auto !important;
padding: 0 !important;
}
#content.blog-wrapper .row-divided>.col+.col:not(.large-12) {
border-left:
0 !important;
}
/* =========================================================
04. MAIN CONTENT COLUMN
========================================================= */
#content.blog-wrapper>.row>.large-9 {
width:
100% !important;
max-width:
none !important;
flex-basis:
auto !important;
padding:
0 !important;
}
/* =========================================================
05. BLOG GRID
========================================================= */
#content.blog-wrapper #post-list {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* =========================================================
06. ARTICLE CARD
========================================================= */
#content.blog-wrapper #post-list>article {
position: relative;
min-width: 0;
margin:
0 !important;
overflow:
visible;
}
#content.blog-wrapper .article-inner {
position: relative;
height: 100%;
margin:
0 !important;
overflow: hidden;
isolation: isolate;
border:
1px solid var(--dt-blog-border);
border-radius:
var(--dt-blog-radius);
background:
radial-gradient(circle at var(--dt-blog-mouse-x) var(--dt-blog-mouse-y),
rgba(255, 143, 20, 0.07),
transparent 260px),
var(--dt-blog-card);
box-shadow:
var(--dt-blog-shadow);
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
#content.blog-wrapper .article-inner::before {
content: "";
position: absolute;
z-index: 4;
top: 0;
left: 18%;
right: 18%;
height: 2px;
opacity: 0;
border-radius:
999px;
pointer-events: none;
background:
linear-gradient(90deg,
transparent,
rgba(255, 113, 0, 0.4),
rgba(255, 194, 60, 1),
rgba(255, 113, 0, 0.4),
transparent);
transition:
opacity 0.3s ease;
}
@media (hover: hover) {
#content.blog-wrapper .article-inner:hover {
border-color:
rgba(255, 113, 0, 0.22);
box-shadow:
var(--dt-blog-shadow-hover);
}
#content.blog-wrapper .article-inner:hover::before {
opacity: 1;
}
}
/* =========================================================
07. FEATURED FIRST ARTICLE
========================================================= */
@media screen and (min-width: 850px) {
#content.blog-wrapper #post-list>article:first-child {
grid-column:
1 / -1;
}
#content.blog-wrapper #post-list>article:first-child .entry-image {
aspect-ratio:
16 / 6;
}
#content.blog-wrapper #post-list>article:first-child .entry-title {
font-size:
clamp(27px,
2.4vw,
36px);
}
#content.blog-wrapper #post-list>article:first-child .entry-summary>p {
max-width:
850px;
margin-inline:
auto;
}
}
/* =========================================================
08. ARTICLE HEADER
========================================================= */
#content.blog-wrapper .entry-header {
display: flex;
flex-direction: column;
margin: 0;
}
/* =========================================================
09. ARTICLE IMAGE
========================================================= */
#content.blog-wrapper .entry-image {
order: -1;
position: relative;
width: 100%;
aspect-ratio:
16 / 10;
margin: 0;
overflow: hidden;
background:
#eceef1;
}
#content.blog-wrapper .entry-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(180deg,
transparent 60%,
rgba(20, 20, 20, 0.08) 100%);
}
#content.blog-wrapper .entry-image>a {
display: block;
width: 100%;
height: 100%;
}
#content.blog-wrapper .entry-image img {
display: block;
width:
100% !important;
max-width:
none !important;
height:
100% !important;
margin: 0;
object-fit:
cover;
transform:
scale(1.001);
transition:
filter 0.4s ease;
}
/* =========================================================
10. DATE BADGE
========================================================= */
#content.blog-wrapper .entry-image .badge.post-date {
position:
absolute !important;
z-index: 5;
top:
16px !important;
left:
16px !important;
width: auto;
height: auto;
margin: 0;
transform: none;
}
#content.blog-wrapper .entry-image .badge-inner {
display: flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
width:
58px;
min-width:
58px;
height:
58px;
padding: 0;
border:
1px solid rgba(255, 255, 255, 0.75) !important;
border-radius:
16px;
color:
#ffffff;
background:
linear-gradient(145deg,
rgba(255, 103, 0, 0.96),
rgba(255, 153, 21, 0.94));
-webkit-backdrop-filter:
blur(10px);
backdrop-filter:
blur(10px);
box-shadow:
0 9px 24px rgba(255, 103, 0, 0.25);
line-height:
1;
}
#content.blog-wrapper .post-date-day {
font-size:
18px;
font-weight:
900;
line-height:
1;
}
#content.blog-wrapper .post-date-month {
margin-top:
4px;
font-size:
9px !important;
font-weight:
700;
line-height:
1;
}
#content.blog-wrapper .badge-inner br {
display:
none;
}
/* =========================================================
11. HEADER TEXT
========================================================= */
#content.blog-wrapper .entry-header-text {
position: relative;
margin:
0 !important;
padding:
23px 24px 18px !important;
text-align:
left !important;
}
/* =========================================================
12. CATEGORY
========================================================= */
#content.blog-wrapper .entry-category {
margin:
0 0 10px !important;
line-height:
1;
}
#content.blog-wrapper .entry-category a {
display:
inline-flex;
align-items:
center;
min-height:
28px;
padding:
0 11px;
border:
1px solid rgba(255, 113, 0, 0.16);
border-radius:
999px;
color:
var(--dt-blog-primary-dark);
background:
#fff6ec;
font-size:
10px;
font-weight:
800;
letter-spacing:
0.045em;
line-height:
1;
text-decoration:
none;
text-transform:
uppercase;
}
/* =========================================================
13. ARTICLE TITLE
========================================================= */
#content.blog-wrapper .entry-title {
margin: 0;
color:
var(--dt-blog-heading);
font-size:
clamp(20px,
1.65vw,
25px);
font-weight:
800;
line-height:
1.3;
letter-spacing:
-0.025em;
}
#content.blog-wrapper .entry-title a {
color:
inherit !important;
text-decoration:
none;
}
/* =========================================================
14. TITLE DIVIDER
========================================================= */
#content.blog-wrapper .entry-header-text .entry-divider {
width:
42px;
max-width:
none;
height:
3px;
margin:
14px 0 12px;
border-radius:
999px;
background:
linear-gradient(90deg,
var(--dt-blog-primary),
var(--dt-blog-yellow));
}
/* =========================================================
15. ARTICLE META
========================================================= */
#content.blog-wrapper .entry-header-text .entry-meta {
display: flex;
flex-wrap:
wrap;
align-items:
center;
gap:
5px 10px;
margin: 0;
color:
var(--dt-blog-muted);
font-size:
10px;
font-weight:
600;
line-height:
1.5;
letter-spacing:
0.01em;
text-transform:
none !important;
}
#content.blog-wrapper .entry-header-text .entry-meta a {
color:
#5d6167;
text-decoration:
none;
}
/* =========================================================
16. ARTICLE CONTENT
========================================================= */
#content.blog-wrapper .entry-content {
margin: 0;
padding:
0 24px 22px;
}
#content.blog-wrapper .entry-summary {
margin: 0;
}
#content.blog-wrapper .entry-summary>p {
display:
-webkit-box;
margin:
0 0 18px;
overflow: hidden;
color:
#60646a;
font-size:
13.5px;
font-weight:
400;
line-height:
1.8;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
3;
}
/* =========================================================
17. READ MORE BUTTON
========================================================= */
#content.blog-wrapper .entry-summary .text-center {
text-align:
left !important;
}
#content.blog-wrapper .more-link {
position: relative;
display:
inline-flex !important;
align-items:
center;
justify-content:
center;
gap:
9px;
min-height:
42px;
margin:
0 !important;
padding:
0 16px !important;
overflow:
hidden;
border:
1px solid rgba(255, 113, 0, 0.24) !important;
border-radius:
11px !important;
color:
var(--dt-blog-primary-dark) !important;
background:
#fff7ee !important;
box-shadow:
none !important;
font-size:
12px !important;
font-weight:
700 !important;
line-height:
1 !important;
letter-spacing:
0 !important;
text-transform:
none !important;
}
#content.blog-wrapper .more-link .meta-nav {
display:
inline-flex;
align-items:
center;
justify-content:
center;
width:
23px;
height:
23px;
border-radius:
50%;
color:
#ffffff;
background:
linear-gradient(135deg,
var(--dt-blog-primary),
var(--dt-blog-primary-light));
font-size:
13px;
line-height:
1;
}
@media (hover: hover) {
#content.blog-wrapper .more-link:hover {
color:
#ffffff !important;
border-color:
var(--dt-blog-primary) !important;
background:
linear-gradient(110deg,
#f46600,
#ff8c10) !important;
}
#content.blog-wrapper .more-link:hover .meta-nav {
background:
rgba(255, 255, 255, 0.18);
}
}
/* =========================================================
18. ARTICLE FOOTER
========================================================= */
#content.blog-wrapper .article-inner>footer.entry-meta {
display: flex;
align-items:
center;
flex-wrap:
wrap;
gap:
7px 12px;
min-height:
47px;
margin:
0 24px;
padding:
12px 0 16px;
border-top:
1px solid #eceef0;
color:
var(--dt-blog-soft);
font-size:
10px;
line-height:
1.5;
}
#content.blog-wrapper .article-inner>footer.entry-meta a {
color:
#666a70;
font-weight:
600;
text-decoration:
none;
}
#content.blog-wrapper .article-inner>footer.entry-meta .comments-link {
margin-left:
auto;
}
#content.blog-wrapper .article-inner>footer.entry-meta .tags-links,
#content.blog-wrapper .article-inner>footer.entry-meta .sep {
display:
none;
}
/* =========================================================
DENTOT.VN - BLOG SIDEBAR
========================================================= */
/* =========================================================
19. SIDEBAR COLUMN
========================================================= */
#content.blog-wrapper .post-sidebar {
width:
100% !important;
max-width:
none !important;
flex-basis:
auto !important;
padding:
0 !important;
}
/* =========================================================
20. SIDEBAR STICKY
========================================================= */
#content.blog-wrapper #secondary {
position:
sticky;
top:
110px;
display:
grid;
gap:
18px;
}
/* =========================================================
21. SIDEBAR WIDGET
========================================================= */
#content.blog-wrapper #secondary .widget {
position:
relative;
margin:
0 !important;
padding:
20px;
overflow:
hidden;
border:
1px solid var(--dt-blog-border);
border-radius:
18px;
background:
rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter:
blur(14px) saturate(135%);
backdrop-filter:
blur(14px) saturate(135%);
box-shadow:
0 10px 32px rgba(25, 30, 35, 0.055);
}
#content.blog-wrapper #secondary .widget::before {
content: "";
position:
absolute;
top:
0;
left:
20px;
right:
20px;
height:
2px;
border-radius:
999px;
background:
linear-gradient(90deg,
transparent,
var(--dt-blog-primary),
var(--dt-blog-yellow),
transparent);
}
/* =========================================================
22. SIDEBAR TITLE
========================================================= */
#content.blog-wrapper #secondary .widget-title {
display:
block;
margin:
0;
color:
var(--dt-blog-heading);
font-size:
16px;
font-weight:
800;
line-height:
1.35;
letter-spacing:
-0.015em;
text-transform:
none;
}
#content.blog-wrapper #secondary .widget>.is-divider {
width:
32px;
height:
3px;
margin:
10px 0 16px;
border-radius:
999px;
background:
var(--dt-blog-primary);
}
/* =========================================================
23. CATEGORY LIST
FIX: CATEGORY NAME + POST COUNT SAME ROW
HTML Flatsome:
Style (5)
Count "(5)" là text node nằm ngoài .
Vì vậy card được đặt lên , không đặt lên .
========================================================= */
#content.blog-wrapper .widget_categories ul {
display:
grid;
gap:
8px;
margin:
0;
padding:
0;
list-style:
none;
}
#content.blog-wrapper .widget_categories li {
position:
relative;
display:
flex;
align-items:
center;
width:
100%;
min-height:
44px;
margin:
0 !important;
padding:
0 13px 0 34px;
box-sizing:
border-box;
overflow:
hidden;
border:
1px solid #eceef0;
border-radius:
11px;
color:
#777b81;
background:
#fafbfc;
font-size:
11px;
font-weight:
700;
line-height:
1;
white-space:
nowrap;
transition:
border-color 0.22s ease,
background 0.22s ease,
color 0.22s ease,
box-shadow 0.22s ease;
}
/* Bullet orange */
#content.blog-wrapper .widget_categories li::before {
content: "";
position:
absolute;
top:
50%;
left:
15px;
width:
7px;
height:
7px;
border-radius:
50%;
background:
#ffae61;
box-shadow:
0 0 0 4px rgba(255, 113, 0, 0.055);
transform:
translateY(-50%);
transition:
background 0.22s ease,
box-shadow 0.22s ease;
}
/* Category link */
#content.blog-wrapper .widget_categories li a {
display:
flex !important;
align-items:
center;
flex:
1 1 auto;
min-width:
0;
min-height:
42px;
margin:
0;
padding:
0 10px 0 0;
border:
0 !important;
border-radius:
0;
color:
#3f4349;
background:
transparent !important;
box-shadow:
none !important;
font-size:
12px;
font-weight:
650;
line-height:
1.2;
text-decoration:
none;
white-space:
nowrap;
overflow:
hidden;
text-overflow:
ellipsis;
}
/*
* Arrow được đặt ở bên trong link.
* Vì count nằm sau link nên ta không đặt arrow bên phải nữa,
* tránh tranh chỗ với số bài viết.
*/
#content.blog-wrapper .widget_categories li a::before,
#content.blog-wrapper .widget_categories li a::after {
content:
none !important;
display:
none !important;
}
/* Category row hover */
@media (hover: hover) {
#content.blog-wrapper .widget_categories li:hover {
color:
var(--dt-blog-primary-dark);
border-color:
rgba(255, 113, 0, 0.27);
background:
#fff7ee;
box-shadow:
0 6px 15px rgba(255, 113, 0, 0.07);
}
#content.blog-wrapper .widget_categories li:hover::before {
background:
var(--dt-blog-primary);
box-shadow:
0 0 0 4px rgba(255, 113, 0, 0.10);
}
#content.blog-wrapper .widget_categories li:hover a {
color:
var(--dt-blog-primary-dark);
}
}
/* =========================================================
24. TAG CLOUD
========================================================= */
#content.blog-wrapper .tagcloud {
display:
flex;
flex-wrap:
wrap;
gap:
8px;
}
#content.blog-wrapper .tagcloud a {
display:
inline-flex;
align-items:
center;
min-height:
32px;
margin:
0 !important;
padding:
0 11px;
border:
1px solid #e7e9ec;
border-radius:
999px;
color:
#60646a;
background:
#fafafa;
font-size:
10px !important;
font-weight:
650;
line-height:
1;
text-decoration:
none;
transition:
color 0.2s ease,
border-color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
@media (hover: hover) {
#content.blog-wrapper .tagcloud a:hover {
color:
#ffffff;
border-color:
var(--dt-blog-primary);
background:
linear-gradient(110deg,
var(--dt-blog-primary),
var(--dt-blog-primary-light));
transform:
translateY(-2px);
}
}
/* =========================================================
25. ARTICLE LINK HOVER
========================================================= */
@media (hover: hover) {
#content.blog-wrapper .entry-title a:hover {
color:
var(--dt-blog-primary-dark) !important;
}
#content.blog-wrapper .entry-header-text .entry-meta a:hover,
#content.blog-wrapper .article-inner>footer.entry-meta a:hover {
color:
var(--dt-blog-primary-dark);
}
}
/* =========================================================
26. TABLET
========================================================= */
@media screen and (max-width: 1024px) {
#content.blog-wrapper>.row {
grid-template-columns:
minmax(0, 1fr) 260px;
gap:
20px;
}
#content.blog-wrapper #post-list {
gap:
18px;
}
#content.blog-wrapper .entry-header-text {
padding:
20px 20px 15px !important;
}
#content.blog-wrapper .entry-content {
padding:
0 20px 20px;
}
#content.blog-wrapper .article-inner>footer.entry-meta {
margin:
0 20px;
}
}
/* =========================================================
27. SMALL TABLET
========================================================= */
@media screen and (max-width: 849px) {
#content.blog-wrapper {
padding:
34px 0 48px;
}
#content.blog-wrapper>.row {
display:
block !important;
width:
calc(100% - 24px);
}
#content.blog-wrapper #post-list {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
16px;
}
#content.blog-wrapper #post-list>article:first-child {
grid-column:
1 / -1;
}
#content.blog-wrapper .post-sidebar {
margin-top:
24px;
}
#content.blog-wrapper #secondary {
position:
relative;
top:
auto;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
14px;
}
/*
* Category count vẫn giữ cùng hàng trên tablet.
*/
#content.blog-wrapper .widget_categories li {
min-height:
43px;
}
}
/* =========================================================
28. MOBILE
========================================================= */
@media screen and (max-width: 549px) {
#content.blog-wrapper {
padding:
24px 0 38px;
}
#content.blog-wrapper>.row {
width:
calc(100% - 16px);
}
#content.blog-wrapper #post-list {
grid-template-columns:
minmax(0, 1fr);
gap:
15px;
}
#content.blog-wrapper #post-list>article:first-child {
grid-column:
auto;
}
#content.blog-wrapper .article-inner {
border-radius:
17px;
}
/* ---------------------------------------------------------
Article image
--------------------------------------------------------- */
#content.blog-wrapper .entry-image {
aspect-ratio:
16 / 9;
}
#content.blog-wrapper .entry-image .badge.post-date {
top:
11px !important;
left:
11px !important;
}
#content.blog-wrapper .entry-image .badge-inner {
width:
50px;
min-width:
50px;
height:
50px;
border-radius:
13px;
}
#content.blog-wrapper .post-date-day {
font-size:
16px;
}
/* ---------------------------------------------------------
Article content
--------------------------------------------------------- */
#content.blog-wrapper .entry-header-text {
padding:
18px 17px 14px !important;
}
#content.blog-wrapper .entry-title {
font-size:
19px;
line-height:
1.35;
}
#content.blog-wrapper .entry-content {
padding:
0 17px 18px;
}
#content.blog-wrapper .entry-summary>p {
margin-bottom:
15px;
font-size:
13px;
line-height:
1.7;
-webkit-line-clamp:
3;
}
#content.blog-wrapper .article-inner>footer.entry-meta {
margin:
0 17px;
padding:
11px 0 14px;
}
#content.blog-wrapper .article-inner>footer.entry-meta .comments-link {
display:
none;
}
/* ---------------------------------------------------------
Sidebar
--------------------------------------------------------- */
#content.blog-wrapper #secondary {
grid-template-columns:
minmax(0, 1fr);
gap:
12px;
}
#content.blog-wrapper #secondary .widget {
padding:
18px;
border-radius:
16px;
}
/* ---------------------------------------------------------
MOBILE CATEGORY
Tên + số bài luôn cùng một dòng
--------------------------------------------------------- */
#content.blog-wrapper .widget_categories li {
min-height:
44px;
padding:
0 12px 0 32px;
font-size:
11px;
}
#content.blog-wrapper .widget_categories li::before {
left:
14px;
width:
6px;
height:
6px;
}
#content.blog-wrapper .widget_categories li a {
min-height:
42px;
padding-right:
8px;
font-size:
12px;
}
}
/* =========================================================
29. VERY SMALL MOBILE
========================================================= */
@media screen and (max-width: 360px) {
#content.blog-wrapper .entry-header-text {
padding:
16px 14px 13px !important;
}
#content.blog-wrapper .entry-content {
padding:
0 14px 16px;
}
#content.blog-wrapper .article-inner>footer.entry-meta {
margin:
0 14px;
}
#content.blog-wrapper .more-link {
min-height:
40px;
padding:
0 13px !important;
}
#content.blog-wrapper .widget_categories li {
padding-right:
10px;
}
}
/* =========================================================
30. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#content.blog-wrapper .entry-image img,
#content.blog-wrapper .article-inner,
#content.blog-wrapper .more-link,
#content.blog-wrapper .tagcloud a,
#content.blog-wrapper .widget_categories li {
transition:
none !important;
}
}