/* Theme Name: BAONHAT
   Version: 2.1.2
   Description: Wa-Modern News Theme */
/* --- 1. RESET & CƠ BẢN --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; font-family: 'Noto Serif JP', serif; font-size: 16px; line-height: 1.8; color: #2C2C2C; overflow-x: clip; background-color: #FFFFFF; }
body.home { background-color: var(--bn-page-bg, #0a0a1a); overflow-x: clip; }
h1, h2, h3, h4 { font-family: 'Noto Serif JP', serif; font-weight: 700; }
.container-inner { width: min(1640px, 98%); margin: 0 auto; padding: 10px; }
.container { width: min(1640px, 98%); margin: 0 auto; }
.full { width: 100%; }
.category-description { display: none; }
/* === IMAGE === */
img { max-width: 100%; height: auto; display: block; }
/* --- Image alignment trong post content (alignleft / alignright / aligncenter) --- */
.alignleft, .post-article-content .alignleft { float: left; margin: 0.25em 1.75em 1.2em 0; width: 50%; }
.alignright, .post-article-content .alignright { float: right; margin: 0.25em 0 1.2em 1.75em; width: 50%; }
.aligncenter, .post-article-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft img, .alignright img { width: 100%; height: auto; border-radius: 8px; display: block; }
.wp-caption, figure.wp-block-image { max-width: 100%; }
figcaption, .wp-caption-text { font-size: 13px; color: #777; padding: 6px 8px; text-align: center; font-style: italic; line-height: 1.5; background: #f8f8f8; border-radius: 0 0 6px 6px; }
.post-article-content::after { content: ""; display: table; clear: both; }
@media (max-width: 468px) {
  .alignleft, .alignright, .post-article-content .alignleft, .post-article-content .alignright { float: none; width: 100%; margin: 0 0 1.2em 0; }
}
.post-thumb, .thumb-wrapper, .rel-thumb, .news-item-thumb, .main-category-full .post-archive { overflow: hidden; }
.post-thumb { aspect-ratio: 16/9; position: relative; }
.post-thumb img, .thumb-wrapper img, .rel-thumb img, .news-item-thumb img, .main-category-full .post-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* --- 2. SITE HEADER & BACKGROUND --- */
.site-header { min-height: 250px; position: relative; overflow: visible; display: flex; flex-direction: column; justify-content: space-between; z-index: 10; pointer-events: none; background-color: #FFFFFF; }
.site-header * { pointer-events: auto; }
.header-bg-animation { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--header-bg); background-size: cover; background-position: center; image-rendering: -webkit-optimize-contrast; animation: kenBurnsFade 5s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes kenBurnsFade {
0% { opacity: 0; transform: scale(1.1) translateY(-10px); }
20% { opacity: 1; }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* --- 3. LOGO & NAVIGATION --- */
.header-main-content { display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 20; }
.main-logo-img { max-width: 375px; height: auto; padding: 20px 0; display: block; animation: logoFadeIn 1s ease-out 0.5s both; position: relative; }
@keyframes logoFadeIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
#site-navigation.main-navigation { position: relative; z-index: 9999 !important; }
.mega-menu-wrap { z-index: 9999 !important; }
/* --- 4. STICKY CONTAINER --- */
.sticky-header-container { position: -webkit-sticky; position: sticky; top: 0; background: transparent; margin-top: -48px; z-index: 1000; }
.header-category-pos { position: relative; width: 100%; z-index: 10; background: transparent; }
.category-outer-box { display: flex !important; align-items: center !important; justify-content: flex-start !important; position: relative; gap: 8px; z-index: 10; width: 100%; min-width: 0; background: transparent; }
.category-scroll-container { flex: 1 1 0 !important; min-width: 0 !important; overflow-x: auto; scrollbar-width: none; position: relative; max-width: none; background: transparent; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; }
.category-outer-box:not(.has-cat-overflow) .category-flex-list { margin-left: auto; }
.category-outer-box .cat-nav-btn { display: none; }
.category-outer-box.has-cat-overflow .cat-nav-btn { display: flex; }
.cat-nav-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.category-scroll-container::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
.category-outer-box.has-cat-overflow #categoryScroll, .category-outer-box.has-cat-overflow #categoryScroll .cat-tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.category-outer-box.has-cat-overflow #categoryScroll { cursor: grab; }
.category-outer-box.has-cat-overflow #categoryScroll.is-cat-dragging { cursor: grabbing; }
.category-outer-box.has-cat-overflow #categoryScroll.is-cat-dragging .cat-tab { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
.category-scroll-container { scroll-behavior: auto; }
}
.category-flex-list { display: flex; flex-wrap: nowrap; align-items: flex-end; position: relative; width: max-content; margin-inline: 0; padding-bottom: 5px; }
.cat-tab { display: block; position: relative; z-index: 1; padding: 8px 15px; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); text-decoration: none !important; white-space: nowrap; border-radius: 10px 10px 0 0; font-size: 14px; flex-shrink: 0; transform-origin: bottom; touch-action: manipulation; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s ease, box-shadow 0.3s ease; }
.category-outer-box.has-cat-overflow .cat-tab { touch-action: pan-x; }
.cat-tab:hover { box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2); }
.cat-tab.is-active { transform: scale(1); padding-bottom: 14px; font-weight: bold; }
.category-bottom-line-fixed { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; pointer-events: none; }
/* --- 5. CONTENT WRAPPER & SEARCH --- */
.site-main-content-wrapper { position: relative; background: #FFFFFF; z-index: 500; margin-top: -1px; overflow-x: hidden; }
.main-page-content, .single-post-wrapper, .main-category-full { padding-top: 20px; position: relative; z-index: 1; }
.is-in-category .search-top-bar { padding: 15px 0 10px 0; }
.sticky-wrapper-custom { position: relative; padding-top: 5px; transition: box-shadow 0.3s ease; }
.sticky-wrapper-custom.is-in-category { box-shadow: none !important; }
.search-top-bar { display: flex; justify-content: flex-end; padding: 20px 0; position: relative; z-index: 5; }
.hdr-search-form { display: flex; align-items: center; background: #fff; border: 1px solid #D8D0C4; border-radius: 20px; padding: 5px 15px; width: 280px; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); transition: width 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.hdr-search-form:focus-within { border-color: #C4A862; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05); width: 320px; }
.hdr-search-input { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; color: #333; }
.hdr-search-btn { border: none; background: transparent; color: #888; cursor: pointer; font-size: 14px; padding-left: 10px; transition: color 0.2s; }
.hdr-search-btn:hover, .hdr-search-form:hover .hdr-search-btn, .hdr-search-form:focus-within .hdr-search-btn { color: #C4A862; }
/* --- 6. UI ELEMENTS --- */
.cat-nav-btn { background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: bold; padding: 0; }
/* Màu danh mục — dùng chung cho tab header + front-page (--cat-accent) */
.mn-red { --cat-accent: #F44647; background-color: var(--cat-accent) !important; }
.mn-orange { --cat-accent: #F89201; background-color: var(--cat-accent) !important; }
.mn-yellow { --cat-accent: #FFD700; background-color: var(--cat-accent) !important; color: #000 !important; text-shadow: none !important; }
.mn-green { --cat-accent: #00CD8C; background-color: var(--cat-accent) !important; }
.mn-blue { --cat-accent: #319EE5; background-color: var(--cat-accent) !important; }
.mn-purple { --cat-accent: #A74EDB; background-color: var(--cat-accent) !important; }
/* Trang archive: nền trắng, chỉ giữ accent (icon, gạch) */
.main-category-full.single-post-wrapper[class*="mn-"] { background-color: #fff !important; color: inherit !important; text-shadow: none !important; }
/* --- 7. RESPONSIVE --- */
@media (max-width: 768px) {
.main-logo-img { max-width: 220px; }
.site-header { min-height: 180px; }
.sticky-header-container { margin-top: -44px; z-index: 1200; pointer-events: auto; isolation: isolate; }
.header-category-pos, .category-outer-box, .category-scroll-container, .category-flex-list { pointer-events: auto; }
.cat-tab { padding: 6px 12px; font-size: 13px; cursor: pointer; }
.category-outer-box { justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; }
.category-scroll-container { margin: 0 !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.category-outer-box:not(.has-cat-overflow) .category-flex-list { margin-left: auto; }
.search-top-bar { justify-content: flex-end !important; padding: 10px; }
.hdr-search-form { width: 38px; height: 38px; padding: 0; overflow: hidden; justify-content: center; transition: width 0.4s ease-in-out; background: #fff; border: 1px solid #D8D0C4; border-radius: 20px; display: flex; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.07); }
.hdr-search-form:focus-within { width: 220px; padding: 0 15px; border-color: #C4A862; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05); }
.hdr-search-input { width: 0; padding: 0; border: none; outline: none; transition: width 0.3s; font-size: 14px; }
.hdr-search-form:focus-within .hdr-search-input { width: 100%; margin-left: 5px; }
.hdr-search-btn { background: transparent; border: none; min-width: 38px; cursor: pointer; color: #555; }
.mega-menu-primary-mobile-open .header-main-content, .mega-menu-primary-mobile-open .main-logo-img, .mega-menu-primary-mobile-open .sticky-header-container, .mega-menu-primary-mobile-open .site-main-content-wrapper { z-index: 1 !important; }
.mega-menu-primary-mobile-open .sticky-header-container { pointer-events: none; }
/* Max Mega Menu: thụt mục con (mở bằng mũi tên) trên mobile */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { padding-left: 1.75rem !important; }
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { padding-left: 2.5rem !important; }
}
/* --- FRONT-PAGE.PHP GRID _ BÀI VIẾT MỚI NHẤT === */
.home { --bn-page-bg: #0a0a1a; }
.background1 { --bn-page-bg: #0a0a1a; --bn-card-bg: #1A1A1A; --bn-card-bg-hover: #252525; --bn-card-border: rgba(255, 255, 255, 0.14); background-color: var(--bn-page-bg); margin: 0; }
.bn20-news-grid { width: 100%; padding: 40px 0; }
.bn20-container { max-width: 1640px; margin: 0 auto; padding: 0 15px; }
.bn20-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; grid-template-areas: "area1 area2 area3 area4" "area1 area5 area3 area6" "area7 area8 area9 area10" "area11 area8 area12 area10" "area13 area14 area15 area16" "area17 area18 area19 area20"; }
/* --- GIỮ NGUYÊN BN-CARD --- */
.bn-card { background-color: rgba(255, 255, 255, 0.75); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border: 1px solid rgba(232,224,208,0.6); display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.bn-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; color: #1a1a1a; }
/* --- ĐỊNH VềEGRID-AREA --- */
.bn-item-1 { grid-area: area1; height: 300px; }
.bn-item-2 { grid-area: area2; }
.bn-item-3 { grid-area: area3; height: 300px; }
.bn-item-4 { grid-area: area4; }
.bn-item-5 { grid-area: area5; }
.bn-item-6 { grid-area: area6; }
.bn-item-7 { grid-area: area7; }
.bn-item-8 { grid-area: area8; height: 300px; }
.bn-item-9 { grid-area: area9; }
.bn-item-10 { grid-area: area10; height: 300px; }
.bn-item-11 { grid-area: area11; }
.bn-item-12 { grid-area: area12; }
.bn-item-13 { grid-area: area13; }
.bn-item-14 { grid-area: area14; }
.bn-item-15 { grid-area: area15; }
.bn-item-16 { grid-area: area16; }
.bn-item-17 { grid-area: area17; }
.bn-item-18 { grid-area: area18; }
.bn-item-19 { grid-area: area19; }
.bn-item-20 { grid-area: area20; }
/* --- MEDIA & KÍCH THƯỚC --- */
.bn-card-media { position: relative; width: 100%; overflow: hidden; flex-shrink: 0; }
.bn-card-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bn-thumb-cover { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bn-style-vertical .bn-card-media { height: 150px; }
.bn-style-horizontal { height: 145px; }
.bn-style-overlay { height: 200px; }
.bn-style-overlay .bn-card-media { height: 200px; }
.bn-style-standard .bn-card-media { height: 150px; }
/* --- LAYOUT NGANG (30% ẢNH) --- */
.bn-style-horizontal .bn-card-link { flex-direction: row !important; padding: 10px; gap: 10px; }
.bn-style-horizontal .bn-card-media { position: relative; width: 30% !important; height: 125px; border-radius: 6px; }
.bn-style-horizontal .bn-card-media::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3); pointer-events: none; }
.bn-style-horizontal .bn-card-body { width: 68%; padding: 0 !important; }
/* --- NỘI DUNG CHỮ & CāE CHềEH META --- */
.bn-card-body { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding: 0 10px 10px 10px; }
.bn-title { font-size: 16px; font-weight: 600; line-height: 1.4; overflow: hidden; flex-grow: 1; margin-bottom: 0; }
.bn-style-horizontal .bn-title { font-size: 15px; margin-top: -3px; }
/* --- HOVER EFFECTS --- */
.bn-card-media img { transition: transform 0.25s ease; }
.bn-card:hover .bn-card-media img { transform: scale(1.05); }
.bn-card:hover .bn-title, .bn-style-overlay:hover .bn-title.white-text { color: #1A73E8 !important; text-shadow: none; transition: color 0.3s ease; }
.bn-mobile-card:hover .bn-mobile-title { color: #1A73E8; transition: color 0.3s ease; }
/* --- META: like/share trái, danh mục phải (cùng hàng, gọn) --- */
.bn-meta, .bn-mobile-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; min-height: 22px; flex-wrap: nowrap; }
.bn-social { display: flex; flex: 0 0 auto; gap: 10px; font-size: 11px; color: #888; white-space: nowrap; }
.bn-social span { display: inline-flex; align-items: center; gap: 4px; }
.bn-label { flex: 0 1 auto; max-width: min(11em, 52%); margin-left: auto; padding: 2px 8px; font-size: 10px; line-height: 1.3; color: #fff; font-weight: 700; border-radius: 4px; text-transform: uppercase; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-style-horizontal .bn-label { max-width: min(9em, 48%); font-size: 9px; }
.bn-overlay-box .bn-meta { padding-top: 8px; }
.bn-overlay-box .bn-social { color: rgba(255, 255, 255, 0.82); }
.bn-overlay-box .bn-label { max-width: min(10em, 50%); }
/* --- OVERLAY TEXT --- */
.bn-overlay-box { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.white-text { color: #fff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
@media (max-width: 1200px) {
.bn20-wrapper { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-areas: "area1 area2 area3" "area1 area5 area3" "area4 area6 area7" "area8 area9 area10" "area8 area12 area10" "area13 area14 area15" "area17 area18 area19" !important; gap: 10px !important; }
.bn-card-link { flex-direction: column !important; display: flex !important; height: 100% !important; }
.bn-card-media { width: 100% !important; position: relative !important; display: block !important; }
.bn-card-media img { position: absolute !important; object-fit: cover !important; }
.bn-card-body { width: 100% !important; display: flex !important; flex-direction: column !important; padding: 12px !important; flex-grow: 1 !important; }
.bn-title { display: block !important; font-size: 1rem !important; line-height: 1.4 !important; flex-grow: 1 !important; margin-bottom: 0 !important; }
.bn-item-1, .bn-item-3, .bn-item-8, .bn-item-10 { height: 300px !important; }
.bn-item-11, .bn-item-16, .bn-item-20 { display: none !important; }
}
@media (max-width: 960px) {
.bn20-wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-template-areas: "area1 area2" "area1 area5" "area4 area3" "area6 area3" "area8 area7" "area8 area11" "area9 area10" "area12 area10" "area13 area14" "area15 area16" "area17 area18" "area19 area20" !important; gap: 10px !important; }
.bn-item-11, .bn-item-16, .bn-item-20 { display: flex !important; }
.bn-item-11 { grid-area: area11 !important; }
.bn-item-16 { grid-area: area16 !important; }
.bn-item-20 { grid-area: area20 !important; }
}
.bn20-news-mobile { display: none; }
@media (max-width: 768px) {
.bn20-container { padding: 0; }
.bn20-news-grid { display: none !important; }
.bn20-news-mobile { display: block; }
.main-homepage, .main-homepage .full, .main-homepage .background1, .bn20-news-mobile, .bn20-news-mobile .bn20-container { max-width: 100%; overflow-x: clip; }
.bn-mobile-card { padding: 20px 10px 24px; box-shadow: none; background: transparent !important; border: none !important; border-bottom: 1px dashed rgba(255, 255, 255, 0.12) !important; }
.bn20-news-mobile .bn-mobile-card:first-child { border-top: none !important; }
.bn20-news-mobile article.bn-mobile-card:last-of-type { border-bottom: none !important; }
.bn-mobile-title { position: relative; padding-left: 12px; font-size: 1.1rem; margin-bottom: 10px; font-weight: 600; color: #333; line-height: 1.4; }
.bn-mobile-title::before { content: ""; position: absolute; left: 0; top: 3px; width: 3px; height: 18px; background-color: #8B1A1A; border-radius: 2px; }
.bn-mobile-row { display: flex; gap: 10px; max-width: 100%; min-width: 0; }
.bn-mobile-img { width: 30%; aspect-ratio: 16/9; border-radius: 4px; flex-shrink: 0; overflow: hidden; }
.bn-mobile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bn-mobile-body { width: 68%; min-width: 0; font-size: 13px; color: #555; line-height: 1.4; }
.bn-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bn-mobile-meta { margin-top: 10px; padding-top: 6px; }
}
@media (min-width: 481px) and (max-width: 768px) {
.bn-mobile-title { font-size: 1.25rem; }
.bn-mobile-img { width: 25%; }
.bn-mobile-body { width: 73%; font-size: 15px; line-height: 1.5; }
.bn-excerpt { -webkit-line-clamp: 5; }
}
/* --- Dark skin: chỉ front-page (header → grid bài mới nhất) --- */
.home .site-header, .home .site-main-content-wrapper { background-color: var(--bn-page-bg, #0a0a1a); }
.home .sticky-header-container { background-color: transparent; }
.home .category-blocks-area, .home .category-block-item { background-color: #FFFFFF !important; }
.home .hdr-search-form { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.home .hdr-search-form:focus-within { border-color: rgba(196, 168, 98, 0.65); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); }
.home .hdr-search-input { color: #fff; }
.home .hdr-search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.home .hdr-search-btn { color: rgba(255, 255, 255, 0.55); }
.home .hdr-search-btn:hover, .home .hdr-search-form:hover .hdr-search-btn, .home .hdr-search-form:focus-within .hdr-search-btn { color: #C4A862; }
.home .breadcrumb-icon, .home .rank-math-breadcrumb, .home .rank-math-breadcrumb a { color: rgba(255, 255, 255, 0.55); }
.home .rank-math-breadcrumb a:hover { color: #C4A862; }
.home .rank-math-breadcrumb .last { color: #fff; }
.home .rank-math-breadcrumb .separator { color: rgba(255, 255, 255, 0.3); }
@media (max-width: 768px) {
.home .hdr-search-form { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); }
.home .hdr-search-btn { color: rgba(255, 255, 255, 0.7); }
.home .site-main-content-wrapper { overflow-x: clip; max-width: 100%; }
}
.background1 .home-intro-section .container-inner { background: transparent; border-radius: 0; padding: 0 10px; }
.background1 .main-title, .background1 .sub-title, .background1 .bn-title, .background1 .bn-excerpt, .background1 .bn-social, .background1 .bn-mobile-title, .background1 .bn-mobile-body, .background1 .bn-mobile-meta { color: #ffffff; }
.background1 .sub-title, .background1 .bn-excerpt, .background1 .bn-social, .background1 .bn-mobile-body { color: rgba(255,255,255,0.85); }
.background1 .bn-card { background-color: var(--bn-card-bg); border: 1px solid var(--bn-card-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.background1 .bn-card-link { color: #ffffff; }
.background1 .bn-mobile-card { background-color: var(--bn-card-bg); border: 1px solid var(--bn-card-border); }
@media (max-width: 768px) {
.background1 .bn20-news-mobile article.bn-mobile-card { background: transparent !important; border: none !important; box-shadow: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.12) !important; }
.background1 .bn20-news-mobile article.bn-mobile-card:last-of-type { border-bottom: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
.background1 .bn-card { transition: background-color 0.25s ease, border-color 0.25s ease; }
}
.background1 .bn-card:hover { background-color: var(--bn-card-bg-hover); border-color: rgba(255, 255, 255, 0.2); }
.background1 .bn-card:hover .bn-title, .background1 .bn-style-overlay:hover .bn-title.white-text, .background1 .bn-mobile-card:hover .bn-mobile-title { color: #a7c7ff !important; }
/* --- FRONT-PAGE.PHP PHẦN VIDEO YOUTUBE --- */
.home-intro-section { padding: 28px 0 20px; width: min(1640px, 98%); margin: 0 auto; }
.home-intro-head { position: relative; padding-left: 18px; border-left: 4px solid #8B1A1A; }
.home-intro-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.home-intro-section .main-title { margin: 0; line-height: 1.15; font-weight: 700; }
.home-intro-section .sub-title { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 52ch; }
.title-part { display: inline-block; }
.title-part--primary { font-size: clamp(1.75rem, 3vw, 2.35rem); color: #fff; }
.title-part--secondary { font-size: clamp(1.75rem, 3vw, 2.35rem); color: #C4A862; }
.title-sep { margin: 0 0.35em; color: rgba(255, 255, 255, 0.25); font-weight: 400; }
.full1 { background-color: #003366; background-image: url('image/t-l.png'), url('image/r-b.png'); background-position: top left, bottom right; background-repeat: no-repeat; background-size: auto; width: 100%; position: relative; box-shadow: inset 0 0 50px rgba(0,0,0,0.3); }
.video-shorts-section { padding: 50px 0; }
.shorts-scroll-wrapper { width: 100%; overflow-x: auto; scrollbar-width: none; }
.shorts-scroll-wrapper::-webkit-scrollbar { display: none; }
.shorts-flex-container { display: flex; gap: 15px; }
.video-section-title { color: white; }
@media (min-width: 1201px) {
.short-item { flex: 0 0 calc(20% - 12px); }
}
@media (max-width: 1200px) and (min-width: 961px) {
.short-item { flex: 0 0 calc(25% - 12px); }
}
@media (max-width: 960px) and (min-width: 769px) {
.short-item { flex: 0 0 calc(33.33% - 10px); }
}
@media (max-width: 768px) {
.short-item { flex: 0 0 calc(50% - 10px); }
}
.short-item { border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.short-item:hover { transform: translateY(-5px); }
.video-embed-container { position: relative; width: 100%; padding-bottom: 177%; height: 0; }
.video-embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.video-text-content { display: none !important; }
/* --- FRONT-PAGE: Bento danh mục (breakpoint dềEđọc) ---
 * ≥1641        : desktop rộng
 * max 1640     : 1201 E640  ↁE2 ngang + 5 dọc
 * max 1200     : 961 E200   ↁE2 ngang + 4 dọc
 * max 960      : 769 E60    ↁE2 ngang + 3 dọc
 * max 768      : 481 E68    ↁE1 ngang + 2 dọc
 * max 480      : 0 E80      ↁE3 bài/danh mục, ảnh 30% · tiêu đềE68%, luân phiên trái/phải
 */
.cat-posts-bento { display: grid; gap: 10px; width: 100%; align-items: stretch; }
/* ≥1641 & max 1640 (1201 E640): 2 ngang · 5 dọc */
@media (min-width: 1201px) {
.cat-posts-bento { grid-template-columns: repeat(10, 1fr); }
.category-block-item .post-num-1 { grid-column: 1 / 6; grid-row: 1; }
.category-block-item .post-num-2 { grid-column: 6 / 11; grid-row: 1; }
.category-block-item .post-num-3 { grid-column: 1 / 3; grid-row: 2; }
.category-block-item .post-num-4 { grid-column: 3 / 5; grid-row: 2; }
.category-block-item .post-num-5 { grid-column: 5 / 7; grid-row: 2; }
.category-block-item .post-num-6 { grid-column: 7 / 9; grid-row: 2; }
.category-block-item .post-num-7 { grid-column: 9 / 11; grid-row: 2; }
}
/* max 1200 (961 E200): 2 ngang · 4 dọc */
@media (min-width: 961px) and (max-width: 1200px) {
.cat-posts-bento { grid-template-columns: repeat(8, 1fr); }
.category-block-item .post-num-1 { grid-column: 1 / 5; grid-row: 1; }
.category-block-item .post-num-2 { grid-column: 5 / 9; grid-row: 1; }
.category-block-item .post-num-3 { grid-column: 1 / 3; grid-row: 2; }
.category-block-item .post-num-4 { grid-column: 3 / 5; grid-row: 2; }
.category-block-item .post-num-5 { grid-column: 5 / 7; grid-row: 2; }
.category-block-item .post-num-6 { grid-column: 7 / 9; grid-row: 2; }
.category-block-item .post-num-7 { display: none !important; }
}
/* max 960 (769–960): 2 ngang · 3 dọc */
@media (min-width: 769px) and (max-width: 960px) {
.category-block-item .cat-posts-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.category-block-item .post-num-1 { grid-column: 1 / 4; grid-row: 1; display: block; }
.category-block-item .post-num-2 { grid-column: 4 / 7; grid-row: 1; display: block; }
.category-block-item .post-num-3 { grid-column: 1 / 3; grid-row: 2; display: block; }
.category-block-item .post-num-4 { grid-column: 3 / 5; grid-row: 2; display: block; }
.category-block-item .post-num-5 { grid-column: 5 / 7; grid-row: 2; display: block; }
.category-block-item .post-num-6, .category-block-item .post-num-7 { display: none !important; }
.category-block-item .post-num-1.cat-post--h a, .category-block-item .post-num-2.cat-post--h a { flex-direction: row; align-items: stretch; }
.category-block-item .post-num-1.cat-post--h .thumb-wrapper, .category-block-item .post-num-2.cat-post--h .thumb-wrapper { flex: 0 0 38%; width: auto; max-width: 46%; min-height: 0; align-self: stretch; height: auto; }
.category-block-item .post-num-1.cat-post--h .info-wrapper, .category-block-item .post-num-2.cat-post--h .info-wrapper { position: relative; padding: 12px 14px 28px; }
.category-block-item .post-num-1 .cat-post-date, .category-block-item .post-num-2 .cat-post-date { display: block; }
}
/* max 768 (481 E68): 1 ngang · 2 dọc */
@media (min-width: 481px) and (max-width: 768px) {
.cat-posts-bento { grid-template-columns: repeat(4, 1fr); }
.category-block-item .post-num-1 { grid-column: 1 / -1; grid-row: 1; }
.category-block-item .post-num-2 { grid-column: 1 / 3; grid-row: 2; }
.category-block-item .post-num-3 { grid-column: 3 / 5; grid-row: 2; }
.category-block-item .post-num-4, .category-block-item .post-num-5, .category-block-item .post-num-6, .category-block-item .post-num-7 { display: none !important; }
.category-block-item { padding: 40px 0; }
.cat-block-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; padding-left: 16px; }
.cat-block-header-main { padding-right: 3.5rem; min-height: 2.5rem; }
.cat-block-index { right: 0; font-size: clamp(2rem, 14vw, 2.75rem); opacity: 0.1; }
.cat-block-title a { font-size: 20px; }
.category-block-item .view-more { align-self: flex-end; padding: 7px 14px; font-size: 11px; }
/* Ảnh đồng đều: ô trên ngang · 2 ô dưới dọc */
.category-block-item .post-num-1.cat-post--h .thumb-wrapper { flex: 0 0 40%; max-width: 42%; aspect-ratio: 16 / 9; align-self: stretch; }
.category-block-item .post-num-2 .thumb-wrapper, .category-block-item .post-num-3 .thumb-wrapper { flex: none; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.category-block-item .post-num-1 .info-wrapper, .category-block-item .post-num-2.cat-post--h .info-wrapper, .category-block-item .post-num-3.cat-post--v .info-wrapper { display: flex; flex-direction: column; padding-bottom: 12px; }
.category-block-item .post-num-1 .cat-post-date, .category-block-item .post-num-2 .cat-post-date, .category-block-item .post-num-3 .cat-post-date { position: static !important; right: auto; bottom: auto; margin-top: auto; padding-top: 10px; align-self: flex-end; }
.category-block-item .post-num-1 .excerpt, .category-block-item .post-num-3 .excerpt { margin-bottom: 0; }
}
/* max 480 (0–480): 3 bài · ảnh 30% · tiêu đề 68% · không mô tả */
@media (max-width: 480px) {
.category-blocks-area .container-inner { width: 100%; padding: 5px; box-sizing: border-box; }
.cat-posts-bento { grid-template-columns: 1fr; gap: 10px; }
.category-block-item .post-num-4, .category-block-item .post-num-5, .category-block-item .post-num-6, .category-block-item .post-num-7 { display: none !important; }
.category-block-item .cat-post-card { min-height: 112px; border-top: 1px solid #E8ECF0 !important; }
.category-block-item .cat-post-card a { flex-direction: row !important; align-items: stretch !important; gap: 2%; min-height: 112px; padding: 10px; box-sizing: border-box; }
.category-block-item:nth-child(odd) .cat-post-card a { flex-direction: row !important; }
.category-block-item:nth-child(even) .cat-post-card a { flex-direction: row-reverse !important; }
.category-block-item .cat-post-card .thumb-wrapper { flex: 0 0 30% !important; width: 30% !important; max-width: 30% !important; min-width: 0; aspect-ratio: unset; min-height: 0; max-height: none; height: auto; align-self: stretch; padding: 0 !important; overflow: hidden; display: flex; box-sizing: border-box; }
.category-block-item .cat-post-card .thumb-wrapper::after { top: 0; left: 0; right: 0; bottom: 0; }
.category-block-item .cat-post-card .thumb-wrapper img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; border-radius: 4px; }
.category-block-item .cat-post-card .info-wrapper { flex: 0 0 68% !important; width: 68% !important; max-width: 68% !important; min-width: 0; position: relative; display: flex; flex-direction: column; padding: 0 !important; box-sizing: border-box; }
.category-block-item .cat-post-card .cat-post-title, .category-block-item .cat-post-card .info-wrapper h3 { font-size: 14px !important; line-height: 1.45 !important; min-height: calc(14px * 1.45 * 3); margin: 0 0 10px !important; }
.category-block-item .cat-post-card .excerpt { display: none !important; }
.category-block-item .cat-post-card .cat-post-date { display: inline-flex !important; position: static !important; margin-top: auto; padding-top: 8px; align-self: flex-end; font-size: 11px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-block-item { padding: 36px 0; }
.cat-block-header-main { padding-right: 0; }
.cat-block-index { display: none; }
}
/* --- LAYOUT PHẦN DANH MỤC — Accent Category --- */
.category-blocks-area { position: relative; background-color: #FFFFFF !important; padding-bottom: 24px; }
.category-blocks-area::before { content: ""; display: block; height: 0; background: none; }
.category-block-item { padding: 48px 0; width: 100%; background-color: #FFFFFF !important; }
.category-block-item + .category-block-item { border-top: none; }
/* === ICON TAM GIÁC  Edùng chung toàn theme (không dùng trong block danh mục) === */
.dm-title { color: #b3b3b3; font-size: 11px; margin-right: 6px; flex-shrink: 0; }
.thumb-wrapper { background: #eee; border-radius: 4px; overflow: hidden; }
.category-block-item .thumb-wrapper { position: relative; background: #FFFFFF; padding: 10px; box-sizing: border-box; border-radius: 4px; }
.category-block-item .thumb-wrapper .thumb-zoom-clip { width: 100%; height: 100%; overflow: hidden; border-radius: 4px; }
.category-block-item .thumb-wrapper .thumb-zoom-clip img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; transition: transform 0.25s ease; }
/* Bỏ đổ bóng trong ảnh */
.category-block-item .thumb-wrapper::after { content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border-radius: 4px; box-shadow: none; pointer-events: none; z-index: 2; }
.category-block-item .cat-post-card { background: #FFFFFF; border-radius: 12px; box-shadow: 0 2px 14px rgba(0, 35, 70, 0.07); border: 1px solid #E8ECF0; overflow: hidden; }
/* Ô dọc: chỉ border-top màu danh mục; ô ngang: viền xám (không tô màu) */
.category-block-item .cat-post--v { border-top: 3px solid var(--cat-accent, #E8ECF0); }
.category-block-item .cat-post-card a { display: flex; height: 100%; text-decoration: none; color: inherit; }
.category-block-item .cat-post--h a { flex-direction: row; align-items: stretch; }
.category-block-item .cat-post--v a { flex-direction: column; }
.category-block-item .cat-post--h .thumb-wrapper { flex: 0 0 38%; max-width: 300px; min-height: 0; align-self: stretch; height: auto; display: flex; }
.category-block-item .cat-post--v .thumb-wrapper { width: 100%; aspect-ratio: 16 / 9; flex-shrink: 0; }
.category-block-item .info-wrapper { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; padding: 12px 14px 14px; }
.category-block-item .cat-post--h .info-wrapper { position: relative; padding: 14px 16px 38px; justify-content: flex-start; }
.category-block-item .cat-post--v .info-wrapper { position: relative; padding: 12px 14px 36px; flex-grow: 1; }
.category-block-item .cat-post-date { position: absolute; right: 14px; bottom: 12px; font-size: 12px; color: #8A939E; display: inline-flex; align-items: center; gap: 4px; }
.category-block-item .cat-post-date i { font-size: 11px; opacity: 0.85; }
.category-block-item .info-wrapper h3, .category-block-item .cat-post-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #1A1A1A; margin: 0 0 10px !important; line-height: 1.45; word-break: break-word; min-height: calc(1.45em * 3); }
.category-block-item .cat-title-dot { font-size: 6px; margin-right: 6px; color: var(--cat-accent); vertical-align: middle; }
.category-block-item .cat-title-text { display: inline; }
.category-block-item .info-wrapper h3, .category-block-item .cat-post-title { transition: color 0.3s ease; }
.category-block-item .cat-post--h .info-wrapper h3 { font-size: clamp(17px, 1.4vw, 21px); }
.category-block-item .cat-post--v .info-wrapper h3 { font-size: 15px; color: #2C2C2C; line-height: 1.45; }
.category-block-item .cat-post--h .excerpt { margin: 8px 0 0; color: #5C6570; line-height: 1.55; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(13px * 1.55 * 3); max-height: calc(13px * 1.55 * 3); }
.category-block-item .cat-post--v .cat-post-date { display: inline-flex; position: absolute; right: 14px; bottom: 10px; }
/* Bài 2 ềEhàng dưới: dạng dọc chềEmax 768 (481 E68), không ảnh hưởng max 480 */
@media (min-width: 481px) and (max-width: 768px) {
.category-block-item .post-num-2 { border-top: 3px solid var(--cat-accent, #E8ECF0) !important; }
.category-block-item .post-num-2.cat-post--h a { flex-direction: column; }
.category-block-item .post-num-2.cat-post--h .thumb-wrapper { flex: none; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
.category-block-item .post-num-2.cat-post--h .info-wrapper { position: relative; padding: 12px 14px 34px; }
.category-block-item .post-num-3.cat-post--v .cat-post-date { display: inline-flex !important; }
.category-block-item .post-num-2 .excerpt { display: none !important; }
.category-block-item .post-num-2 .cat-post-date { display: inline-flex !important; }
}
/* Hover danh mục — giữ layout cũ, mượt như bn20 */
.category-block-item .cat-post-card:hover .thumb-wrapper .thumb-zoom-clip img, .category-block-item .cat-post-card a:hover .thumb-wrapper .thumb-zoom-clip img { transform: scale(1.05); }
.category-block-item .cat-post-card:hover .info-wrapper h3, .category-block-item .cat-post-card:hover .cat-post-title, .category-block-item .cat-post-card:hover .cat-title-text { color: #1A73E8 !important; text-shadow: none; transition: color 0.3s ease; }
.category-block-item h2 a, .category-block-item h3, .category-block-item .view-more { text-shadow: none !important; }
.cat-block-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; padding: 4px 0 14px 20px; border-left: 5px solid var(--cat-accent); }
.cat-block-header-main { position: relative; flex: 1; min-width: 0; padding-right: clamp(4rem, 11vw, 9rem); }
.cat-block-index { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(2.5rem, 6vw, 6rem); font-weight: 700; line-height: 1; color: var(--cat-accent); opacity: 0.08; pointer-events: none; user-select: none; }
.cat-block-title { margin: 0; }
.cat-block-title a { font-size: clamp(20px, 2vw, 28px); text-transform: uppercase; text-decoration: none; color: #1A1A1A; letter-spacing: 0.02em; }
.category-block-item .view-more { flex-shrink: 0; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; padding: 8px 18px; border: 1.5px solid var(--cat-accent, #E8ECF0); background-color: var(--cat-accent, #E8ECF0); color: #ffffff; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.category-block-item.mn-yellow .view-more { color: #1a1a1a; }
.category-block-item .view-more:hover { background-color: #ffffff; color: var(--cat-accent, #E8ECF0); border-color: var(--cat-accent, #E8ECF0); }
.category-block-item.mn-yellow .view-more:hover { color: var(--cat-accent, #FFD700); }
/* --- ICON LIKE, SHARE (archive & grid khác) --- */
.meta-right-group { display: flex; gap: 12px; justify-content: flex-end; width: 100%; }
.meta-item { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.meta-category .meta-item, .meta-category .meta-item i { color: #aaa !important; }
/* ============================== ARCHIVE.php ==================================== */
.main-category-full .archive-full-width { width: min(1640px, 95%); margin: 0 auto; }
.main-category-full .archive-smart-grid { display: grid; gap: 25px 20px; grid-auto-flow: row; }
.main-category-full .p1 { grid-area: arch-p1; }
.main-category-full .p2 { grid-area: arch-p2; }
.main-category-full .p3 { grid-area: arch-p3; }
.main-category-full .p4 { grid-area: arch-p4; }
.main-category-full .p5 { grid-area: arch-p5; }
.main-category-full .p6 { grid-area: arch-p6; }
.main-category-full .p7 { grid-area: arch-p7; }
.main-category-full .p8 { grid-area: arch-p8; }
.main-category-full .p9 { grid-area: arch-p9; }
.main-category-full .p10 { grid-area: arch-p10; }
.main-category-full .p11 { grid-area: arch-p11; }
.main-category-full .p12 { grid-area: arch-p12; }
.main-category-full .p13 { grid-area: arch-p13; }
.main-category-full .p14 { grid-area: arch-p14; }
.main-category-full .p15 { grid-area: arch-p15; }
.main-category-full .p16 { grid-area: arch-p16; }
.main-category-full .p17 { grid-area: arch-p17; }
/* Ẩn bài 16–17 dưới 961px (15 bài) */
@media (max-width: 960px) {
.main-category-full .archive-smart-grid .post-card.p16, .main-category-full .archive-smart-grid .post-card.p17 { display: none !important; }
}
/* 5 cột — 1201px–1640+ : 17 bài */
@media (min-width: 1201px) {
.main-category-full .archive-smart-grid { grid-template-columns: repeat(5, 1fr); grid-auto-flow: row; grid-auto-rows: auto; grid-template-areas: "arch-p1 arch-p1 arch-p2 arch-p3 arch-p4" "arch-p1 arch-p1 arch-p5 arch-p6 arch-p7" "arch-p8 arch-p9 arch-p10 arch-p11 arch-p12" "arch-p13 arch-p14 arch-p15 arch-p16 arch-p17"; }
.main-category-full .p1 .thumb-wrapper { aspect-ratio: 16 / 10 !important; }
}
/* 4 cột — 961px–1200px : 17 bài */
@media (min-width: 961px) and (max-width: 1200px) {
.main-category-full .archive-smart-grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: "arch-p1 arch-p1 arch-p2 arch-p3" "arch-p1 arch-p1 arch-p4 arch-p5" "arch-p6 arch-p7 arch-p8 arch-p9" "arch-p10 arch-p11 arch-p12 arch-p13" "arch-p14 arch-p15 arch-p16 arch-p17"; }
.main-category-full .p1 .thumb-wrapper { aspect-ratio: 16 / 10 !important; }
}
/* 3 cột — 769px–960px : 15 bài */
@media (max-width: 960px) and (min-width: 769px) {
.main-category-full .archive-smart-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "arch-p1 arch-p1 arch-p2" "arch-p1 arch-p1 arch-p3" "arch-p4 arch-p5 arch-p6" "arch-p7 arch-p8 arch-p9" "arch-p10 arch-p11 arch-p12" "arch-p13 arch-p14 arch-p15"; }
}
@media (max-width: 768px) {
.main-category-full .archive-smart-grid { display: flex !important; flex-direction: column; gap: 15px; }
.main-category-full .post-card { border-bottom: dashed 1px #ccc; padding: 5px 0; }
.main-category-full .post-card:not(.p1) a { flex-direction: row; align-items: flex-start; gap: 12px; }
.main-category-full .post-card:not(.p1) .thumb-wrapper { flex: 0 0 110px; height: 75px; margin-bottom: 0; }
.main-category-full .post-card:not(.p1) .post-title { height: 58px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; font-size: 14px; line-height: 1.4; }
.main-category-full .p1 { padding: 0 0 15px 0; border: none; box-shadow: none; background: transparent !important; border-bottom: 1px dashed #ccc; border-radius: 0; }
.main-category-full .p1 .post-title { font-size: 17px; height: auto; -webkit-line-clamp: 3; }
.main-category-full .post-meta-actions.meta-category { margin-top: 4px; padding-top: 0; }
}
/* --- CARD STYLE --- */
.main-category-full .post-card a { display: flex; flex-direction: column; height: auto; text-decoration: none !important; }
.main-category-full .thumb-wrapper { border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.main-category-full .thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.main-category-full .post-card:hover .thumb-wrapper img { transform: scale(1.04); }
.main-category-full .info-wrapper { display: flex; flex-direction: column; flex-grow: 1; }
/* .main-category-full .dm-title  Ekế thừa từ .dm-title toàn theme */
.main-category-full .post-title { font-size: 16px; color: #333 !important; margin: 4px 0 !important; line-height: 1.4; height: 67px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: none !important; }
.main-category-full .post-card:hover .post-title { color: #1A73E8 !important; }
.main-category-full .post-meta-actions.meta-category { margin-top: 5px; padding-top: 5px; }
.main-category-full .meta-item { font-size: 12px; display: flex; align-items: center; gap: 5px; }
/* Archive: icon accent theo danh mục (kế thừa --cat-accent từ main.mn-*) */
.main-category-full[class*="mn-"] .meta-category .archive-post-date i, .main-category-full[class*="mn-"] .dm-title { color: var(--cat-accent, #b3b3b3) !important; }
.main-category-full .meta-category .archive-post-date time { color: #888 !important; font-size: 12px; }
/* ================================PAGINATION==================================== */
.archive-pagination { margin: 40px auto; text-align: center; }
.archive-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; }
.archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; height: 45px; min-width: 45px; padding: 0 15px; text-decoration: none; font-size: 16px; transition: all 0.3s ease; background: #ddd; border-radius: 15px; border: none; color: #444; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.archive-pagination .page-numbers.current { background-color: #C0392B !important; border-color: #C0392B !important; color: #ffffff !important; }
.archive-pagination .page-numbers:not(.current):hover { border-color: #8B1A1A !important; color: #8B1A1A !important; background: #fff; }
.archive-pagination .next.page-numbers, .archive-pagination .prev.page-numbers { text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px; }
@media (max-width: 480px) {
.archive-pagination .page-numbers { min-width: 35px; height: 35px; padding: 0 10px; font-size: 13px; }
}
/* ==================================== SINGLE.PHP ==================================================== */
.container-1200 { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
@media (max-width: 480px) {
.container-1200 { padding: 0 10px; }
}
.post-main-grid { display: grid; grid-template-columns: 1fr 280px; grid-template-areas: "content sidebar" "recent sidebar"; gap: 30px; margin-top: 30px; align-items: start; }
.post-article-content { grid-area: content; min-width: 0; font-size: 17px; line-height: 1.9; }
.post-article-content p { margin-bottom: 1.4em; color: #3A3A3A; }
.post-article-content p + p { text-indent: 0; }
.entry-main-content p:first-of-type::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; color: #cccccc; margin-right: 10px; display: inline-block; }
.post-sidebar-area { grid-area: sidebar; align-self: start; }
.sidebar-inner-content { position: relative; }
@media (min-width: 769px) {
.sidebar-inner-content { position: sticky; top: 72px; z-index: 50; }
}
.baonhat-back-to-top { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background-color: rgba(0, 0, 0, 0.65); color: #FFFFFF; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; font-size: 18px; line-height: 1; position: fixed; right: 16px; bottom: 20px; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, visibility 0.25s ease; }
.baonhat-back-to-top:hover { background-color: rgba(0, 0, 0, 0.82); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.baonhat-back-to-top:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.baonhat-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.baonhat-back-to-top.is-scrolling { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: none; }
/* --- H1 archive/home + danh mục: gạch đỏ #880000 bên trái --- */
.archive-title { position: relative; padding-left: 15px; font-size: 30px; line-height: 1.3; margin: 30px 0 25px; }
.archive-title::before { content: ""; position: absolute; left: 0; top: calc((1.3em - 1em) / 2); width: 4px; height: 1em; background: #880000; border-radius: 0; }
.main-category-full .cat-block-header .cat-block-title.single-post-title { position: relative; padding-left: 0; font-size: 30px; line-height: 1.3; margin: 0 0 25px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; background: none !important; color: inherit !important; text-shadow: none !important; }
.main-category-full .cat-block-header .cat-block-title.single-post-title::before { content: none; }
.archive-cat-name-group { display: inline-flex; align-items: center; gap: 0.55em; padding-left: 0.5em; border-left: 4px solid var(--cat-accent, #880000); }
.main-category-full .cat-block-title .archive-cat-icon { font-size: 2em; line-height: 1; color: var(--cat-accent, #880000); flex-shrink: 0; }
.archive-cat-name { font-weight: inherit; font-size: 1em; line-height: 1.3; }
.main-category-full .cat-block-header { margin-bottom: 30px; border-left: none; padding: 0; }
/* --- H1: badge danh mục + gạch đỏ #880000 trước tiêu đề --- */
.single-post-head { margin-bottom: 28px; padding: 0; border: none; }
.single-post-cat { display: block; width: fit-content; margin: 0 0 14px auto; padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.single-post-head .single-post-title { position: relative; margin: 0; padding-left: 15px; font-size: clamp(1.45rem, 2.8vw, 2.05rem); line-height: 1.35; font-weight: 700; color: #1A1A1A; }
.single-post-head .single-post-title::before { content: ""; position: absolute; left: 0; top: calc((1.35em - 1em) / 2); width: 4px; height: 1em; background: #880000; }
.single-post-head .single-post-title::after { display: none; }
/* --- Thích + Chia sẻ: gộp một hàng, căn phải, không nền --- */
.entry-post-footer { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 40px; padding-top: 0; border-top: none; }
.entry-post-date { order: 1; color: #888; font-size: 14px; text-align: right; }
.entry-engagement-panel { order: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 18px; padding: 0; border: none; border-radius: 0; background: transparent; }
.baonhat-post-like { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: none; border-radius: 0; background: transparent; font-size: 13px; font-weight: 600; color: #666; cursor: pointer; transition: opacity 0.2s ease; flex-shrink: 0; }
.baonhat-post-like:hover:not(:disabled) { opacity: 0.85; }
.baonhat-post-like:disabled { cursor: default; opacity: 0.85; }
.baonhat-post-like .fa-thumbs-up { color: #999; font-size: 14px; }
.baonhat-post-like.is-liked .fa-thumbs-up { color: #880000; }
.baonhat-post-like.is-liked { color: #880000; }
.engagement-panel__divider { width: 1px; height: 22px; background: #ddd; flex-shrink: 0; }
.engagement-panel__share { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 14px; min-width: 0; }
.engagement-share-head { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #666; flex-shrink: 0; }
.engagement-share-head .fa-share-alt { font-size: 12px; color: #999; }
.baonhat-share-count { color: #888; font-weight: 600; }
.entry-engagement-panel .social-share-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry-engagement-panel .social-share-group a { display: inline-flex; line-height: 0; border-radius: 10px; }
.entry-engagement-panel .social-share-group img, .entry-engagement-panel .social-share-group .social-icon { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32)); border-radius: 10px; opacity: 0.9; transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease; }
.entry-engagement-panel .social-share-group a:hover img, .entry-engagement-panel .social-share-group a:hover .social-icon, .entry-engagement-panel .social-share-group img:hover { opacity: 1; transform: translateY(-4px) scale(1.12); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.38)); }
@media (max-width: 600px) {
.entry-engagement-panel { justify-content: flex-end; gap: 10px 14px; }
.engagement-panel__share { justify-content: flex-end; }
}
/* --- Tin mới nhất (thiết kế editorial) --- */
.bottom-recent-news { grid-area: recent; margin-top: 20px; padding-bottom: 60px; }
.bottom-news-head { margin-bottom: 22px; padding-left: 18px; border-left: 4px solid #880000; }
.bottom-news-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #888; }
/* H2 section — Liên quan + Tin mới nhất: 20px mobile → 24px desktop */
.bottom-news-title { margin: 0; font-size: clamp(1.25rem, 1rem + 0.75vw, 1.5rem); font-weight: 700; line-height: 1.2; color: #1A1A1A; }
.bottom-news-title::after { content: ""; display: block; width: 52px; height: 3px; margin-top: 10px; background: #880000; border-radius: 1px; }
.ri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ri-card { background: #FFFFFF; border: none; border-radius: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); overflow: hidden; display: flex; flex-direction: column; padding: 10px; height: 100%; transition: box-shadow 0.25s ease; }
.ri-card:hover { background: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.11); }
.ri-card-link { display: flex; flex-direction: row; text-decoration: none; color: inherit; align-items: stretch; flex: 1; gap: 10px; }
.ri-thumb { flex: 0 0 30%; overflow: hidden; min-height: 75px; position: relative; }
.ri-thumb::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 10px rgba(0,0,0,0.4); pointer-events: none; z-index: 1; }
.ri-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.25s ease; }
.ri-card:hover .ri-thumb img { transform: scale(1.05); }
.ri-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ri-title, .rel-title { font-size: 15px; line-height: 1.45; color: #333; margin: 0; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ri-title { height: calc(15px * 1.45 * 3); }
.ri-card:hover .ri-title { color: #1A73E8; transition: color 0.3s ease; }
.ri-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; flex-shrink: 0; }
.ri-cat { font-size: 10px; padding: 2px 7px; color: #fff; font-weight: 700; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
/* .ri-icon — dùng .dm-title */
.ri-like { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
/* rel-title::before — dùng inline <i class="dm-title"> trong sidebar.php */
@media (max-width: 768px) {
.post-main-grid { display: flex !important; flex-direction: column; width: 100%; }
.post-article-content { order: 1; flex: 0 0 100%; max-width: 100%; width: 100%; min-width: 0; }
.post-sidebar-area { order: 2; display: block; margin-top: 40px; flex: 0 0 100%; max-width: 100%; width: 100%; min-width: 0; }
.bottom-recent-news { order: 3; }
.ri-grid { grid-template-columns: 1fr; }
.ri-thumb { flex: 0 0 100px; width: 100px; }
}
/* =================================== SIDEBAR ===============================================================*/
/* Tiêu đề Liên quan dùng chung .bottom-news-head / .bottom-news-title (single.php) */
.rel-post-box { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px dashed #cccccc; text-decoration: none !important; color: inherit; transition: all 0.3s ease; }
.rel-post-box:last-child { border-bottom: none; }
.rel-info { flex: 1; order: 1; min-width: 0; }
.rel-thumb { flex: 0 0 100px; width: 100px; height: 75px; order: 2; background: #ccc; overflow: hidden; position: relative; }
.rel-thumb::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4); pointer-events: none; z-index: 1; border-radius: 4px; }
.rel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; position: relative; z-index: 0; }
.rel-post-box:hover .rel-title { color: #1A73E8; transition: color 0.3s ease; }
.rel-post-box:hover .rel-thumb img { transform: scale(1.1); }
.no-related { font-style: italic; color: #888; }
.custom-widgets { margin-top: 30px; }
/* Single post — typography đồng bộ mobile (đặt sau sidebar để không bị ghi đè) */
@media (max-width: 768px) {
.bottom-news-head { margin-bottom: 18px; padding-left: 14px; }
.bottom-news-eyebrow { font-size: 10px; letter-spacing: 0.14em; margin-bottom: 6px; }
.bottom-news-title { font-size: 1.25rem; }
.bottom-news-title::after { width: 40px; height: 2px; margin-top: 8px; }
.ri-title, .rel-title { font-size: 14px; line-height: 1.45; }
.ri-title { height: calc(14px * 1.45 * 3); }
.related-posts-list { display: flex; flex-direction: column; gap: 12px; }
.rel-post-box { padding: 10px; border-bottom: none; background: #FFFFFF; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: box-shadow 0.25s ease; }
.rel-post-box:last-child { border-bottom: none; }
.rel-post-box:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); }
}
/* ===================================  COMMENTS.PHP ===============================================================*/
/* --- Bình luận: tông đỏ #BB0000 --- */
.post-comments-section { margin-top: 32px; padding-top: 0; border-top: none; }
.post-comments-section .comment-reply-title, .post-comments-section #reply-title { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 0; border: none; width: 100%; font-size: clamp(1.05rem, 1.8vw, 1.2rem); font-weight: 700; line-height: 1.3; color: #BB0000; }
.post-comments-section .comment-reply-title::before, .post-comments-section #reply-title::before { content: "\f086"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1rem; color: #BB0000; flex-shrink: 0; }
.post-comments-section .comment-reply-title::after, .post-comments-section #reply-title::after { content: ""; flex: 1; height: 1px; margin-left: 4px; background: linear-gradient(to right, rgba(187, 0, 0, 0.45), transparent); }
/* Ô bình luận thật — viền đỏ editorial */
.post-comments-section .comment-input-box { background: #FFFFFF; border-radius: 20px; padding: 12px 20px; margin: 15px 0; border-top: none; border-left: none; border-right: 2px solid #BB0000; border-bottom: 2px solid #BB0000; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04); transition: background-color 0.28s ease, box-shadow 0.28s ease; }
.post-comments-section .comment-input-box:focus-within { background-color: #f0f0f0; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06); }
.post-comments-section .comment-input-box textarea { width: 100%; background: transparent; border: none; outline: none; font-size: 15px; margin-bottom: 0; padding: 0; resize: none; }
/* Tên / Gmail — thiết kế cũ, focus xám + bóng trong giống ô bình luận */
.post-comments-section .comment-form-author, .post-comments-section .comment-form-email { position: relative; }
.post-comments-section .comment-form-author input, .post-comments-section .comment-form-email input { width: 100%; padding: 10px 20px; border: 1px solid #ddd; border-radius: 20px; margin-bottom: 10px; outline: none; font-size: 15px; background: #FFFFFF; box-shadow: none; transition: background-color 0.28s ease, box-shadow 0.28s ease; }
.post-comments-section .comment-form-author input:focus, .post-comments-section .comment-form-email input:focus { background-color: #f0f0f0; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06); }
.post-comments-section .comment-fake-ph { position: absolute; left: 20px; top: 10px; font-size: 15px; line-height: 1.5; color: #999; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; }
.post-comments-section .comment-req-star { color: #BB0000; font-weight: 700; }
.post-comments-section .comment-form-author input:not(:placeholder-shown) + .comment-fake-ph, .post-comments-section .comment-form-email input:not(:placeholder-shown) + .comment-fake-ph { opacity: 0; visibility: hidden; }
.comment-action-bar { text-align: right; margin-bottom: 50px; }
.form-submit { text-align: right; }
#submit { background-color: #BB0000; color: #fff !important; padding: 7px 20px; border: none; border-bottom: 5px solid rgba(0,0,0,0.2); border-radius: 50px; cursor: pointer; transition: all 0.15s ease; box-shadow: 2px 3px 4px rgba(0,0,0,0.15), inset 2px 2px 5px rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; font-size: 13px; position: relative; }
#submit:hover { transform: translateY(4px); border-bottom-width: 1px; box-shadow: 1px 2px 3px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.15); background-color: #AA0000; }
#submit:active { transform: translateY(5px); border-bottom-width: 0px; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); }
#cancel-comment-reply-link { display: inline-block; margin-left: auto; background-color: #007bff; color: #fff !important; padding: 5px 15px; border-radius: 15px; font-size: 13px; text-decoration: none; margin-top: -35px; transition: background 0.3s; }
#cancel-comment-reply-link:hover { background-color: #0056b3; }
.comment-list { list-style: none; padding: 0; margin-top: 30px; }
.comment-body-wrapper { padding: 25px 0; border-bottom: 1px solid #f0f0f0; }
.comment-list ul.children { list-style: none; margin-left: 54px; }
.comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-avatar img { border-radius: 50%; width: 42px; height: 42px; object-fit: cover; }
.author-name { color: #333; font-size: 15px; }
.comment-text-content { font-size: 15px; line-height: 1.6; color: #333; padding-left: 54px; margin-bottom: 12px; }
.comment-footer-actions { display: flex; justify-content: flex-end; padding-left: 54px; }
.actions-right-group { display: flex; align-items: center; gap: 20px; }
.actions-right-group a, .actions-right-group span { text-decoration: none; color: #65676b; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.actions-right-group a:hover { color: #C0392B; }
.comment-time { color: #999 !important; }
.logged-in-as { font-size: 14px; color: #666; margin-bottom: 10px; font-style: italic; }
/* ==================================== SEARCH.PHP ==================================== */
.search-full-width { width: 100%; margin-bottom: 50px; }
.search-cards-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 960px) {
.search-cards-grid { grid-template-columns: 1fr 1fr; }
}
.search-item-card { border-bottom: 1px solid #eee; padding-bottom: 15px; }
.search-item-inner { display: flex; text-decoration: none; color: #333; gap: 15px; height: 100%; }
.search-item-thumb { width: 130px; height: 100px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
.search-item-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; transition: transform 0.25s ease; }
.search-item-card:hover .search-item-thumb img { transform: scale(1.06); }
.search-item-card:hover .search-item-title { color: #1A73E8; transition: color 0.2s ease; }
.search-item-content { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; }
.search-item-footer { display: flex; gap: 20px; font-size: 14px; color: #777; margin-top: 10px; justify-content: flex-end; text-align: right; }
.meta-like i { margin-right: 4px; }
.search-item-title { margin: 0; font-size: 16px; line-height: 1.4; }
@media (max-width: 768px) {
.search-item-thumb { width: 100px; height: 80px; }
.search-item-title { font-size: 14px; }
}
/* ==================================== 404.php ==================================== */
.main-404 { text-align: center; background-color: #fff; }
.content-404 { max-width: 600px; margin: 0 auto; }
.img-404 img { max-width: 100%; height: auto; margin-bottom: 30px; }
.title-404 { font-size: 30px; color: #333; margin-bottom: 15px; }
.desc-404 { font-size: 16px; color: #666; margin-bottom: 25px; }
.search-box-404 { margin-bottom: 40px; }
/* HIềE ỨNG NÚT BẤM 3D */
.home-view-all-wrapper { text-align: right; padding: 30px 10px; }
.btn-home { display: inline-block; padding: 7px 20px; background-color: #BB0000; color: #ffffff !important; text-decoration: none; border-radius: 50px; cursor: pointer; transition: all 0.15s ease; border: none; border-bottom: 5px solid rgba(0,0,0,0.2); box-shadow: 2px 3px 4px rgba(0,0,0,0.15), inset 2px 2px 5px rgba(255,255,255,0.5); position: relative; top: 0; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; font-size: 13px; }
.btn-home:hover { transform: translateY(4px); border-bottom-width: 1px; background-color: #AA0000; box-shadow: 1px 2px 3px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.15); }
.btn-home:active { transform: translateY(5px); border-bottom-width: 0px; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); }
/* --- GRID HOME.PHP --- */
.container-full-1640 { max-width: 1640px; margin: 0 auto; padding: 0 15px; }
.home-posts-grid { display: grid; gap: 15px; grid-auto-flow: row; }
.home-posts-grid .hp1 { grid-area: home-p1; }
.home-posts-grid .hp2 { grid-area: home-p2; }
.home-posts-grid .hp3 { grid-area: home-p3; }
.home-posts-grid .hp4 { grid-area: home-p4; }
.home-posts-grid .hp5 { grid-area: home-p5; }
.home-posts-grid .hp6 { grid-area: home-p6; }
.home-posts-grid .hp7 { grid-area: home-p7; }
.home-posts-grid .hp8 { grid-area: home-p8; }
.home-posts-grid .hp9 { grid-area: home-p9; }
.home-posts-grid .hp10 { grid-area: home-p10; }
.home-posts-grid .hp11 { grid-area: home-p11; }
.home-posts-grid .hp12 { grid-area: home-p12; }
.home-posts-grid .hp13 { grid-area: home-p13; }
.home-posts-grid .hp14 { grid-area: home-p14; }
.home-posts-grid .hp15 { grid-area: home-p15; }
/* Ẩn bài 13–15 dưới 1201px (12 bài) */
@media (max-width: 1200px) {
.home-posts-grid .hp13, .home-posts-grid .hp14, .home-posts-grid .hp15 { display: none !important; }
}
/* 5 cột × 3 hàng — 1201px–1640+ : 15 bài */
@media (min-width: 1201px) {
.home-posts-grid { grid-template-columns: repeat(5, 1fr); grid-template-areas: "home-p1 home-p2 home-p3 home-p4 home-p5" "home-p6 home-p7 home-p8 home-p9 home-p10" "home-p11 home-p12 home-p13 home-p14 home-p15"; }
}
/* 4 cột × 3 hàng — 961px–1200px : 12 bài */
@media (min-width: 961px) and (max-width: 1200px) {
.home-posts-grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: "home-p1 home-p2 home-p3 home-p4" "home-p5 home-p6 home-p7 home-p8" "home-p9 home-p10 home-p11 home-p12"; }
}
/* 3 cột × 4 hàng — 769px–960px : 12 bài */
@media (min-width: 769px) and (max-width: 960px) {
.home-posts-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "home-p1 home-p2 home-p3" "home-p4 home-p5 home-p6" "home-p7 home-p8 home-p9" "home-p10 home-p11 home-p12"; }
}
.home-card-item { overflow: hidden; height: 100%; background: #FFFFFF; border: none; border-radius: 5px; box-shadow: 0 3px 16px rgba(0, 35, 70, 0.12); transition: box-shadow 0.25s ease; }
.home-card-item:hover { box-shadow: 0 6px 24px rgba(0, 35, 70, 0.2); }
.home-card-item a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.home-card-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.home-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.home-card-item:hover .home-card-thumb img { transform: scale(1.05); }
.home-card-content { padding: 12px; display: flex; flex-direction: column; flex: 1; }
.home-card-title { font-size: 16px; line-height: 1.45; margin: 0 0 10px 0; color: #111; font-weight: 600; flex-grow: 1; }
.home-card-item:hover .home-card-title { color: #1A73E8; transition: color 0.3s ease; }
.home-card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
.grid-cat-tag { font-size: 10px; padding: 2px 8px; color: #fff; font-weight: 700; border-radius: 4px; text-transform: uppercase; display: inline-block; }
.meta-right { display: flex; gap: 10px; font-size: 11px; font-weight: bold; color: #888; }
.meta-right span { display: flex; align-items: center; gap: 4px; }
.meta-right .fa-heart { color: rgba(255, 0, 0, 0.2) !important; }
.meta-right .fa-share-alt { color: #888; }
/* ≤768px : 12 bài — danh sách dọc, ô có padding + đổ bóng */
@media (max-width: 768px) {
.home-posts-grid { display: flex !important; flex-direction: column; gap: 10px; }
.home-card-item { padding: 15px 12px; border-radius: 5px; box-shadow: 0 3px 16px rgba(0, 35, 70, 0.12); }
.home-card-item a { flex-direction: row; align-items: stretch; gap: 10px; height: auto; }
.home-card-thumb { flex: 0 0 110px; align-self: flex-start; aspect-ratio: auto; height: 75px; border-radius: 4px; }
.home-card-content { padding: 2px 0 0; flex: 1; min-width: 0; min-height: 75px; display: flex; flex-direction: column; }
.home-card-title { font-size: 14px; margin: 0 0 6px; flex-grow: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-card-meta { margin-top: auto; padding-top: 6px; flex-shrink: 0; }
}
@media (max-width: 480px) {
.container-full-1640 { padding: 0 10px; }
}
/* ===== PAGE.php ===== */
.page-single-layout { max-width: 900px; margin: 40px auto; padding: 0 15px; background: transparent; }
.page-title { margin-bottom: 30px; border-bottom: 2px solid #880000; padding-bottom: 10px; }
/* ===== SITEMAP ===== */
.sitemap-wrap { max-width: 1100px; margin: 40px auto; padding: 0 15px; background: transparent; }
.sitemap-columns { display: flex; gap: 40px; align-items: flex-start; }
.sitemap-col { width: 50%; }
.sitemap-title { font-size: 20px; margin: 25px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #880000; color: #8B1A1A; }
.sitemap-list { list-style: none; padding: 0; margin: 0; }
.sitemap-list li { margin-bottom: 8px; line-height: 1.6; }
.sitemap-list a { color: #222; text-decoration: none; }
.sitemap-list a:hover { color: #8B1A1A; text-decoration: underline; }
.sitemap-posts { max-height: 650px; overflow-y: auto; padding-right: 8px; }
@media (max-width: 768px) {
.sitemap-columns { flex-direction: column; gap: 25px; }
.sitemap-col { width: 100%; }
.sitemap-posts { max-height: none; overflow: visible; padding-right: 0; }
.sitemap-title { font-size: 18px; }
}
/* ================= FOOTER ================= */
.site-footer { background: #1a1a1a; color: #ccc; padding: 48px 0 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.footer-inner--bottom { width: 100%; max-width: none; margin-top: 0; padding: 18px 15px 28px; background-color: #222222; }
.footer-top { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.15fr) minmax(160px, 0.85fr); gap: 36px 48px; align-items: start; }
.footer-col--logo { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-logo-link { display: block; line-height: 0; }
.footer-logo-link img { max-width: 240px; width: 100%; height: auto; display: block; }
.footer-heading { color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 14px; padding-left: 12px; border-left: 3px solid #CC0000; line-height: 1.3; }
.footer-about-list, .footer-pages-list { list-style: none; padding: 0; margin: 0; }
.footer-about-list li, .footer-pages-list li { margin-bottom: 10px; font-size: 14px; line-height: 1.65; }
.footer-col a { color: #bbb; text-decoration: none; transition: color 0.25s ease; }
.footer-col a:hover { color: #fff; }
.footer-about-list { color: #bbbbbb; }
.footer-about-list strong { color: #ffffff; font-weight: 600; }
.footer-col--about .footer-about-list a { color: #bbbbbb; transition: color 0.25s ease; }
.footer-col--about .footer-about-list a:hover { color: #ffffff; }
.footer-col--pages .footer-pages-list a { color: #bbbbbb; }
.footer-col--pages .footer-pages-list a:hover { color: #ffffff; }
.footer-social { display: flex; gap: 12px; flex-wrap: wrap; }
.footer-social img { width: 32px; height: 32px; object-fit: contain; opacity: 0.9; border-radius: 10px; transition: transform 0.2s ease, opacity 0.2s ease; }
.footer-social a:hover img { opacity: 1; transform: scale(1.08); }
.footer-cat-band { --neo-surface: #222222; width: 100%; margin-top: 40px; padding: 28px 0 6px; border-top: none; background: linear-gradient(180deg, #1a1a1a 0%, #1e1e1e 20px, #222222 52px); }
.footer-cat-bar { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 14px; width: 100%; padding: 8px 14px 14px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; -webkit-overflow-scrolling: touch; background: transparent; }
.footer-cat-bar::-webkit-scrollbar { height: 3px; }
.footer-cat-bar::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 2px; }
.footer-cat-item { flex: 1 1 auto; min-width: 7.25rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px 16px 16px; text-align: center; text-decoration: none; color: #bbbbbb; background: var(--neo-surface); border-radius: 18px; border: none; outline: none; box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.09), 5px 5px 10px rgba(0, 0, 0, 0.42), inset 3px 3px 7px rgba(0, 0, 0, 0.38), inset -3px -3px 7px rgba(255, 255, 255, 0.07); transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.footer-cat-item:hover { color: #ffffff; background-color: #2a2a2a; box-shadow: -6px -6px 12px rgba(255, 255, 255, 0.1), 6px 6px 12px rgba(0, 0, 0, 0.46), inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.08); }
.footer-cat-item:active { color: #bbbbbb; box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.42), inset 5px 5px 10px rgba(255, 255, 255, 0.07); }
.footer-cat-icon { display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: #bbbbbb; transition: color 0.25s ease, transform 0.25s ease; }
.footer-cat-item:hover .footer-cat-icon { color: #ffffff; transform: translateY(-2px); }
.footer-cat-name { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; color: inherit; transition: color 0.25s ease; }
.footer-cat-item:hover .footer-cat-name { color: #ffffff; }
.footer-copyright { text-align: center; font-size: 13px; color: #777; margin: 0; padding: 0; }
@media (max-width: 900px) {
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-col--logo { grid-column: 1 / -1; align-items: center; text-align: center; }
.footer-social { justify-content: center; }
}
@media (max-width: 768px) {
.footer-top { grid-template-columns: 1fr; gap: 28px; }
.footer-col--logo { align-items: flex-start; text-align: left; }
.footer-social { justify-content: flex-start; }
.footer-heading { border-left: 3px solid #CC0000; border-bottom: none; padding: 0 0 0 12px; margin-bottom: 14px; }
.footer-cat-item { min-width: 6.5rem; flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
.footer-inner--bottom { padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.footer-cat-item { transition: color 0.25s ease, background-color 0.25s ease; }
.footer-cat-item:hover, .footer-cat-item:active { box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.09), 5px 5px 10px rgba(0, 0, 0, 0.42), inset 3px 3px 7px rgba(0, 0, 0, 0.38), inset -3px -3px 7px rgba(255, 255, 255, 0.07); }
.footer-cat-item:hover .footer-cat-icon { transform: none; }
.footer-social a:hover img { transform: none; }
}
/* ================= POLICY  ETab 书脁E立佁E================= */
.policy-container { max-width: 900px; margin: 30px auto; color: #333; counter-reset: policy-tab; }
.policy-container .intro-text { background: #f9f9f9; padding: 15px; border-left: 4px solid #BB0000; margin-bottom: 28px; border-radius: 0 6px 6px 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); }
.policy-container details { counter-increment: policy-tab; margin-bottom: 12px; }
.policy-container summary { display: block; position: relative; list-style: none; cursor: pointer; padding: 14px 48px 14px 64px; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%); color: #2C2C2C; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.07); border-bottom: 2px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); outline: none; font-weight: 600; font-size: 15px; line-height: 1.45; transition: transform 0.15s ease, box-shadow 0.15s ease, border-radius 0.3s ease; }
.policy-container summary:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.policy-container summary:active { transform: translateY(1px); border-bottom-width: 1px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.06); }
.policy-container summary::before { content: counter(policy-tab, decimal-leading-zero); position: absolute; left: 0; top: 0; bottom: 0; width: 52px; display: flex; align-items: center; justify-content: center; background: #BB0000; color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; border-radius: 7px 0 0 7px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.12); }
.policy-container summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; line-height: 1; color: #999; transition: transform 0.35s ease, color 0.25s ease; }
.policy-container details.is-open summary { border-radius: 8px 8px 0 0; border-bottom-color: rgba(0, 0, 0, 0.04); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.policy-container details.is-open summary::after { content: '−'; color: #666; transform: translateY(-50%); }
.policy-container summary::-webkit-details-marker { display: none; }
.policy-container details > .content { display: block !important; overflow: hidden; transition: height 0.35s ease, opacity 0.35s ease; }
@media (prefers-reduced-motion: reduce) {
.policy-container details > .content { transition: none; }
}
.policy-container .content { background: #FFFFFF; padding: 20px 24px 24px; border: 1px solid rgba(0, 0, 0, 0.07); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.policy-container .content h3 { color: #BB0000; }
@media (max-width: 480px) {
.policy-container summary { padding: 12px 40px 12px 56px; font-size: 14px; }
.policy-container summary::before { width: 44px; font-size: 13px; }
}
.contact-card { background: #ffffff; padding: 50px 30px; border-radius: 12px; box-shadow: 0 5px 10px rgba(0,0,0,0.08); max-width: 650px; margin: 20px auto; }
.contact-header { text-align: center; margin-bottom: 25px; }
.contact-header h3 { color: #8B1A1A; margin-bottom: 5px; }
.contact-header p { color: #666; font-size: 14px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 30px; line-height: 1.0 !important; }
.form-group label { display: block; color: #333; }
.form-group .req { color: #8B1A1A; }
.contact-card input[type="text"], .contact-card input[type="email"], .contact-card textarea { width: 100%; padding: 12px 15px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 6px; transition: all 0.3s ease; background: #fdfdfd; font-size: 14px; }
.contact-card input:focus, .contact-card textarea:focus { border-color: #C4A862; box-shadow: 0 0 8px rgba(196,168,98,0.2); outline: none; background: #fff; }
.form-submit { text-align: right; }
.form-submit input[type="submit"] { padding: 7px 20px; background-color: #BB0000; color: #ffffff !important; border-radius: 50px; cursor: pointer; transition: all 0.15s ease; border: none; border-bottom: 5px solid rgba(0,0,0,0.2); box-shadow: 2px 3px 4px rgba(0,0,0,0.15), inset 2px 2px 5px rgba(255,255,255,0.5); position: relative; top: 0; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; font-size: 13px; }
.form-submit input[type="submit"]:hover { transform: translateY(4px); border-bottom-width: 1px; box-shadow: 1px 2px 3px rgba(0,0,0,0.1), inset 1px 1px 1px rgba(255,255,255,0.15); background-color: #AA0000; }
.form-submit input[type="submit"]:active { transform: translateY(5px); border-bottom-width: 0px; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); }
@media (max-width: 480px) {
.contact-grid { grid-template-columns: 1fr; gap: 0px; }
}
a:hover { color: #8B1A1A; }
/* ============= TRANG GIỚI THIỆU — .nbv-landing (HTML trong editor WP) ============= */
.entry-content .nbv-landing, .nbv-landing { background: #FFFFFF; color: #2C2C2C; }
.entry-content .nbv-landing__wrap, .nbv-landing__wrap { max-width: 960px; margin: 0 auto; padding: 0 15px 60px; }
.entry-content .nbv-block, .nbv-block { position: relative; padding: 48px 0; }
.entry-content .nbv-block:first-child, .nbv-block:first-child { padding-top: 0; }
.entry-content .nbv-block:last-child, .nbv-block:last-child { padding-bottom: 20px; }
.entry-content .nbv-block__num, .nbv-block__num { display: inline-block; margin-bottom: 20px; padding: 4px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #880000; border: 1px solid rgba(136, 0, 0, 0.25); border-radius: 4px; background: rgba(136, 0, 0, 0.04); }
.entry-content .nbv-eyebrow, .nbv-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #880000; }
.entry-content .nbv-title, .nbv-title { margin: 0 0 16px; font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.35; color: #1A1A1A; }
.entry-content .nbv-title::after, .nbv-title::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 10px; background: #880000; border-radius: 1px; }
.entry-content .nbv-lead, .nbv-lead { margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: #555; max-width: 62ch; }
.entry-content .nbv-hero, .nbv-hero { margin-bottom: 36px; padding: 36px 24px; border-radius: 12px; background: rgba(136, 0, 0, 0.08); color: #1A1A1A; text-align: center; box-shadow: 0 2px 12px rgba(136, 0, 0, 0.06); }
.entry-content .nbv-hero__badge, .nbv-hero__badge { display: inline-block; margin-bottom: 16px; padding: 3px 10px; font-size: 11px; letter-spacing: 0.08em; color: #880000; border: 1px solid rgba(136, 0, 0, 0.25); border-radius: 20px; }
.entry-content .nbv-hero__logos, .nbv-hero__logos { display: block; margin: 0 0 12px; padding: 0; text-align: center; line-height: 0; }
.entry-content .nbv-hero__logo, .nbv-hero__logo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 4px; vertical-align: middle; background: #880000; border-radius: 10px; font-size: 26px; font-weight: 700; color: #fff; line-height: 1; }
.entry-content .nbv-hero__name, .nbv-hero__name { margin: 0 0 4px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #1A1A1A; }
.entry-content .nbv-hero__desc, .nbv-hero__desc { margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.7; color: #555; }
.entry-content .nbv-landing blockquote.nbv-quote, .nbv-quote { margin: 24px 0; padding: 16px 18px 16px 20px; border-left: 4px solid #BB0000; background: #f7f7f7; border-radius: 0 8px 8px 0; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.03); }
.entry-content .nbv-landing blockquote.nbv-quote p, .nbv-quote p { margin: 0; font-size: 15px; font-style: italic; line-height: 1.65; color: #444; }
.entry-content .nbv-text p, .nbv-text p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; color: #3A3A3A; }
.entry-content .nbv-text p:last-child, .nbv-text p:last-child { margin-bottom: 0; }
.entry-content .nbv-stats, .nbv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 36px; }
.entry-content .nbv-text + .nbv-stats, .nbv-text + .nbv-stats { margin-top: 28px; margin-bottom: 0; }
.entry-content .nbv-block--sources, .nbv-block--sources { padding-top: 48px; }
.entry-content .nbv-stat, .nbv-stat { padding: 22px 16px; text-align: center; background: #FFFFFF; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.entry-content .nbv-stat__num, .nbv-stat__num { display: block; margin-bottom: 6px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #880000; line-height: 1.1; }
.entry-content .nbv-stat__label, .nbv-stat__label { font-size: 13px; color: #666; line-height: 1.4; }
.entry-content .nbv-sources, .nbv-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.entry-content .nbv-source, .nbv-source { padding: 14px 12px; text-align: center; background: #FFFFFF; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.entry-content .nbv-source__name, .nbv-source__name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #1A1A1A; }
.entry-content .nbv-founder, .nbv-founder { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 40px; padding: 24px; background: #FFFFFF; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.entry-content .nbv-founder__profile, .nbv-founder__profile { flex-shrink: 0; width: 160px; text-align: center; }
.entry-content .nbv-founder__avatar, .nbv-founder__avatar { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 12px; border-radius: 50%; background: rgba(136, 0, 0, 0.08); font-size: 22px; font-weight: 700; color: #880000; }
.entry-content .nbv-founder__name, .nbv-founder__name { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #1A1A1A; }
.entry-content .nbv-founder__role, .nbv-founder__role { margin: 0; font-size: 13px; line-height: 1.45; color: #880000; font-weight: 600; }
.entry-content .nbv-founder__bio, .nbv-founder__bio { flex: 1; min-width: 0; }
.entry-content .nbv-founder__bio p, .nbv-founder__bio p { margin: 0 0 14px; font-size: 15px; line-height: 1.85; color: #3A3A3A; }
.entry-content .nbv-founder__bio p:last-child, .nbv-founder__bio p:last-child { margin-bottom: 0; }
.entry-content .nbv-values, .nbv-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.entry-content .nbv-value, .nbv-value { padding: 20px 18px; background: #FFFFFF; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.entry-content .nbv-value__icon, .nbv-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 8px; background: rgba(136, 0, 0, 0.08); color: #880000; font-size: 15px; }
.entry-content .nbv-value__title, .nbv-value__title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #1A1A1A; }
.entry-content .nbv-value__text, .nbv-value__text { margin: 0; font-size: 14px; line-height: 1.65; color: #555; }
.entry-content .nbv-contact, .nbv-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.entry-content .nbv-contact__item, .nbv-contact__item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #FFFFFF; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.entry-content .nbv-contact__icon, .nbv-contact__icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(136, 0, 0, 0.08); color: #880000; font-size: 15px; }
.entry-content .nbv-contact__label, .nbv-contact__label { display: block; margin-bottom: 2px; font-size: 12px; color: #888; }
.entry-content .nbv-contact__value, .nbv-contact__value { font-size: 14px; font-weight: 600; color: #1A1A1A; word-break: break-word; }
.entry-content .nbv-contact__item a.nbv-contact__value, .nbv-contact__item a.nbv-contact__value { color: #1A1A1A; text-decoration: none; }
.entry-content .nbv-contact__item a.nbv-contact__value:hover, .nbv-contact__item a.nbv-contact__value:hover { color: #880000; }
@media (max-width: 768px) {
.entry-content .nbv-block, .nbv-block { padding: 36px 0; }
.entry-content .nbv-stats, .nbv-stats { grid-template-columns: 1fr; }
.entry-content .nbv-sources, .nbv-sources { grid-template-columns: repeat(2, 1fr); }
.entry-content .nbv-values, .nbv-values { grid-template-columns: 1fr; }
.entry-content .nbv-founder, .nbv-founder { flex-direction: column; gap: 20px; padding: 20px 16px; }
.entry-content .nbv-founder__profile, .nbv-founder__profile { width: 100%; }
.entry-content .nbv-contact, .nbv-contact { grid-template-columns: 1fr; }
.entry-content .nbv-hero, .nbv-hero { padding: 28px 18px; }
}
@media (max-width: 480px) {
.entry-content .nbv-sources, .nbv-sources { grid-template-columns: 1fr; }
}
/* WP Classic Editor — giữ màu hero giống about-landing */
.entry-content .nbv-landing .nbv-hero__name { color: #1A1A1A; }
.entry-content .nbv-landing .nbv-hero__desc { color: #555; }
.entry-content .nbv-landing .nbv-hero__logos { color: inherit; }
/* ============= REDUCE MOTION (ACCESSIBILITY) ============= */
@media (prefers-reduced-motion: reduce) {
.post-comments-section .comment-input-box, .post-comments-section .comment-form-author input, .post-comments-section .comment-form-email input { transition: none; }
.baonhat-back-to-top { transition: none; }
.baonhat-back-to-top.is-visible { transform: none; }
.rel-post-box { transition: none; }
.header-bg-animation { animation: none; opacity: 1; transform: none; }
.main-logo-img { animation: none; opacity: 1; transform: none; }
.policy-container summary:hover, .policy-container summary:active { transform: none; }
.category-block-item .cat-post-card:hover .info-wrapper h3, .category-block-item .cat-post-card:hover .cat-title-text { color: inherit; }
.category-block-item .cat-post-card:hover .thumb-wrapper .thumb-zoom-clip img { transform: none; }
}
/* ============= BREADCRUMBS RANKMATH ============= */
.breadcrumb-icon { margin-right: 15px; color: #999; }
.rank-math-breadcrumbs-container { display: flex; align-items: flex-start; font-size: 14px; }
.rank-math-breadcrumb { color: #999; }
.rank-math-breadcrumb a { color: #999; text-decoration: none; transition: color 0.2s; }
.rank-math-breadcrumb a:hover { color: #8B1A1A; }
.rank-math-breadcrumb .last { color: #2C2C2C; font-weight: 600; }
.rank-math-breadcrumb .separator { color: #bbb; margin: 0 4px; }