/**
 * WebChiaSe.vn Custom Stylesheet (Flatsome Child Theme)
 *
 * Nguyên tắc:
 * - Tận dụng tối đa Grid (.row, .col) và biến var(--primary-color) của Flatsome.
 * - Không hardcode mã màu xanh dương chính; suy dẫn màu phụ bằng color-mix().
 * - Chia theo từng component .wcs-* (BEM).
 */

/* ==========================================================================
   0. BIẾN CSS & NỀN TẢNG CHUNG (BASE / TOKENS)
   ========================================================================== */
:root {
	--wcs-navy: #0B2A5B;
	--wcs-bg: #F4F7FB;
	--wcs-text: #1F2937;
	--wcs-muted: #6B7280;
	--wcs-radius: 8px;
	--wcs-shadow: 0 2px 8px rgba(11, 42, 91, 0.06);
	--wcs-primary-soft: color-mix(in srgb, var(--primary-color) 10%, #fff);
	--wcs-primary-border: color-mix(in srgb, var(--primary-color) 20%, #fff);
}

body,
#wrapper,
#main {
	background-color: var(--wcs-bg);
	color: var(--wcs-text);
}

.wcs-card {
	background-color: #fff;
	border-radius: var(--wcs-radius);
	box-shadow: var(--wcs-shadow);
	border: 1px solid rgba(11, 42, 91, 0.05);
	padding: 18px;
}

.wcs-card--full-height {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wcs-mb {
	margin-bottom: 20px;
}

.wcs-mt {
	margin-top: 20px;
}

.wcs-badge {
	display: inline-block;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 4px;
	transition: opacity 0.2s ease;
}

.wcs-badge:hover {
	color: #fff;
	opacity: 0.9;
}

.wcs-empty {
	color: var(--wcs-muted);
	font-size: 14px;
	margin: 0;
}

/* ==========================================================================
   1. HEADER BUILDER ELEMENTS (TOP BAR, SEARCH, HOTLINE/EMAIL, MENU)
   ========================================================================== */
.header-top {
	background-color: var(--wcs-navy);
	font-size: 12.5px;
}

.wcs-top-links {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 12.5px;
}

.wcs-top-links a {
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wcs-top-links a:hover {
	opacity: 0.85;
}

.wcs-top-links__sep {
	opacity: 0.4;
}

.header-main {
	background-color: #fff;
}

.header-main .searchform {
	border-radius: var(--wcs-radius);
	overflow: hidden;
	border: 1px solid var(--wcs-primary-border);
	background-color: #F8FAFC;
}

.header-main .searchform input[type="search"] {
	border: 0;
	background: transparent;
	box-shadow: none;
	height: 42px;
	padding-left: 16px;
	font-size: 14px;
	color: var(--wcs-text);
}

.header-main .searchform .ux-search-submit {
	background-color: var(--primary-color);
	color: #fff;
	min-width: 46px;
	height: 42px;
	border-radius: 0;
}

.wcs-header-contacts {
	display: inline-flex;
	align-items: center;
	gap: 24px;
}

.wcs-header-contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.wcs-header-contact__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wcs-primary-soft);
	border: 1px solid var(--wcs-primary-border);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wcs-header-contact__icon svg {
	width: 18px;
	height: 18px;
}

.wcs-header-contact__info {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.wcs-header-contact__label {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--wcs-muted);
	margin-bottom: 2px;
}

.wcs-header-contact__value {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wcs-text);
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

.wcs-header-contact:hover .wcs-header-contact__icon {
	background-color: color-mix(in srgb, var(--primary-color) 18%, #fff);
	border-color: var(--primary-color);
	transform: translateY(-1px);
}

.wcs-header-contact:hover .wcs-header-contact__value {
	color: var(--primary-color);
}

.header-bottom {
	background-color: #fff;
	border-top: 1px solid #EEF2F7;
	border-bottom: 1px solid #EEF2F7;
}

.header-bottom .nav > li > a {
	font-size: 14px;
	font-weight: 600;
	color: var(--wcs-text);
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid transparent;
}

.header-bottom .nav > li > a:hover,
.header-bottom .nav > li.current-menu-item > a,
.header-bottom .nav > li.current-menu-ancestor > a,
.header-bottom .nav > li.active > a {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

/* ==========================================================================
   2. COMPONENT: [wcs_section_title] (.wcs-section-title)
   ========================================================================== */
.wcs-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid #EEF2F7;
}

.wcs-section-title__left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.wcs-section-title__icon {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background-color: var(--wcs-primary-soft);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wcs-section-title__icon svg,
.wcs-section-title__icon img {
	width: 15px;
	height: 15px;
}

.wcs-section-title__heading {
	font-size: 14.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wcs-text);
	margin: 0;
	line-height: 1.25;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.wcs-section-title__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--primary-color);
	white-space: nowrap;
	flex-shrink: 0;
}

.wcs-section-title__more:hover {
	text-decoration: underline;
}

/* ==========================================================================
   3. KHU VỰC HERO (SLIDER TRÁI 8 CỘT + CARD BÀI VIẾT PHẢI 4 CỘT)
   ========================================================================== */
.wcs-hero-section {
	padding-top: 20px;
	padding-bottom: 10px;
}

.wcs-hero-slider {
	border-radius: var(--wcs-radius);
	overflow: hidden;
	box-shadow: var(--wcs-shadow);
}

.wcs-hero-slider .ux-slider,
.wcs-hero-slider .flickity-viewport,
.wcs-hero-slider .banner {
	border-radius: var(--wcs-radius);
}

.wcs-hero-banner__badge {
	display: inline-block;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 99px;
	margin-bottom: 12px;
}

.wcs-hero-banner__title {
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-hero-banner__desc {
	color: rgba(255, 255, 255, 0.88);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-hero-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 20px;
	border-radius: 99px;
	transition: opacity 0.2s ease;
}

.wcs-hero-banner__btn:hover {
	color: #fff;
	opacity: 0.92;
}

/* ==========================================================================
   4. COMPONENT: [wcs_post_list] (.wcs-post-list) & META CHUNG (.wcs-post-meta)
   ========================================================================== */
.wcs-post-list {
	display: flex;
	flex-direction: column;
}

.wcs-post-list__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #EEF2F7;
}

.wcs-post-list__item:first-child {
	padding-top: 0;
}

.wcs-post-list__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wcs-post-list__thumb {
	width: 68px;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
	display: block;
	background-color: #EEF2F7;
}

/* Thẻ bài viết ở cột phải Hero có nhiều diện tích hơn */
.wcs-hero-card .wcs-post-list__thumb,
.wcs-hero-section .wcs-post-list__thumb {
	width: 96px;
	aspect-ratio: 3 / 2;
	border-radius: 6px;
}

.wcs-post-list__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcs-post-list__body {
	flex: 1;
	min-width: 0;
}

.wcs-post-list__cat {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 2px;
	line-height: 1.2;
}

.wcs-post-list__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-hero-section .wcs-post-list__title {
	font-size: 13.5px;
	line-height: 1.4;
}

.wcs-post-list__title a {
	color: var(--wcs-text);
}

.wcs-post-list__title a:hover {
	color: var(--primary-color);
}

/* Meta ngày + lượt xem + bình luận */
.wcs-post-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11.5px;
	color: var(--wcs-muted);
	line-height: 1.2;
}

.wcs-post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.wcs-post-meta__icon {
	display: inline-flex;
	align-items: center;
	width: 13px;
	height: 13px;
}

.wcs-post-meta__icon svg {
	width: 13px;
	height: 13px;
}

/* ==========================================================================
   5. COMPONENT: [wcs_cat_tile] & DẢI 7 DANH MỤC (.wcs-cat-strip)
   ========================================================================== */
.wcs-cat-strip {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 14px;
}

.wcs-cat-tile {
	background-color: #fff;
	border-radius: var(--wcs-radius);
	box-shadow: var(--wcs-shadow);
	border: 1px solid rgba(11, 42, 91, 0.05);
	padding: 16px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wcs-cat-tile:hover {
	border-color: var(--wcs-primary-border);
	background-color: var(--wcs-primary-soft);
}

.wcs-cat-tile__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wcs-primary-soft);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.wcs-cat-tile__icon svg,
.wcs-cat-tile__icon img {
	width: 22px;
	height: 22px;
}

.wcs-cat-tile__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--wcs-text);
	line-height: 1.3;
	margin-bottom: 3px;
}

