/* ═══════════════════════════════════════════════════════════
Trail Blog Elements v7.0
─────────────────────────────────────────────────────────
ĐỔI FONT: chỉ cần sửa 1 dòng --tbe-font-body bên dưới
Brand: #F75E00 (cam) | Secondary: #2A9D5C (xanh lá)
═══════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────
GOOGLE FONTS — đã chuyển sang wp_enqueue trong PHP
@import bị XOÁ khỏi CSS để tránh block render.
Font được load qua trong song song
với CSS thay vì tuần tự. Xem trail-blog-elements.php
─────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────
DESIGN TOKENS — đổi ở đây, áp toàn bộ plugin
─────────────────────────────────────────────────── */
:root {
/* ── Font — đổi font: chỉ sửa 2 dòng này ── */
/* Khi Mulish chưa load xong, dùng font system có hỗ trợ tiếng Việt */
--tbe-font-body: 'Mulish', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--tbe-font-heading: 'Mulish', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
/* ── Màu thương hiệu ── */
--tbe-brand: #F75E00;
--tbe-brand-dark: #C94A00;
--tbe-brand-bg: #FFF0E8;
--tbe-brand-dim: rgba(247, 94, 0, 0.08);
/* ── Màu phụ xanh lá ── */
--tbe-green: #2A9D5C;
--tbe-green-dark: #1a6b3c;
--tbe-green-bg: #E8F5EE;
/* ── Màu bổ sung ── */
--tbe-blue: #378ADD;
--tbe-blue-bg: #E6F1FB;
/* ── Text ── */
--tbe-text: #1e1e1e;
--tbe-text-2: #444444;
--tbe-text-muted: #888888;
/* ── UI ── */
--tbe-border: #e8e8e8;
--tbe-radius: 10px;
--tbe-radius-sm: 6px;
--tbe-shadow: 0 2px 12px rgba(0,0,0,0.08);
--tbe-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
}
/* ─────────────────────────────────────────────────
FONT TOÀN SITE — đúng cách, không dùng !important
Ghi đè Flatsome bằng CSS specificity cao hơn.
Flatsome đặt font trên body — ta đặt trên html
để cascade tự nhiên xuống mọi element con.
─────────────────────────────────────────────────── */
html {
font-family: var(--tbe-font-body);
}
/* Flatsome override body font — ghi đè lại.
Flatsome 3.x dùng body.flatsome hoặc body trực tiếp */
body,
body.flatsome,
body.single,
body.single-post {
font-family: var(--tbe-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Heading dùng font heading token — áp rộng để cover Flatsome */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
font-family: var(--tbe-font-heading);
}
/* Input/button thường inherit sai — fix chuẩn */
button, input, optgroup, select, textarea {
font-family: inherit;
}
/* Flatsome dùng CSS var riêng — sync lại */
:root {
--font-body: var(--tbe-font-body);
--font-heading: var(--tbe-font-heading);
}
/* ─────────────────────────────────────────────────
TYPOGRAPHY — bài viết, tối ưu tiếng Việt có dấu
─────────────────────────────────────────────────── */
/* ── Typography bài viết ──────────────────────────────────
KHÔNG set width/max-width/margin/padding trên .entry-content
Flatsome quản lý layout container — plugin chỉ set font/color
─────────────────────────────────────────────────────────── */
.single-post .entry-content p,
.single-post .entry-content li,
.single .entry-content p,
.single .entry-content li {
font-size: 17px;
line-height: 1.9;
color: var(--tbe-text-2);
margin-bottom: 1.3rem;
font-weight: 400;
}
.single-post .entry-content > p:first-of-type,
.single .entry-content > p:first-of-type {
font-size: 18px;
line-height: 1.85;
color: var(--tbe-text);
font-weight: 500;
}
/* ─────────────────────────────────────────────────
HEADINGS trong bài viết — màu cam thương hiệu
Specificity cao hơn Flatsome: dùng cả body + article
h2 > h3 > h4 về kích cỡ và weight
/* ── Heading h2 > h3 > h4 — màu cam thương hiệu ──────────
body.single-post tăng specificity để thắng Flatsome
H2: 24px | H3: 19px (nhỏ hơn H2) | H4: 16px
Tất cả màu cam #F75E00
─────────────────────────────────────────────────────────── */
/* ── Heading sizes — !important chỉ cho font-size và color
vì Flatsome inject inline style .blog-single .entry-content h3 { 28px }
inline style > bất kỳ class selector nào → phải dùng !important
H1 > H2(24px) > H3(19px) > H4(16px) — đều màu cam
─────────────────────────────────────────────────────────── */
.blog-single .entry-content h2,
body.single-post .entry-content h2,
.single-post .entry-content h2 {
font-size: 24px !important;
font-weight: 800;
line-height: 1.35;
color: var(--tbe-brand) !important;
margin: 2.5rem 0 1rem;
padding-bottom: 10px;
border-bottom: 2px solid var(--tbe-brand-bg);
scroll-margin-top: 90px;
}
.blog-single .entry-content h3,
body.single-post .entry-content h3,
.single-post .entry-content h3 {
font-size: 19px !important;
font-weight: 700;
line-height: 1.4;
color: var(--tbe-brand) !important;
margin: 1.75rem 0 0.75rem;
scroll-margin-top: 90px;
}
.blog-single .entry-content h4,
body.single-post .entry-content h4,
.single-post .entry-content h4 {
font-size: 16px !important;
font-weight: 600;
color: var(--tbe-brand-dark) !important;
margin: 1.5rem 0 0.5rem;
scroll-margin-top: 90px;
}
/* ─────────────────────────────────────────────────
UTILITIES
─────────────────────────────────────────────────── */
#tbe-progress {
position: fixed; top: 0; left: 0;
height: 3px;
background: var(--tbe-brand);
width: 0;
z-index: 99999;
transition: width 0.1s linear;
pointer-events: none;
}
a.tbe-highlight {
color: var(--tbe-brand);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
padding: 1px 2px;
border-radius: 3px;
transition: background 0.18s, color 0.18s;
}
a.tbe-highlight:hover {
background: var(--tbe-brand);
color: #ffffff;
text-decoration: none;
}
.tbe-reading-time {
display: inline-block;
font-size: 13px;
color: var(--tbe-brand-dark);
background: var(--tbe-brand-bg);
padding: 2px 10px;
border-radius: 20px;
font-weight: 600;
}
.tbe-breadcrumb {
font-size: 13px;
color: var(--tbe-text-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 1.5rem;
}
.tbe-breadcrumb a {
color: var(--tbe-brand);
text-decoration: none;
}
.tbe-breadcrumb a:hover { text-decoration: underline; }
.tbe-breadcrumb__sep { color: #ccc; }
/* ─────────────────────────────────────────────────
TOC — INLINE + SIDEBAR
─────────────────────────────────────────────────── */
.tbe-toc__list,
.tbe-toc__sublist,
[class*="tbe-toc__list--"] { list-style: none; padding: 0; margin: 0; }
.tbe-toc__item { position: relative; }
.tbe-toc__link {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: 13px;
line-height: 1.45;
color: #555;
text-decoration: none;
transition: color 0.15s;
}
.tbe-toc__link:hover { color: var(--tbe-brand); }
.tbe-toc__link--active { color: var(--tbe-brand); font-weight: 700; }
.tbe-toc__num {
flex-shrink: 0;
min-width: 20px;
font-size: 12px;
font-weight: 700;
color: var(--tbe-brand);
line-height: 1.6;
}
.tbe-toc__sublist {
padding-left: 14px;
border-left: 1.5px solid var(--tbe-border);
margin: 2px 0 2px 8px;
}
.tbe-toc__sublist .tbe-toc__link {
font-size: 12px;
color: var(--tbe-text-muted);
padding: 4px 0;
}
.tbe-toc__sublist .tbe-toc__link--active {
color: var(--tbe-brand);
font-weight: 600;
}
.tbe-toc__item--active::before {
content: '';
position: absolute;
left: -1px;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--tbe-brand);
border-radius: 2px;
}
/* Inline TOC */
.tbe-toc--inline {
background: #fff;
border: 1px solid var(--tbe-border);
border-top: 3px solid var(--tbe-brand);
border-radius: var(--tbe-radius);
margin: 0 0 2rem;
overflow: hidden;
}
.tbe-toc__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
background: var(--tbe-brand-bg);
border-bottom: 1px solid #f0ebe6;
}
.tbe-toc__header-left {
display: flex;
align-items: center;
gap: 8px;
color: var(--tbe-brand-dark);
}
.tbe-toc__title {
font-size: 12px;
font-weight: 800;
color: var(--tbe-brand-dark);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tbe-toc__count {
font-size: 11px;
background: #fff;
color: var(--tbe-brand);
border: 1px solid #f0d5c5;
padding: 1px 7px;
border-radius: 20px;
font-weight: 700;
}
.tbe-toc__toggle {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: 1px solid #f0d5c5;
border-radius: 20px;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
color: var(--tbe-brand-dark);
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
}
.tbe-toc__toggle:hover { background: #fff; }
.tbe-toc__chevron { transition: transform 0.2s; }
.tbe-toc__toggle[aria-expanded="false"] .tbe-toc__chevron { transform: rotate(-90deg); }
.tbe-toc__body { padding: 10px 16px 4px; }
.tbe-toc__body--collapsed { display: none; }
.tbe-toc__pbar-wrap {
height: 2px;
background: #f0ebe6;
margin: 10px 0 6px;
border-radius: 1px;
overflow: hidden;
}
.tbe-toc__pbar {
height: 100%;
background: var(--tbe-brand);
width: 0;
transition: width 0.1s linear;
}
.tbe-toc__list > .tbe-toc__item {
border-bottom: 1px solid #f5f5f5;
padding-left: 2px;
}
.tbe-toc__list > .tbe-toc__item:last-child { border-bottom: none; }
/* ─────────────────────────────────────────────────
TOC FIXED — bên trái content area
Tự position vào vùng trống, không cần DOM sidebar
JS tính toán vị trí dựa trên content.getBoundingClientRect()
─────────────────────────────────────────────────── */
#tbe-toc-fixed {
position: fixed;
top: 110px;
/* left + width được set bởi JS */
max-height: calc(100vh - 130px);
overflow-y: auto;
overflow-x: hidden;
background: #fff;
border: 1px solid var(--tbe-border);
border-top: 3px solid var(--tbe-brand);
border-radius: var(--tbe-radius);
/* Ẩn ban đầu — JS show sau khi scroll qua inline TOC */
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 100;
}
#tbe-toc-fixed.tbe-toc--fixed-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
#tbe-toc-fixed .tbe-toc__header {
padding: 10px 12px;
background: var(--tbe-brand-bg);
border-bottom: 1px solid #f0ebe6;
display: flex;
align-items: center;
gap: 7px;
justify-content: flex-start;
/* sticky header trong TOC */
position: sticky;
top: 0;
z-index: 1;
}
#tbe-toc-fixed .tbe-toc__title {
font-size: 11px;
font-weight: 800;
color: var(--tbe-brand-dark);
text-transform: uppercase;
letter-spacing: 0.06em;
}
#tbe-toc-fixed .tbe-toc__body {
padding: 8px 0 8px;
}
/* List trong fixed TOC */
#tbe-toc-fixed .tbe-toc__list--d0 {
list-style: none;
padding: 0;
margin: 0;
/* Thanh dọc bên trái */
border-left: 2px solid var(--tbe-border);
margin-left: 12px;
}
#tbe-toc-fixed .tbe-toc__item {
position: relative;
}
/* Active indicator — thanh cam đè lên border-left */
#tbe-toc-fixed .tbe-toc__item--active > .tbe-toc__link::before {
content: '';
position: absolute;
left: -14px;
top: 0;
bottom: 0;
width: 2px;
background: var(--tbe-brand);
border-radius: 1px;
}
#tbe-toc-fixed .tbe-toc__link {
display: block;
padding: 5px 12px 5px 14px;
font-size: 12px;
line-height: 1.4;
color: #666;
text-decoration: none;
position: relative;
transition: color 0.15s, background 0.15s;
}
#tbe-toc-fixed .tbe-toc__link:hover {
color: var(--tbe-brand);
background: var(--tbe-brand-bg);
}
#tbe-toc-fixed .tbe-toc__link--active {
color: var(--tbe-brand);
font-weight: 700;
background: var(--tbe-brand-bg);
}
/* H2 link */
#tbe-toc-fixed .tbe-toc__link--d0 {
font-size: 12px;
font-weight: 500;
}
/* H3 link — indent + nhỏ hơn */
#tbe-toc-fixed .tbe-toc__list--d1 {
list-style: none;
padding: 0;
margin: 0 0 0 10px;
border-left: 1.5px solid #f0f0f0;
}
#tbe-toc-fixed .tbe-toc__link--d1 {
font-size: 11px;
color: #888;
padding-left: 12px;
}
/* H4 link */
#tbe-toc-fixed .tbe-toc__list--d2 {
list-style: none;
padding: 0;
margin: 0 0 0 8px;
border-left: 1px solid #f5f5f5;
}
#tbe-toc-fixed .tbe-toc__link--d2 {
font-size: 11px;
color: #aaa;
padding-left: 10px;
}
/* Số thứ tự H2 */
#tbe-toc-fixed .tbe-toc__num {
display: inline-block;
width: 16px;
font-size: 10px;
font-weight: 800;
color: var(--tbe-brand);
flex-shrink: 0;
}
/* Scrollbar */
#tbe-toc-fixed::-webkit-scrollbar { width: 3px; }
#tbe-toc-fixed::-webkit-scrollbar-thumb { background: #e8e0dc; border-radius: 2px; }
#tbe-toc-fixed::-webkit-scrollbar-track { background: transparent; }
/* Ẩn hoàn toàn khi màn hình nhỏ không đủ chỗ
(JS cũng kiểm tra và set display:none) */
.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id] { scroll-margin-top: 90px; }
/* ─────────────────────────────────────────────────
HERO TRAIL
─────────────────────────────────────────────────── */
.tbe-hero {
position: relative;
width: 100%;
background-color: #2c1400;
background-size: cover;
background-position: center top; /* top để không crop mất đầu người */
border-radius: 14px;
overflow: hidden;
display: flex;
align-items: flex-end;
margin-bottom: 2rem;
/* Chiều cao tối thiểu để content không bị đẩy lên quá ngắn */
min-height: 280px;
}
.tbe-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(44,20,0,0.1) 10%, rgba(44,20,0,0.88) 100%);
}
.tbe-hero__body {
position: relative;
z-index: 1;
padding: 2rem 2.5rem;
width: 100%;
}
.tbe-hero__badge {
display: inline-block;
background: var(--tbe-brand);
color: #fff;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 10px;
border-radius: 4px;
margin-bottom: 12px;
}
.tbe-hero__title {
font-size: 34px;
font-weight: 900;
color: #fff;
line-height: 1.2;
margin: 0 0 8px;
}
.tbe-hero__subtitle {
font-size: 16px;
color: rgba(255,255,255,0.8);
margin: 0 0 6px;
font-style: italic;
}
.tbe-hero__meta {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin: 0;
}
/* ─────────────────────────────────────────────────
RACE STATS
─────────────────────────────────────────────────── */
.tbe-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin: 1.75rem 0 2rem;
}
.tbe-stats__item {
background: #fff;
border: 1px solid var(--tbe-border);
border-top: 3px solid var(--tbe-brand);
border-radius: var(--tbe-radius);
padding: 16px 10px;
text-align: center;
}
.tbe-stats__num {
display: block;
font-size: 26px;
font-weight: 900;
color: var(--tbe-brand);
line-height: 1;
margin-bottom: 5px;
font-variant-numeric: tabular-nums;
}
.tbe-stats__lbl {
display: block;
font-size: 11px;
color: var(--tbe-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* ─────────────────────────────────────────────────
CALLOUT BOX
─────────────────────────────────────────────────── */
.tbe-callout {
border-left: 4px solid;
padding: 14px 18px;
margin: 1.75rem 0;
}
.tbe-callout__label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 7px;
}
.tbe-callout__body { font-size: 15px; line-height: 1.7; }
.tbe-callout__body p { margin: 0; font-size: 15px; }
.tbe-quote {
border-left: 4px solid var(--tbe-brand);
padding: 8px 24px;
margin: 1.75rem 0;
font-size: 21px;
font-style: italic;
line-height: 1.55;
color: var(--tbe-text);
}
/* ─────────────────────────────────────────────────
MACRO CARD
─────────────────────────────────────────────────── */
.tbe-macro { margin: 2rem 0; }
.tbe-macro__heading {
font-size: 16px;
font-weight: 800;
color: var(--tbe-text);
margin: 0 0 1rem;
text-align: center;
}
.tbe-macro__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.tbe-macro__card {
background: #fff;
border: 1px solid var(--tbe-border);
border-top: 3px solid;
border-radius: var(--tbe-radius);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 6px;
}
.tbe-macro__icon {
width: 40px; height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 4px;
}
.tbe-macro__name { font-size: 15px; font-weight: 800; }
.tbe-macro__role { font-size: 12px; color: #666; font-style: italic; }
.tbe-macro__tip {
font-size: 13px;
color: var(--tbe-text-2);
line-height: 1.65;
border-top: 1px solid var(--tbe-border);
padding-top: 8px;
margin-top: 4px;
}
/* ─────────────────────────────────────────────────
NUTRITION TIMELINE
─────────────────────────────────────────────────── */
.tbe-timeline { margin: 2rem 0; }
.tbe-timeline__section { margin-bottom: 1.5rem; }
.tbe-timeline__sec-title {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tbe-brand);
border-left: 3px solid var(--tbe-brand);
padding-left: 10px;
margin-bottom: 12px;
}
.tbe-timeline__row {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 10px 0;
border-bottom: 0.5px solid #f0f0f0;
}
.tbe-timeline__row:last-child { border-bottom: none; }
.tbe-timeline__dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--tbe-brand);
flex-shrink: 0;
margin-top: 5px;
}
.tbe-timeline__time {
font-size: 13px;
font-weight: 700;
color: var(--tbe-brand);
margin-bottom: 3px;
}
.tbe-timeline__body { font-size: 14px; color: var(--tbe-text-2); line-height: 1.65; }
/* ─────────────────────────────────────────────────
FAQ ACCORDION
─────────────────────────────────────────────────── */
.tbe-faq { margin: 2rem 0; }
.tbe-faq__heading {
font-size: 18px;
font-weight: 800;
color: var(--tbe-brand);
margin: 0 0 1rem;
}
.tbe-faq__item { border-bottom: 1px solid #ebebeb; }
.tbe-faq__item:first-of-type { border-top: 1px solid #ebebeb; }
.tbe-faq__q {
width: 100%;
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 0;
font-size: 15px;
font-weight: 600;
color: var(--tbe-text);
text-align: left;
font-family: inherit;
transition: color 0.15s;
}
.tbe-faq__q:hover,
.tbe-faq__q[aria-expanded="true"] { color: var(--tbe-brand); }
.tbe-faq__arrow { flex-shrink: 0; color: #aaa; transition: transform 0.2s; }
.tbe-faq__q[aria-expanded="true"] .tbe-faq__arrow {
transform: rotate(180deg);
color: var(--tbe-brand);
}
.tbe-faq__a {
font-size: 14px;
line-height: 1.75;
color: var(--tbe-text-2);
padding: 0 0 14px;
}
/* ─────────────────────────────────────────────────
HYDRATION GUIDE
─────────────────────────────────────────────────── */
.tbe-hydration {
margin: 2rem 0;
background: #fff;
border: 1px solid var(--tbe-border);
border-radius: 12px;
overflow: hidden;
}
.tbe-hydration__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid #ebebeb;
}
.tbe-hydration__step {
padding: 1.25rem 1rem;
text-align: center;
border-right: 1px solid #ebebeb;
}
.tbe-hydration__step:last-child { border-right: none; }
.tbe-hydration__drop { display: flex; justify-content: center; margin-bottom: 8px; }
.tbe-hydration__step-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--tbe-text-muted); margin-bottom: 4px;
}
.tbe-hydration__step-val {
font-size: 13px; font-weight: 600;
color: var(--tbe-brand-dark); line-height: 1.4;
}
.tbe-hydration__urine { padding: 1rem 1.25rem; }
.tbe-hydration__urine-title {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--tbe-text-muted); margin-bottom: 10px;
}
.tbe-hydration__urine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.tbe-hydration__urine-item { border-radius: 8px; padding: 10px 8px; text-align: center; }
.tbe-hydration__urine-lbl { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.tbe-hydration__urine-status { font-size: 11px; line-height: 1.3; }
.tbe-hydration__note {
margin: 0 1.25rem 1.25rem;
border-left: 3px solid var(--tbe-brand);
background: var(--tbe-brand-bg);
padding: 10px 14px;
font-size: 13px; color: var(--tbe-text-2); line-height: 1.65;
}
/* ─────────────────────────────────────────────────
GEAR LIST
─────────────────────────────────────────────────── */
.tbe-gear {
background: #fff;
border: 1px solid var(--tbe-border);
border-radius: var(--tbe-radius);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.tbe-gear__heading {
font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--tbe-brand);
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--tbe-border);
}
.tbe-gear__list { list-style: none; padding: 0; margin: 0; }
.tbe-gear__item {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; padding: 8px 0;
border-bottom: 0.5px solid #f5f5f5;
gap: 8px;
}
.tbe-gear__item:last-child { border-bottom: none; }
.tbe-gear__name { color: #333; font-weight: 500; }
.tbe-gear__brand { color: var(--tbe-text-muted); font-size: 12px; text-align: right; text-decoration: none; }
a.tbe-gear__brand:hover { color: var(--tbe-brand); }
/* ─────────────────────────────────────────────────
STYLED LIST — hỗ trợ , ,
─────────────────────────────────────────────────── */
.tbe-list { margin: 1.5rem 0; }
.tbe-list__heading {
font-size: 14px; font-weight: 800;
color: var(--tbe-text);
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 12px; padding-bottom: 8px;
border-bottom: 2px solid var(--tbe-brand-bg);
}
.tbe-list__ul,
.tbe-list__ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tbe-list__item {
display: flex; align-items: flex-start; gap: 10px;
padding: 9px 12px; border-radius: var(--tbe-radius-sm);
transition: background 0.15s;
}
.tbe-list__item:hover { background: var(--tbe-brand-bg); }
.tbe-list__icon { flex-shrink: 0; margin-top: 2px; line-height: 1; }
.tbe-list__num {
flex-shrink: 0;
width: 24px; height: 24px;
background: var(--tbe-brand);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
margin-top: 1px;
}
.tbe-list__text { font-size: 15px; line-height: 1.65; color: var(--tbe-text-2); flex: 1; }
.tbe-list__text b,
.tbe-list__text strong { font-weight: 700; color: var(--tbe-text); }
.tbe-list__text i,
.tbe-list__text em { font-style: italic; }
.tbe-list__text a { color: var(--tbe-brand); text-decoration: underline; }
.tbe-list__text a:hover { color: var(--tbe-brand-dark); }
/* ─────────────────────────────────────────────────
COMPARISON TABLE
Winner = xanh lá (--tbe-green)
─────────────────────────────────────────────────── */
.tbe-compare { margin: 2rem 0; }
.tbe-compare__heading { font-size: 18px; font-weight: 800; color: var(--tbe-text); margin: 0 0 1rem; }
.tbe-compare__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
border-radius: var(--tbe-radius);
overflow: hidden;
box-shadow: 0 0 0 1px var(--tbe-border);
}
.tbe-compare__th {
padding: 12px 16px;
background: var(--tbe-text);
color: #fff;
font-size: 13px; font-weight: 800;
text-align: left;
}
.tbe-compare__th--a { background: var(--tbe-brand); }
.tbe-compare__th--b { background: var(--tbe-green); } /* Cột B xanh lá */
.tbe-compare__row {
border-bottom: 1px solid #f0f0f0;
transition: background 0.12s;
}
.tbe-compare__row:last-child { border-bottom: none; }
.tbe-compare__row:hover { background: #fafafa; }
.tbe-compare__feat {
padding: 12px 16px;
font-weight: 600;
color: var(--tbe-text);
background: #fafafa;
width: 30%;
}
.tbe-compare__val { padding: 12px 16px; color: var(--tbe-text-2); line-height: 1.5; }
/* Winner cell — xanh lá */
.tbe-compare__val--win {
background: var(--tbe-green-bg);
color: var(--tbe-green-dark);
font-weight: 700;
}
.tbe-compare__badge {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
background: var(--tbe-green); /* Badge xanh lá */
color: #fff;
border-radius: 50%;
font-size: 10px; font-weight: 800;
margin-right: 6px;
flex-shrink: 0;
vertical-align: middle;
}
.tbe-compare__verdict {
margin-top: 12px;
background: var(--tbe-green-bg);
border-left: 4px solid var(--tbe-green);
padding: 12px 16px;
font-size: 14px; color: #1a4731; line-height: 1.65;
}
.tbe-compare__verdict-label {
font-weight: 800;
text-transform: uppercase;
font-size: 11px; letter-spacing: 0.06em;
color: var(--tbe-green); margin-right: 8px;
}
/* ─────────────────────────────────────────────────
INLINE PRODUCT (WooCommerce)
─────────────────────────────────────────────────── */
.tbe-product-inline { margin: 1.75rem 0; }
.tbe-product-inline__context {
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--tbe-text-muted); margin-bottom: 8px;
}
.tbe-product-inline__card {
display: flex; align-items: center; gap: 16px;
background: #fff;
border: 1px solid var(--tbe-border);
border-left: 4px solid var(--tbe-brand);
border-radius: var(--tbe-radius);
padding: 16px;
transition: box-shadow 0.18s;
text-decoration: none;
}
.tbe-product-inline__card:hover { box-shadow: var(--tbe-shadow-hover); }
.tbe-product-inline__img-wrap { flex-shrink: 0; }
.tbe-product-inline__img {
width: 80px; height: 80px;
object-fit: cover; border-radius: 8px; display: block;
}
.tbe-product-inline__info { flex: 1; min-width: 0; }
.tbe-product-inline__name {
display: block;
font-size: 15px; font-weight: 700;
color: var(--tbe-text); text-decoration: none;
margin-bottom: 4px; line-height: 1.3;
}
.tbe-product-inline__name:hover { color: var(--tbe-brand); }
.tbe-product-inline__price {
font-size: 16px; font-weight: 800;
color: var(--tbe-brand); margin-bottom: 10px;
}
.tbe-product-inline__price .woocommerce-Price-amount { color: var(--tbe-brand); }
.tbe-product-inline__btn {
display: inline-block;
background: var(--tbe-brand); color: #fff;
font-size: 13px; font-weight: 700;
padding: 7px 18px; border-radius: var(--tbe-radius-sm);
text-decoration: none;
transition: background 0.15s;
}
.tbe-product-inline__btn:hover { background: var(--tbe-brand-dark); color: #fff; }
/* ─────────────────────────────────────────────────
RELATED POSTS
─────────────────────────────────────────────────── */
.tbe-related {
margin: 2.5rem 0 1rem;
padding-top: 1.5rem;
border-top: 2px solid var(--tbe-brand-bg);
}
.tbe-related__heading {
font-size: 16px; font-weight: 800;
color: var(--tbe-text);
text-transform: uppercase; letter-spacing: 0.05em;
margin: 0 0 1.25rem;
display: flex; align-items: center; gap: 10px;
}
.tbe-related__heading::after {
content: ''; flex: 1;
height: 2px; background: var(--tbe-brand); border-radius: 1px;
}
.tbe-related__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.tbe-related__card {
display: flex; flex-direction: column;
text-decoration: none;
background: #fff; border: 1px solid var(--tbe-border);
border-radius: var(--tbe-radius); overflow: hidden;
transition: transform 0.18s, box-shadow 0.18s;
}
.tbe-related__card:hover {
transform: translateY(-3px);
box-shadow: var(--tbe-shadow-hover);
}
.tbe-related__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.tbe-related__img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.3s;
}
.tbe-related__card:hover .tbe-related__img { transform: scale(1.04); }
.tbe-related__cat {
position: absolute; top: 8px; left: 8px;
background: var(--tbe-brand); color: #fff;
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 2px 8px; border-radius: 4px;
}
.tbe-related__body {
padding: 12px 14px 14px;
flex: 1; display: flex; flex-direction: column;
}
.tbe-related__title {
font-size: 14px; font-weight: 700;
color: var(--tbe-text); line-height: 1.4;
margin-bottom: 8px; flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tbe-related__card:hover .tbe-related__title { color: var(--tbe-brand); }
.tbe-related__meta { font-size: 11px; color: #999; font-weight: 500; }
/* ─────────────────────────────────────────────────
DIFFERENCE TABLE (trail_diff) — v9
Không có thắng/thua — chỉ liệt kê khác biệt
Striped rows, 2 màu xen kẽ cho dễ đọc
─────────────────────────────────────────────────── */
.tbe-diff { margin: 2rem 0; }
.tbe-diff__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
border-radius: var(--tbe-radius);
overflow: hidden;
box-shadow: 0 0 0 1px var(--tbe-border);
}
.tbe-diff__th {
padding: 12px 16px;
font-size: 13px;
font-weight: 800;
text-align: left;
}
.tbe-diff__th--feat { background: var(--tbe-text); color: #fff; width: 30%; }
.tbe-diff__th--a { background: var(--tbe-brand); color: #fff; }
.tbe-diff__th--b { background: var(--tbe-green); color: #fff; }
.tbe-diff__row--even { background: #fff; }
.tbe-diff__row--odd { background: #fafafa; }
.tbe-diff__row:hover { background: var(--tbe-brand-bg); }
.tbe-diff__feat {
padding: 11px 16px;
font-weight: 600;
color: var(--tbe-text);
border-bottom: 1px solid #f0f0f0;
}
.tbe-diff__val {
padding: 11px 16px;
color: var(--tbe-text-2);
line-height: 1.5;
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
}
.tbe-diff__row:last-child .tbe-diff__feat,
.tbe-diff__row:last-child .tbe-diff__val { border-bottom: none; }
/* ─────────────────────────────────────────────────
TRAIL IMAGE (trail_image) — v10
─────────────────────────────────────────────────── */
.tbe-img {
margin: 2rem 0;
display: block;
}
/* Wrap — chứa ảnh + zoom icon */
.tbe-img__wrap {
display: block;
position: relative;
overflow: hidden;
border-radius: var(--tbe-radius);
line-height: 0; /* xóa khoảng trắng dưới img */
}
.tbe-img__img {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
}
/* Zoom on hover */
.tbe-img--zoom .tbe-img__wrap:hover .tbe-img__img {
transform: scale(1.04);
}
/* Zoom icon overlay */
.tbe-img__zoom-icon {
position: absolute;
bottom: 10px; right: 10px;
width: 34px; height: 34px;
background: rgba(0,0,0,.45);
backdrop-filter: blur(4px);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.tbe-img__wrap:hover .tbe-img__zoom-icon { opacity: 1; }
/* Caption */
.tbe-img__caption {
font-size: 13px;
color: var(--tbe-text-muted);
text-align: center;
margin-top: 8px;
line-height: 1.5;
font-style: italic;
}
/* ── Style variants ── */
/* Default — bo góc, shadow nhẹ */
.tbe-img--default .tbe-img__wrap {
box-shadow: var(--tbe-shadow);
}
/* Full bleed — tràn khỏi content width */
.tbe-img--fullbleed {
margin-left: calc(-1 * max(0px, (100vw - 760px) / 2 + 0px));
margin-right: calc(-1 * max(0px, (100vw - 760px) / 2 + 0px));
width: 100vw;
max-width: 100vw;
border-radius: 0;
}
.tbe-img--fullbleed .tbe-img__wrap { border-radius: 0; }
/* Float left */
.tbe-img--float-left {
float: left;
width: 45%;
margin: 0.5rem 1.75rem 1rem 0;
clear: left;
}
/* Float right */
.tbe-img--float-right {
float: right;
width: 45%;
margin: 0.5rem 0 1rem 1.75rem;
clear: right;
}
/* Clearfix sau float */
.tbe-img--float-left + *::after,
.tbe-img--float-right + *::after {
content: ''; display: table; clear: both;
}
/* Frame — viền + padding như ảnh in */
.tbe-img--frame .tbe-img__wrap {
border: 1px solid var(--tbe-border);
padding: 8px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
border-radius: 4px;
}
.tbe-img--frame .tbe-img__img { border-radius: 2px; }
/* Cinematic — crop 21:9 */
.tbe-img--cinematic .tbe-img__wrap {
aspect-ratio: 21 / 9;
border-radius: 10px;
box-shadow: var(--tbe-shadow);
}
.tbe-img--cinematic .tbe-img__img {
height: 100%;
object-fit: cover;
}
/* Lightbox overlay (simple CSS-only hint — JS nếu muốn full lightbox) */
.tbe-img__lightbox { cursor: zoom-in; }
/* ─────────────────────────────────────────────────
PRODUCTS GRID (trail_products) — v10
─────────────────────────────────────────────────── */
.tbe-products { margin: 2rem 0; }
.tbe-products__header { margin-bottom: 1.25rem; }
.tbe-products__heading {
font-size: 18px; font-weight: 800;
color: var(--tbe-text); margin: 0 0 4px;
display: flex; align-items: center; gap: 10px;
}
.tbe-products__heading::after {
content: ''; flex: 1;
height: 2px; background: var(--tbe-brand); border-radius: 1px;
}
.tbe-products__context { font-size: 13px; color: var(--tbe-text-muted); margin: 0; }
/* Grid layouts */
.tbe-products__grid {
display: grid;
gap: 16px;
}
.tbe-products__grid--2col { grid-template-columns: repeat(2, 1fr); }
.tbe-products__grid--3col { grid-template-columns: repeat(3, 1fr); }
.tbe-products__grid--4col { grid-template-columns: repeat(4, 1fr); }
/* Product card */
.tbe-products__item {
background: #fff;
border: 1px solid var(--tbe-border);
border-radius: var(--tbe-radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.18s, box-shadow 0.18s;
}
.tbe-products__item:hover {
transform: translateY(-3px);
box-shadow: var(--tbe-shadow-hover);
}
.tbe-products__img-link { display: block; }
.tbe-products__img-wrap {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f9f9f9;
}
.tbe-products__img {
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
display: block;
padding: 8px;
transition: transform 0.3s;
}
.tbe-products__item:hover .tbe-products__img { transform: scale(1.05); }
.tbe-products__badge {
position: absolute; top: 8px; left: 8px;
font-size: 10px; font-weight: 700;
padding: 2px 8px; border-radius: 4px;
text-transform: uppercase; letter-spacing: 0.05em;
}
.tbe-products__badge--out {
background: #f0f0f0; color: #888;
}
.tbe-products__info {
padding: 12px;
display: flex; flex-direction: column;
gap: 6px; flex: 1;
}
.tbe-products__name {
font-size: 13px; font-weight: 700;
color: var(--tbe-text); text-decoration: none;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tbe-products__name:hover { color: var(--tbe-brand); }
.tbe-products__price {
font-size: 15px; font-weight: 800;
color: var(--tbe-brand);
margin-top: auto;
}
.tbe-products__price .woocommerce-Price-amount { color: var(--tbe-brand); }
.tbe-products__price ins { text-decoration: none; }
.tbe-products__price del { color: var(--tbe-text-muted); font-size: 12px; }
.tbe-products__btn {
display: block;
text-align: center;
background: var(--tbe-brand); color: #fff;
font-size: 12px; font-weight: 700;
padding: 8px;
border-radius: var(--tbe-radius-sm);
text-decoration: none;
transition: background 0.15s;
margin-top: 4px;
}
.tbe-products__btn:hover { background: var(--tbe-brand-dark); color: #fff; }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — Consolidated Mobile CSS v17
1100px → 900px → 640px → 600px → 480px → 380px
═══════════════════════════════════════════════════════════ */
/* ── 1100px: Fixed TOC ẩn ── */
@media (max-width: 1100px) {
#tbe-toc-fixed { display: none !important; }
.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id] { scroll-margin-top: 70px; }
}
/* ── 900px: Hero thu nhỏ ── */
@media (max-width: 900px) {
.tbe-hero__title { font-size: 26px; }
.tbe-hero__body { padding: 1.75rem 2rem; }
/* Tablet: giảm chiều cao */
.tbe-hero { min-height: 240px; }
}
/* ── 640px: Products grid ── */
@media (max-width: 640px) {
.tbe-products__grid--3col,
.tbe-products__grid--4col { grid-template-columns: repeat(2, 1fr); }
}
/* ── 600px: Main mobile breakpoint ── */
@media (max-width: 600px) {
/* Typography */
/* Không reset padding entry-content — Flatsome quản lý padding */
.single-post .entry-content p,
.single-post .entry-content li,
body .entry-content p,
body .entry-content li { font-size: 16px; line-height: 1.8; }
.single-post .entry-content > p:first-of-type,
body .entry-content > p:first-of-type { font-size: 17px; }
body .entry-content h2 { font-size: 21px; margin: 2rem 0 0.75rem ; }
body .entry-content h3 { font-size: 18px; }
body .entry-content h4 { font-size: 15px; }
/* Hero mobile — aspect ratio thay vì height cố định */
.tbe-hero {
border-radius: 10px;
min-height: 0;
/* Aspect ratio 4:3 trên mobile — không bị quá ngắn hay quá cao */
aspect-ratio: 4 / 3;
max-height: 380px;
/* Đảm bảo content luôn show ở bottom */
align-items: flex-end;
}
/* Override height từ UX Builder nếu có */
.tbe-hero[style*="height"] {
height: auto !important;
aspect-ratio: 4 / 3;
max-height: 380px;
}
.tbe-hero__title { font-size: 20px; line-height: 1.25; }
.tbe-hero__body { padding: 1.25rem; }
.tbe-hero__subtitle { font-size: 13px; }
.tbe-hero__meta { font-size: 11px; }
/* Overlay đậm hơn trên mobile để text dễ đọc */
.tbe-hero__overlay {
background: linear-gradient(
to bottom,
rgba(44,20,0,0) 0%,
rgba(44,20,0,0.6) 50%,
rgba(44,20,0,0.92) 100%
);
}
/* Progress bar */
#tbe-progress { height: 2px; }
/* TOC Inline */
.tbe-toc--inline { margin: 0 0 1.25rem; border-radius: 8px; }
.tbe-toc__header { padding: 9px 12px; flex-wrap: nowrap; gap: 6px; }
.tbe-toc__header-left { flex: 1; min-width: 0; gap: 5px; overflow: hidden; }
.tbe-toc__title { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbe-toc__count { font-size: 10px; flex-shrink: 0; }
.tbe-toc__toggle { font-size: 10px; padding: 2px 8px; flex-shrink: 0; }
.tbe-toc__body { padding: 6px 12px 4px; }
.tbe-toc__link { font-size: 12px; padding: 5px 0; }
.tbe-toc__sublist { padding-left: 10px; margin-left: 5px; }
.tbe-toc__sublist .tbe-toc__link { font-size: 11px; }
.tbe-toc__num { min-width: 16px; font-size: 11px; }
/* Stats */
.tbe-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tbe-stats__num { font-size: 22px; }
.tbe-stats__lbl { font-size: 10px; }
/* Callout */
.tbe-callout { padding: 11px 14px; }
.tbe-callout__label { font-size: 10px; }
.tbe-callout__body { font-size: 14px; }
.tbe-quote { font-size: 17px; padding: 6px 16px; }
/* Macro — 1 cột */
.tbe-macro__grid { grid-template-columns: 1fr; gap: 8px; }
.tbe-macro__heading { font-size: 15px; }
/* Timeline */
.tbe-timeline__sec-title { font-size: 11px; }
.tbe-timeline__time { font-size: 12px; }
.tbe-timeline__body { font-size: 13px; }
.tbe-timeline__dot { width: 8px; height: 8px; }
/* FAQ */
.tbe-faq__heading { font-size: 16px; }
.tbe-faq__q { font-size: 14px; padding: 11px 0; }
.tbe-faq__a { font-size: 13px; }
/* Hydration — 1 cột */
.tbe-hydration__steps {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
}
.tbe-hydration__step {
border-right: none;
border-bottom: 1px solid #ebebeb;
padding: 1rem;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
}
.tbe-hydration__step:last-child { border-bottom: none; }
.tbe-hydration__drop { margin-bottom: 0; }
.tbe-hydration__urine-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.tbe-hydration__urine { padding: 0.875rem 1rem; }
.tbe-hydration__note { margin: 0 1rem 1rem; font-size: 12px; }
/* Gear */
.tbe-gear { padding: 0.875rem 1rem; }
.tbe-gear__item { font-size: 12px; }
.tbe-gear__brand { max-width: 55%; font-size: 11px; }
/* Styled list */
.tbe-list__item { padding: 7px 8px; }
.tbe-list__text { font-size: 14px; }
/* Compare table — horizontal scroll */
.tbe-compare__table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
border-radius: 0;
}
.tbe-compare__table thead,
.tbe-compare__table tbody,
.tbe-compare__table tr { display: table-row-group; white-space: normal; }
.tbe-compare__table thead { display: table-header-group; }
.tbe-compare__th { font-size: 12px; padding: 10px 12px; }
.tbe-compare__feat { min-width: 80px; font-size: 12px; padding: 10px 12px; }
.tbe-compare__val { min-width: 100px; font-size: 12px; padding: 10px 12px; }
.tbe-compare__verdict { font-size: 13px; padding: 10px 14px; }
/* Diff table — horizontal scroll */
.tbe-diff__table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Trail Image */
.tbe-img--float-left,
.tbe-img--float-right {
float: none;
width: 100%;
margin: 1.25rem 0;
}
.tbe-img--fullbleed {
margin-left: -1rem;
margin-right: -1rem;
width: calc(100% + 2rem);
max-width: none;
border-radius: 0;
}
/* Inline Product */
.tbe-product-inline__card {
flex-direction: column;
align-items: flex-start;
padding: 12px;
gap: 10px;
}
.tbe-product-inline__img { width: 60px; height: 60px; }
/* Products Grid */
.tbe-products__grid--2col,
.tbe-products__grid--3col,
.tbe-products__grid--4col { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tbe-products__info { padding: 8px 10px; }
.tbe-products__name { font-size: 12px; }
.tbe-products__price { font-size: 13px; }
.tbe-products__btn { font-size: 11px; padding: 6px 8px; }
/* Related */
.tbe-related__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tbe-related__title { font-size: 13px; }
.tbe-related__heading { font-size: 14px; }
.tbe-related__body { padding: 10px 12px; }
}
/* ── 480px: Nhỏ hơn ── */
@media (max-width: 480px) {
.tbe-hero__title { font-size: 17px; }
.tbe-hero__body { padding: 1rem 1rem 1.25rem; }
.tbe-hero { aspect-ratio: 3 / 2; max-height: 300px; }
.tbe-hero[style*="height"] { height: auto !important; aspect-ratio: 3 / 2; max-height: 300px; }
/* TOC toggle text ẩn, chỉ giữ icon */
.tbe-toc__toggle-label { display: none; }
.tbe-toc__toggle { padding: 3px 6px; }
/* Related 1 cột */
.tbe-related__grid { grid-template-columns: 1fr; }
/* Products vẫn 2 cột */
.tbe-products__name { -webkit-line-clamp: 3; }
}
/* ── 380px: Very small ── */
@media (max-width: 380px) {
.tbe-hero__title { font-size: 15px; }
.tbe-hero { aspect-ratio: 3 / 2; max-height: 260px; }
.tbe-hero[style*="height"] { height: auto !important; }
.tbe-toc__count { display: none; }
.tbe-stats { grid-template-columns: repeat(2, 1fr); }
.tbe-stats__num { font-size: 18px; }
.tbe-macro__grid { grid-template-columns: 1fr; }
.tbe-products__grid { grid-template-columns: 1fr; }
.single-post .entry-content h2,
.single .entry-content h2 { font-size: 19px; }
.single-post .entry-content h3,
.single .entry-content h3 { font-size: 16px; }
.single-post .entry-content p,
.single .entry-content p { font-size: 15px; line-height: 1.75; }
}