.wcs-cat-tile__desc {
	font-size: 11.5px;
	color: var(--wcs-muted);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ==========================================================================
   6. 3 KHỐI NỘI DUNG (ROW 4.5 / 4.5 / 3) & [wcs_post_featured]
   ========================================================================== */
@media screen and (min-width: 850px) {
	.row.wcs-row-main > .col:nth-child(1) {
		flex: 0 0 44%;
		max-width: 44%;
	}

	.row.wcs-row-main > .col:nth-child(2) {
		flex: 0 0 32%;
		max-width: 32%;
	}

	.row.wcs-row-main > .col:nth-child(3) {
		flex: 0 0 24%;
		max-width: 24%;
	}
}

.wcs-post-featured__media {
	position: relative;
	margin-bottom: 10px;
}

.wcs-post-featured__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9.5;
	border-radius: 6px;
	overflow: hidden;
	background-color: #EEF2F7;
}

.wcs-post-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcs-post-featured__badge-wrap {
	margin-bottom: 6px;
}

.wcs-post-featured__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-post-featured__title a {
	color: var(--wcs-text);
}

.wcs-post-featured__title a:hover {
	color: var(--primary-color);
}

.wcs-post-featured__excerpt {
	font-size: 12.5px;
	color: var(--wcs-muted);
	line-height: 1.45;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Khoảng cách giữa bài nổi bật và danh sách bài bên dưới (khối Công nghệ - IT) */
.wcs-it-list-wrap {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid #EEF2F7;
}

.wcs-it-list-wrap .wcs-post-list__item {
	padding: 8px 0;
	gap: 10px;
}

.wcs-it-list-wrap .wcs-post-list__thumb {
	width: 50px;
	height: 50px;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
}

/* ==========================================================================
   7. COMPONENT: [wcs_post_ranked] (.wcs-post-ranked)
   ========================================================================== */
.wcs-post-ranked {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcs-post-ranked__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed #E5E7EB;
	margin: 0;
}

.wcs-post-ranked__item:first-child {
	padding-top: 2px;
}

.wcs-post-ranked__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wcs-post-ranked__num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.wcs-post-ranked__title {
	flex: 1;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wcs-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-post-ranked__title:hover {
	color: var(--primary-color);
}

.wcs-post-ranked__views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--wcs-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.wcs-post-ranked__views-icon {
	width: 14px;
	height: 14px;
	display: inline-flex;
}

/* ==========================================================================
   8. COMPONENT: [wcs_cta_banner] (.wcs-cta-banner)
   ========================================================================== */
.wcs-cta-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--wcs-radius);
	background: linear-gradient(135deg, var(--wcs-navy) 0%, var(--primary-color) 100%);
	color: #fff;
	padding: 20px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-shadow: var(--wcs-shadow);
}

.wcs-cta-banner__icon-mobile {
	display: none;
}

.wcs-cta-banner__body {
	position: relative;
	z-index: 2;
	max-width: 68%;
}

.wcs-cta-banner__subtitle {
	display: none;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 2px;
}

.wcs-cta-banner__title {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.3;
}

.wcs-cta-banner__text {
	color: rgba(255, 255, 255, 0.9);
	font-size: 12.5px;
	line-height: 1.45;
	margin: 0 0 14px;
}

.wcs-cta-banner__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: #fff;
	color: var(--primary-color);
	font-size: 12.5px;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 99px;
	text-decoration: none;
}

.wcs-cta-banner__btn:hover {
	color: var(--wcs-navy);
}

.wcs-cta-banner__btn-arrow {
	display: none;
}

.wcs-cta-banner__media {
	position: absolute;
	right: 6px;
	bottom: 0;
	width: 110px;
	z-index: 1;
	pointer-events: none;
}

.wcs-cta-banner__img {
	width: 100%;
	height: auto;
	display: block;
}

.wcs-cta-banner__decor {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wcs-cta-banner__decor-icon {
	width: 34px;
	height: 34px;
	color: #fff;
	display: inline-flex;
}

/* ==========================================================================
   9. COMPONENT: [wcs_feature_item] & FOOTER STRIP NỀN NAVY
   ========================================================================== */
.wcs-footer-strip {
	background-color: var(--wcs-navy);
	color: #fff;
	padding: 20px 0;
}

.wcs-footer-strip__features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.wcs-feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 14px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.wcs-footer-strip__features .wcs-feature-item:last-child {
	border-right: 0;
	padding-right: 0;
}

.wcs-feature-item__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--wcs-radius);
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wcs-feature-item__icon svg,
.wcs-feature-item__icon img {
	width: 20px;
	height: 20px;
}

.wcs-feature-item__title {
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	margin: 0 0 2px;
	line-height: 1.3;
}

.wcs-feature-item__desc {
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	margin: 0;
	line-height: 1.3;
}

.wcs-footer-strip__brand {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.wcs-footer-strip__slogan {
	font-style: italic;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.85);
	text-align: right;
	max-width: 140px;
}

.wcs-footer-strip__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.wcs-footer-strip__logo:hover {
	color: #fff;
}

.wcs-footer-strip__logo-icon {
	width: 30px;
	height: 24px;
	display: inline-flex;
}

/* ==========================================================================
   10. TRANG CHUYÊN MỤC (ARCHIVE) & CHI TIẾT BÀI VIẾT (SINGLE POST)
   ========================================================================== */
.wcs-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--wcs-muted);
	margin-bottom: 14px;
}

.wcs-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--wcs-muted);
}

.wcs-breadcrumb__link:hover {
	color: var(--primary-color);
}

.wcs-breadcrumb__home-icon {
	width: 14px;
	height: 14px;
	display: inline-flex;
	color: var(--primary-color);
}

.wcs-breadcrumb__current {
	color: var(--wcs-text);
	font-weight: 500;
}

.wcs-archive-header {
	padding-top: 16px;
	margin-bottom: 20px;
}

.wcs-archive-banner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wcs-archive-banner__main {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wcs-archive-banner__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--wcs-primary-soft);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wcs-archive-banner__icon svg {
	width: 26px;
	height: 26px;
}

.wcs-archive-banner__title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.wcs-archive-banner__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--wcs-text);
	margin: 0;
}

.wcs-archive-banner__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	background-color: var(--wcs-primary-soft);
	padding: 3px 10px;
	border-radius: 99px;
}

.wcs-archive-banner__desc,
.wcs-archive-banner__desc p {
	font-size: 13.5px;
	color: var(--wcs-muted);
	margin: 4px 0 0;
}

.wcs-archive-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid #EEF2F7;
}

.wcs-archive-subcats__pill {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--wcs-text);
	background-color: var(--wcs-bg);
	border: 1px solid var(--wcs-primary-border);
	padding: 5px 12px;
	border-radius: 99px;
}

.wcs-archive-subcats__pill:hover {
	background-color: var(--primary-color);
	color: #fff;
}

/* Danh sách bài viết trong trang chuyên mục */
.wcs-archive-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid #EEF2F7;
}

.wcs-archive-item:first-child {
	padding-top: 0;
}

.wcs-archive-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wcs-archive-item__thumb {
	width: 230px;
	aspect-ratio: 16 / 10;
	border-radius: var(--wcs-radius);
	overflow: hidden;
	flex-shrink: 0;
	display: block;
	background-color: #EEF2F7;
}

.wcs-archive-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcs-archive-item__body {
	flex: 1;
	min-width: 0;
}

.wcs-archive-item__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: 2px 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-archive-item__title a {
	color: var(--wcs-text);
}

.wcs-archive-item__title a:hover {
	color: var(--primary-color);
}

.wcs-archive-item__excerpt {
	font-size: 13.5px;
	color: var(--wcs-muted);
	line-height: 1.5;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcs-pagination-wrap {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #EEF2F7;
}

/* Sidebar chuyên mục */
.wcs-sidebar-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcs-sidebar-cats__item {
	margin: 0;
	border-bottom: 1px dashed #E5E7EB;
}

.wcs-sidebar-cats__item:last-child {
	border-bottom: 0;
}

.wcs-sidebar-cats__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wcs-text);
}

.wcs-sidebar-cats__item.is-active .wcs-sidebar-cats__link,
.wcs-sidebar-cats__link:hover {
	color: var(--primary-color);
}

.wcs-sidebar-cats__count {
	font-size: 11.5px;
	font-weight: 600;
	background-color: var(--wcs-primary-soft);
	color: var(--primary-color);
	padding: 2px 8px;
	border-radius: 99px;
}

/* Chi tiết bài viết (Single Post) */
.wcs-single__header {
	padding-bottom: 16px;
	margin-bottom: 18px;
	border-bottom: 1px solid #EEF2F7;
}

.wcs-single__badge-wrap {
	margin-bottom: 10px;
}

.wcs-single__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wcs-text);
	margin: 0 0 14px;
}

.wcs-single__meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.wcs-single__author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wcs-single__author-avatar {
	border-radius: 50%;
}

.wcs-single__author-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wcs-text);
}

.wcs-single__featured-img {
	margin-bottom: 20px;
	border-radius: var(--wcs-radius);
	overflow: hidden;
}

.wcs-single__img {
	width: 100%;
	height: auto;
	display: block;
}

.wcs-single__content {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--wcs-text);
}

.wcs-single__content h2,
.wcs-single__content h3 {
	color: var(--wcs-text);
	font-weight: 700;
	margin-top: 24px;
	margin-bottom: 12px;
}

.wcs-single__content h2 {
	font-size: 20px;
	padding-left: 12px;
	border-left: 4px solid var(--primary-color);
}

.wcs-single__content blockquote {
	background-color: var(--wcs-primary-soft);
	border-left: 4px solid var(--primary-color);
	padding: 14px 18px;
	border-radius: 0 var(--wcs-radius) var(--wcs-radius) 0;
	font-style: normal;
	color: var(--wcs-text);
}

.wcs-single__footer {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #EEF2F7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.wcs-single__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.wcs-single__tags-label,
.wcs-single__share-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcs-muted);
	margin-right: 4px;
}

.wcs-single__tag-pill {
	font-size: 12px;
	color: var(--primary-color);
	background-color: var(--wcs-primary-soft);
	padding: 4px 10px;
	border-radius: 99px;
}

.wcs-single__tag-pill:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.wcs-single__share {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wcs-author-box {
	margin-top: 20px;
	padding: 16px;
	border-radius: var(--wcs-radius);
	background-color: var(--wcs-bg);
	border: 1px solid var(--wcs-primary-border);
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.wcs-author-box__avatar img {
	border-radius: 50%;
}

.wcs-author-box__name {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px;
}

.wcs-author-box__bio {
	font-size: 13px;
	color: var(--wcs-muted);
	margin: 0;
}

.wcs-post-nav {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #EEF2F7;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.wcs-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	border-radius: var(--wcs-radius);
	background-color: var(--wcs-bg);
	border: 1px solid transparent;
}

.wcs-post-nav__link:hover {
	border-color: var(--wcs-primary-border);
}

.wcs-post-nav__col.is-next .wcs-post-nav__link {
	text-align: right;
}

.wcs-post-nav__label {
	font-size: 11.5px;
	color: var(--wcs-muted);
}

.wcs-post-nav__title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wcs-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   11. THANH ĐIỀU HƯỚNG CỐ ĐỊNH DƯỚI ĐÁY MOBILE (.wcs-mobile-bottom-nav)
   ========================================================================== */
.wcs-mobile-bottom-nav {
	display: none;
}

/* ==========================================================================
   12. RESPONSIVE THEO BREAKPOINT FLATSOME (849px / 549px)
   ========================================================================== */
@media screen and (max-width: 849px) {
	body {
		padding-bottom: 64px;
	}

	/* Dải 7 danh mục cuộn ngang trên Tablet & Mobile */
	.wcs-cat-strip {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.wcs-cat-strip::-webkit-scrollbar {
		display: none;
	}

	.wcs-cat-tile {
		flex: 0 0 96px;
		scroll-snap-align: start;
		padding: 12px 8px;
		border-radius: 14px;
	}

	.wcs-cat-tile__desc {
		display: none;
	}

	.wcs-cat-tile.is-active {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
	}

	.wcs-cat-tile.is-active .wcs-cat-tile__icon {
		background-color: rgba(255, 255, 255, 0.2);
		color: #fff;
	}

	.wcs-cat-tile.is-active .wcs-cat-tile__title {
		color: #fff;
	}

	/* Footer strip 2 cột trên Tablet */
	.wcs-footer-strip__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wcs-feature-item {
		border-right: 0;
		padding-right: 0;
	}

	.wcs-footer-strip__brand {
		justify-content: flex-start;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.wcs-footer-strip__slogan {
		text-align: left;
		max-width: none;
	}

	/* Hiển thị Mobile Bottom Bar */
	.wcs-mobile-bottom-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: #fff;
		border-top: 1px solid #E5E7EB;
		box-shadow: 0 -2px 10px rgba(11, 42, 91, 0.06);
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		height: 60px;
	}

	.wcs-mobile-bottom-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		color: var(--wcs-muted);
		font-size: 11.5px;
		font-weight: 500;
		text-decoration: none;
		position: relative;
	}

	.wcs-mobile-bottom-nav__icon {
		width: 20px;
		height: 20px;
		display: inline-flex;
	}

	.wcs-mobile-bottom-nav__icon svg {
		width: 20px;
		height: 20px;
	}

	.wcs-mobile-bottom-nav__item.is-active {
		color: var(--primary-color);
		font-weight: 600;
	}

	.wcs-mobile-bottom-nav__item.is-active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 25%;
		right: 25%;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background-color: var(--primary-color);
	}
}

@media screen and (max-width: 549px) {
	.wcs-card {
		padding: 14px;
	}

	.wcs-hero-banner__title {
		font-size: 21px;
	}

	.wcs-hero-banner__desc {
		font-size: 13px;
	}

	/* Trên mobile, badge chuyên mục bài nổi bật nằm đè góc trái trên ảnh giống mockup */
	.wcs-post-featured {
		position: relative;
	}

	.wcs-post-featured__badge-wrap {
		position: absolute;
		top: 10px;
		left: 10px;
		margin-bottom: 0;
		z-index: 2;
	}

	.wcs-post-featured__badge-wrap .wcs-badge {
		border-radius: 99px;
		padding: 4px 10px;
	}

	/* CTA Banner chuyển sang giao diện thẻ sáng ngang giống thiết kế Mobile */
	.wcs-cta-banner {
		background: var(--wcs-primary-soft);
		border: 1px solid var(--wcs-primary-border);
		color: var(--wcs-text);
		padding: 14px;
		gap: 12px;
	}

	.wcs-cta-banner__icon-mobile {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background-color: var(--primary-color);
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.wcs-cta-banner__icon-mobile svg {
		width: 22px;
		height: 22px;
	}

	.wcs-cta-banner__body {
		max-width: 100%;
		flex: 1;
	}

	.wcs-cta-banner__subtitle {
		display: block;
	}

	.wcs-cta-banner__title {
		color: var(--wcs-text);
		font-size: 14px;
		margin-bottom: 3px;
	}

	.wcs-cta-banner__text {
		color: var(--wcs-muted);
		font-size: 11.5px;
		margin-bottom: 8px;
	}

	.wcs-cta-banner__btn {
		background-color: #fff;
		border: 1px solid var(--primary-color);
		color: var(--primary-color);
		padding: 5px 12px;
		font-size: 12px;
	}

	.wcs-cta-banner__btn-arrow {
		display: inline;
	}

	.wcs-cta-banner__media,
	.wcs-cta-banner__decor {
		display: none;
	}

	/* Archive item xếp dọc trên màn hình nhỏ */
	.wcs-archive-item {
		flex-direction: column;
		gap: 12px;
	}

	.wcs-archive-item__thumb {
		width: 100%;
	}

	.wcs-single__title {
		font-size: 21px;
	}

	.wcs-post-nav {
		grid-template-columns: 1fr;
	}

	.wcs-footer-strip__features {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}