/*
Theme Name: KPRO
Theme URI: https://example.com/kpro
Author: KPRO Team
Author URI: https://example.com
Description: Theme KPRO - Giao diện chuyên nghiệp cho website dịch vụ, tin tức. Hỗ trợ tuỳ biến widget kéo thả tại trang chủ, tuỳ chỉnh màu sắc/cỡ chữ, meta bài viết, hiển thị danh sách bài viết 1-4 cột. Tối ưu tốc độ tải trang, tương thích PHP 8.0+ và WordPress mới nhất.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Tested up to: 6.6
Text Domain: kpro
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   KPRO THEME - CORE STYLES
   Toàn bộ CSS được gộp vào 1 file duy nhất để giảm số lượng
   request HTTP, tối ưu tốc độ tải trang.
   ========================================================= */

:root{
	--kpro-primary: #4f8a5b;      /* xanh lá đậm */
	--kpro-primary-dark: #2f5233; /* xanh lá rất đậm (chữ, tiêu đề) */
	--kpro-accent: #c6d94e;       /* vàng chanh - điểm nhấn gradient */
	--kpro-bg-box: #ffffff;       /* nền khung box (dự phòng) */
	--kpro-border: #6ea36f;       /* viền khung (dự phòng) */
	--kpro-text: #33403a;
	--kpro-text-light: #6b7d70;
	--kpro-white: #ffffff;
	--kpro-radius: 10px;
	--kpro-max-width: 1200px;
	--kpro-gap: 24px;
	--kpro-box-bg: #ffffff;       /* màu nền khung gán widget */
	--kpro-box-border: #6ea36f;   /* màu viền khung gán widget */
	--kpro-box-padding-top: 28px;
	--kpro-box-padding-right: 28px;
	--kpro-box-padding-bottom: 28px;
	--kpro-box-padding-left: 28px;

	/* ---- Typography: Logo ---- */
	--kpro-logo-size: 38px;
	--kpro-logo-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-logo-color: #2f5233;
	--kpro-logo-weight: 800;
	--kpro-logo-line-height: 1.2;
	--kpro-logo-align: center;
	--kpro-logo-width: 200px;

	/* ---- Typography: Footer - tiêu đề ---- */
	--kpro-footer-title-size: 22px;
	--kpro-footer-title-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-footer-title-color: #2f5233;
	--kpro-footer-title-weight: 800;
	--kpro-footer-title-line-height: 1.3;

	/* ---- Typography: Footer - nội dung ---- */
	--kpro-footer-text-size: 16px;
	--kpro-footer-text-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-footer-text-color: #2f5233;
	--kpro-footer-text-weight: 400;
	--kpro-footer-text-line-height: 1.7;

	/* ---- Typography: Tiêu đề bài viết ---- */
	--kpro-posttitle-size: 28px;
	--kpro-posttitle-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-posttitle-color: #2f5233;
	--kpro-posttitle-weight: 800;
	--kpro-posttitle-line-height: 1.35;

	/* ---- Typography: Meta bài viết ---- */
	--kpro-meta-size: 13px;
	--kpro-meta-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-meta-color: #c98a3c;
	--kpro-meta-weight: 600;
	--kpro-meta-line-height: 1.4;

	/* ---- Typography: Nội dung bài viết ---- */
	--kpro-content-size: 16px;
	--kpro-content-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-content-color: #33403a;
	--kpro-content-weight: 400;
	--kpro-content-line-height: 1.65;

	/* ---- Typography: Thẻ tag ---- */
	--kpro-tags-size: 14px;
	--kpro-tags-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-tags-color: #4f8a5b;
	--kpro-tags-weight: 600;
	--kpro-tags-line-height: 1.4;

	/* ---- Typography: Card bài viết - Tiêu đề ---- */
	--kpro-card-title-size: 18px;
	--kpro-card-title-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-card-title-color: #2f5233;
	--kpro-card-title-weight: 700;
	--kpro-card-title-line-height: 1.35;

	/* ---- Typography: Card bài viết - Meta ---- */
	--kpro-card-meta-size: 12px;
	--kpro-card-meta-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-card-meta-color: #c98a3c;
	--kpro-card-meta-weight: 600;
	--kpro-card-meta-line-height: 1.4;

	/* ---- Typography: Card bài viết - Mô tả (excerpt) ---- */
	--kpro-card-excerpt-size: 14px;
	--kpro-card-excerpt-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-card-excerpt-color: #6b7d70;
	--kpro-card-excerpt-weight: 400;
	--kpro-card-excerpt-line-height: 1.55;

	/* ---- Typography: Menu điều hướng ---- */
	--kpro-menu-family: 'Be Vietnam Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
	--kpro-menu-size: 14px;
	--kpro-menu-weight: 600;
	--kpro-menu-align: center;
	--kpro-menu-justify: center;
	--kpro-bg-effect-gradient: linear-gradient(to bottom, rgba(79,138,91,.8) 0%, rgba(79,138,91,0) 100%);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
	margin:0;
	font-family:"Be Vietnam Pro","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:16px;
	color:var(--kpro-text);
	background:#fff;
	line-height:1.65;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--kpro-primary);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--kpro-primary-dark);}
ul{margin:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}

.kpro-container{
	max-width:var(--kpro-max-width);
	margin:0 auto;
	padding:0 20px;
}
.screen-reader-text{
	position:absolute!important;
	width:1px;height:1px;overflow:hidden;
	clip:rect(1px,1px,1px,1px);
	white-space:nowrap;
}
.skip-link{
	position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:10000;
}
.skip-link:focus{left:10px;top:10px;}

/* ---------- Wrapper bọc toàn bộ nội dung (nằm trên hiệu ứng nền động) ---------- */
.kpro-site-wrapper{
	position:relative;
	z-index:1;
}

/* ---------- Hiệu ứng nền động: khối vuông bay lên ---------- */
/* Bọc riêng bằng 1 lớp "isolation" để chắc chắn vị trí "fixed" luôn tính theo
   khung nhìn (viewport) của trình duyệt, không bị ảnh hưởng bởi bất kỳ phần tử
   cha nào (một số plugin/theme khác có thể vô tình thêm transform/filter vào
   thẻ html/body khiến "position:fixed" bị "hỏng" trên máy tính - card index
   dưới đây chủ động ngăn việc đó bằng cách đặt hiệu ứng làm phần tử NGOÀI
   CÙNG, ngay sau <body>, và ép tạo layer GPU riêng để trình duyệt luôn vẽ
   đúng, mượt mà trên mọi kích thước màn hình). */
html,body{overflow-x:clip;}
.kpro-animated-bg{
	position:fixed;
	inset:0;
	z-index:0;
	overflow:hidden;
	pointer-events:none;
	isolation:isolate;
	transform:translateZ(0);
	background:var(--kpro-bg-effect-gradient, linear-gradient(to bottom, rgba(79,138,91,.8) 0%, rgba(79,138,91,0) 100%));
}
.kpro-animated-bg ul{list-style:none;margin:0;padding:0;width:100%;height:100%;position:relative;}
.kpro-animated-bg li{
	position:absolute;
	display:block;
	list-style:none;
	width:20px;
	height:20px;
	background:rgba(255,255,255,.2); /* dự phòng - giá trị thật do PHP in inline theo Customizer (vị trí/kích thước/tốc độ/màu + độ mờ ngẫu nhiên từng khối) */
	animation-name:kpro-bg-float;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-duration:25s;
	animation-fill-mode:none;
	animation-direction:normal;
	animation-play-state:running;
	will-change:transform,opacity;
	backface-visibility:hidden;
	bottom:-150px;
}
/* Quãng đường bay lên tính theo chiều cao khung nhìn (100vh) thay vì 1 số cố
   định (-1000px). Đây chính là lỗi khiến hiệu ứng "không hoạt động" trên máy
   tính: màn hình máy tính thường cao hơn nhiều so với điện thoại (nhất là màn
   hình lớn/độ phân giải cao), nên mức di chuyển cố định 1000px trước đây
   không đủ để khối vuông bay hết ra khỏi màn hình - nó mờ dần và biến mất
   ngay giữa màn hình thay vì bay lên rõ ràng, khiến hiệu ứng trông như "không
   chạy". Dùng đơn vị vh giúp hiệu ứng luôn chạy đúng trên MỌI kích thước màn
   hình (điện thoại lẫn máy tính). */
/* LƯU Ý về opacity ở keyframe 100%: cố tình để 0.02 (gần như trong suốt)
   thay vì 0 tuyệt đối. Một số trình duyệt (đặc biệt bản cũ trên máy tính) coi
   phần tử có opacity đúng bằng 0 là "không cần vẽ" và có thể huỷ layer tăng
   tốc GPU của nó để tiết kiệm tài nguyên - khi vòng lặp animation quay lại
   khung hình 0%, layer đó đôi khi không được dựng lại đúng cách, khiến khối
   vuông "bay lên 1 lần rồi đứng yên/biến mất" thay vì lặp lại liên tục. Giữ
   opacity ở mức gần-0 (không tuyệt đối 0) giúp trình duyệt luôn giữ layer
   sống, đảm bảo animation lặp vô hạn mượt mà. */
@keyframes kpro-bg-float{
	0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0;}
	100%{transform:translateY(-130vh) rotate(720deg);opacity:0.02;border-radius:50%;}
}
@media (prefers-reduced-motion:reduce){
	.kpro-animated-bg li{animation:none;}
}
/* Bật/tắt hiệu ứng riêng theo thiết bị (Customizer > Hiệu ứng nền động). */
@media (min-width:681px){
	body.kpro-bg-hide-desktop .kpro-animated-bg{display:none;}
}
@media (max-width:680px){
	body.kpro-bg-hide-mobile .kpro-animated-bg{display:none;}
}
/* "Luôn chạy hiệu ứng kể cả khi bật Giảm chuyển động": nhiều máy tính (đặc
   biệt Windows) có bật sẵn tuỳ chọn hệ điều hành/trình duyệt "Reduce Motion"
   để tiết kiệm pin/trợ năng. Khi đó, quy tắc @media ở trên sẽ tắt animation
   theo đúng chuẩn CSS - đây chính là lý do phổ biến khiến hiệu ứng "không
   chạy" dù đã bật trong Customizer, và thường xảy ra trên máy tính nhiều hơn
   điện thoại vì tính năng này phổ biến hơn ở Windows/macOS. Selector dưới đây
   có độ ưu tiên (specificity) cao hơn quy tắc reduced-motion ở trên nên sẽ
   luôn thắng, bất kể cài đặt "Reduce Motion" của người xem, khi admin bật tuỳ
   chọn này trong Customizer. Khai báo đầy đủ TẤT CẢ thuộc tính animation-*
   (không chỉ animation-name) để đảm bảo không thuộc tính nào bị "rơi" về giá
   trị mặc định (animation-iteration-count mặc định chỉ chạy 1 lần). */
body.kpro-bg-force-motion .kpro-animated-bg li{
	animation-name:kpro-bg-float;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-fill-mode:none;
	animation-direction:normal;
	animation-play-state:running;
}

/* ---------- Header ---------- */
.kpro-header{
	padding:28px 0 18px;
	text-align:var(--kpro-logo-align);
	background:transparent;
}
/* Khi hiệu ứng nền động bị tắt, dùng lại nền đặc cho header để giữ giao diện gọn gàng */
body.kpro-bg-effect-off .kpro-header{background:var(--kpro-white);}
.kpro-logo-link{display:inline-block;}
.kpro-logo-img{max-height:70px;margin:0 auto;}
.custom-logo-link{display:inline-block;}
.custom-logo{width:var(--kpro-logo-width);max-width:100%;height:auto;}
.kpro-logo-text{
	font-size:var(--kpro-logo-size);
	font-family:var(--kpro-logo-family);
	font-weight:var(--kpro-logo-weight);
	line-height:var(--kpro-logo-line-height);
	color:var(--kpro-logo-color);
	letter-spacing:2px;
	margin:0;
}
.kpro-site-description{color:var(--kpro-text-light);margin-top:4px;font-size:14px;}

/* ---------- Menu ---------- */
.kpro-nav-wrap{
	max-width:var(--kpro-max-width);
	margin:0 auto 28px;
	padding:0 20px;
}
.kpro-nav{
	background:linear-gradient(90deg,var(--kpro-primary) 0%,var(--kpro-accent) 100%);
	border:1px solid var(--kpro-border);
	border-radius:8px;
	overflow:hidden;
}
.kpro-nav ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:var(--kpro-menu-justify,center);
	list-style:none;
}
.kpro-nav li{position:relative;}
.kpro-nav a{
	display:block;
	padding:14px 22px;
	color:#fff;
	font-family:var(--kpro-menu-family);
	font-size:var(--kpro-menu-size);
	font-weight:var(--kpro-menu-weight);
	text-align:var(--kpro-menu-align,center);
	letter-spacing:.5px;
	text-transform:uppercase;
}
.kpro-nav a:hover,.kpro-nav .current-menu-item>a{
	background:rgba(0,0,0,.12);
	color:#fff;
}
.kpro-nav ul ul{
	display:none;
	position:absolute;
	top:100%;left:0;
	min-width:220px;
	background:var(--kpro-primary-dark);
	flex-direction:column;
	z-index:50;
	border-radius:0 0 8px 8px;
	overflow:hidden;
}
.kpro-nav li:hover>ul{display:flex;}
.kpro-nav ul ul a{padding:12px 18px;text-transform:none;font-weight:500;}
.kpro-menu-toggle{
	display:none;
	width:100%;
	padding:14px;
	background:var(--kpro-primary);
	color:#fff;border:0;
	font-weight:700;text-transform:uppercase;
	cursor:pointer;
}

/* ---------- Boxes / khung widget (giống style trong mockup) ---------- */
.kpro-box{
	background:var(--kpro-box-bg);
	border:1px solid var(--kpro-box-border);
	border-radius:var(--kpro-radius);
	padding:var(--kpro-box-padding-top) var(--kpro-box-padding-right) var(--kpro-box-padding-bottom) var(--kpro-box-padding-left);
	margin-bottom:var(--kpro-gap);
}
/* Bỏ khoảng cách thừa trên/dưới do thẻ <p> đầu/cuối gây ra bên trong khung widget */
.kpro-box > *:first-child,
.kpro-box .widget > *:first-child,
.kpro-sidebar .widget > *:first-child{margin-top:0;}
.kpro-box > *:last-child,
.kpro-box .widget > *:last-child,
.kpro-sidebar .widget > *:last-child{margin-bottom:0;}
.kpro-box p:first-child,
.kpro-sidebar .widget p:first-child{margin-top:0;}
.kpro-box p:last-child,
.kpro-sidebar .widget p:last-child{margin-bottom:0;}
.kpro-box-placeholder{
	min-height:140px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#c0392b;
	font-weight:700;
	font-size:18px;
}
.kpro-columns{
	display:grid;
	gap:var(--kpro-gap);
	margin-bottom:var(--kpro-gap);
}
.kpro-columns.cols-2{grid-template-columns:1fr 1fr;}
.kpro-columns.cols-3{grid-template-columns:repeat(3,1fr);}
.kpro-columns.cols-4{grid-template-columns:repeat(4,1fr);}
.kpro-columns .kpro-box{margin-bottom:0;height:100%;min-height:320px;}

/* ---------- Content wrapper ---------- */
.kpro-content{
	max-width:var(--kpro-max-width);
	margin:0 auto;
	padding:0 20px 0px;
}
.kpro-content.has-sidebar{
	display:grid;
	grid-template-columns:1fr 320px;
	gap:var(--kpro-gap);
	align-items:start;
}
/* Trang danh sách bài viết (chuyên mục/thẻ tag/tìm kiếm): không sidebar,
   danh sách bài viết chiếm 100% chiều rộng khung nội dung. */
.kpro-content-full{width:100%;}
.kpro-content-full .kpro-post-list{width:100%;}

/* ---------- Bài viết đơn ---------- */
/* Khung ảnh đại diện: nền/viền dùng chung với khung widget, nhưng khoảng cách
   nội dung (ảnh) tới viền LUÔN = 0, không phụ thuộc cài đặt khoảng cách chung
   của khung widget (padding-top/right/bottom/left). */
.kpro-post-thumbnail{
	background:var(--kpro-box-bg);
	border:1px solid var(--kpro-box-border);
	border-radius:var(--kpro-radius);
	padding:0;
	overflow:hidden;
	margin-bottom:var(--kpro-gap);
}
.kpro-post-thumbnail img{width:100%;display:block;border-radius:0;margin:0;}
.kpro-entry-title{
	text-align:center;
	color:var(--kpro-posttitle-color);
	font-size:var(--kpro-posttitle-size);
	font-family:var(--kpro-posttitle-family);
	font-weight:var(--kpro-posttitle-weight);
	line-height:var(--kpro-posttitle-line-height);
	margin:26px 0 8px;
}
.kpro-entry-meta{
	text-align:center;
	color:var(--kpro-meta-color);
	font-family:var(--kpro-meta-family);
	text-transform:uppercase;
	font-size:var(--kpro-meta-size);
	font-weight:var(--kpro-meta-weight);
	line-height:var(--kpro-meta-line-height);
	letter-spacing:.5px;
	margin-bottom:22px;
}
.kpro-entry-meta a{color:inherit;}
.kpro-entry-meta span:not(:last-child)::after{content:"|";margin:0 8px;color:#cbb98a;}
.kpro-entry-content{
	font-size:var(--kpro-content-size);
	font-family:var(--kpro-content-family);
	color:var(--kpro-content-color);
	font-weight:var(--kpro-content-weight);
	line-height:var(--kpro-content-line-height);
}
.kpro-entry-content p{margin:0 0 18px;}
.kpro-entry-content h2,.kpro-entry-content h3{color:var(--kpro-primary-dark);}
.kpro-entry-content img{border-radius:8px;margin:10px 0;}
.kpro-meta-desc{color:var(--kpro-text-light);font-style:italic;margin-bottom:20px;}
.kpro-post-tags{
	font-size:var(--kpro-tags-size);
	font-family:var(--kpro-tags-family);
	line-height:var(--kpro-tags-line-height);
}
.kpro-post-tags a{
	color:var(--kpro-tags-color);
	font-weight:var(--kpro-tags-weight);
	font-family:var(--kpro-tags-family);
	font-size:var(--kpro-tags-size);
}

/* ---------- Bộ chọn số cột (1-4 cột) ---------- */
.kpro-column-switcher{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
	align-items:center;
	margin-bottom:14px;
	font-size:13px;
}
.kpro-column-switcher-label{color:#6b7d70;}
.kpro-col-btn{
	padding:5px 10px;
	border:1px solid var(--kpro-border);
	border-radius:4px;
	color:var(--kpro-primary-dark);
	background:transparent;
	cursor:pointer;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.kpro-col-btn:hover{border-color:var(--kpro-primary);color:var(--kpro-primary-dark);}
.kpro-col-btn.is-active{background:var(--kpro-primary);color:#fff;border-color:var(--kpro-primary);}

/* ---------- Danh sách bài viết (archive/category/tag/search) ---------- */
.kpro-archive-title{
	color:var(--kpro-primary-dark);
	font-size:26px;
	font-weight:800;
	margin:30px 0 6px;
}
.kpro-archive-desc{color:var(--kpro-text-light);margin-bottom:24px;}
.kpro-post-list{
	display:grid;
	gap:var(--kpro-gap);
	margin-bottom:30px;
	opacity:1;
	transition:opacity .16s ease;
}
.kpro-post-list.is-switching-cols{opacity:0;}
.kpro-post-list.cols-1{grid-template-columns:1fr;}
.kpro-post-list.cols-2{grid-template-columns:repeat(2,1fr);}
.kpro-post-list.cols-3{grid-template-columns:repeat(3,1fr);}
.kpro-post-list.cols-4{grid-template-columns:repeat(4,1fr);}

.kpro-card{
	background:var(--kpro-white);
	border:1px solid #e1e6e1;
	border-radius:var(--kpro-radius);
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transition:box-shadow .2s ease,transform .2s ease;
}
.kpro-card:hover{box-shadow:0 8px 22px rgba(47,82,51,.15);transform:translateY(-2px);}
.kpro-post-list.cols-1 .kpro-card{flex-direction:row;}
.kpro-post-list.cols-1 .kpro-card .kpro-card-thumb{width:280px;flex:0 0 280px;}
.kpro-card-thumb{aspect-ratio:16/10;overflow:hidden;background:#eef1ef;}
.kpro-card-thumb img{width:100%;height:100%;object-fit:cover;}
.kpro-card-body{padding:18px;flex:1;}
.kpro-card-title{
	font-size:var(--kpro-card-title-size);
	font-family:var(--kpro-card-title-family);
	font-weight:var(--kpro-card-title-weight);
	line-height:var(--kpro-card-title-line-height);
	margin:0 0 8px;
}
.kpro-card-title a{color:var(--kpro-card-title-color);}
.kpro-card-meta{
	font-size:var(--kpro-card-meta-size);
	font-family:var(--kpro-card-meta-family);
	color:var(--kpro-card-meta-color);
	font-weight:var(--kpro-card-meta-weight);
	line-height:var(--kpro-card-meta-line-height);
	text-transform:uppercase;
	margin-bottom:10px;
}
.kpro-card-excerpt{
	color:var(--kpro-card-excerpt-color);
	font-size:var(--kpro-card-excerpt-size);
	font-family:var(--kpro-card-excerpt-family);
	font-weight:var(--kpro-card-excerpt-weight);
	line-height:var(--kpro-card-excerpt-line-height);
}

/* ---------- Pagination ---------- */
.kpro-pagination{display:flex;justify-content:center;gap:8px;margin:20px 0 40px;flex-wrap:wrap;}
.kpro-pagination a,.kpro-pagination span{
	padding:8px 14px;border:1px solid var(--kpro-border);border-radius:6px;color:var(--kpro-primary-dark);
}
.kpro-pagination .current{background:var(--kpro-primary);color:#fff;border-color:var(--kpro-primary);}

/* ---------- Sidebar / Widget mặc định ---------- */
.kpro-sidebar .widget{
	background:var(--kpro-box-bg);
	border:1px solid var(--kpro-box-border);
	border-radius:var(--kpro-radius);
	padding:var(--kpro-box-padding-top) var(--kpro-box-padding-right) var(--kpro-box-padding-bottom) var(--kpro-box-padding-left);
	margin-bottom:var(--kpro-gap);
}
.kpro-sidebar .widget-title{
	color:var(--kpro-primary-dark);
	font-size:17px;
	font-weight:700;
	margin:0 0 14px;
	padding-bottom:10px;
	border-bottom:2px solid var(--kpro-accent);
}

/* ---------- Search form ---------- */
.kpro-search-form{display:flex;gap:8px;}
.kpro-search-form input[type=search]{
	flex:1;padding:10px 14px;border:1px solid var(--kpro-border);border-radius:6px;
}
.kpro-search-form button{
	padding:10px 18px;background:var(--kpro-primary);color:#fff;border:0;border-radius:6px;cursor:pointer;font-weight:700;
}
.kpro-search-form button:hover{background:var(--kpro-primary-dark);}

/* ---------- 404 ---------- */
.kpro-404{text-align:center;padding:60px 20px;}
.kpro-404 h1{font-size:90px;color:var(--kpro-primary);margin:0;}
.kpro-404 p{font-size:18px;color:var(--kpro-text-light);margin-bottom:30px;}

/* ---------- Footer ---------- */
.kpro-footer{
	background:transparent;
	padding:50px 20px 40px;
	text-align:center;
	margin-top:20px;
}
/* Khi hiệu ứng nền động bị tắt, dùng lại nền gradient trắng-xanh gốc cho footer */
body.kpro-bg-effect-off .kpro-footer{background:linear-gradient(180deg,#ffffff 0%,var(--kpro-primary) 140%);}
.kpro-footer-title{
	color:var(--kpro-footer-title-color);
	font-size:var(--kpro-footer-title-size);
	font-family:var(--kpro-footer-title-family);
	font-weight:var(--kpro-footer-title-weight);
	line-height:var(--kpro-footer-title-line-height);
	margin:0 0 14px;
}
.kpro-footer-text{
	color:var(--kpro-footer-text-color);
	font-size:var(--kpro-footer-text-size);
	font-family:var(--kpro-footer-text-family);
	font-weight:var(--kpro-footer-text-weight);
	line-height:var(--kpro-footer-text-line-height);
	max-width:780px;
	margin:0 auto 6px;
	line-height:1.7;
}
.kpro-footer-widgets{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:20px;
	max-width:var(--kpro-max-width);
	margin:30px auto 0;
	text-align:left;
}
.kpro-footer-bottom{margin-top:30px;font-size:13px;color:#25472b;}

/* ---------- Comments ---------- */
.kpro-comments{margin-top:40px;}
.kpro-comments-title{color:var(--kpro-primary-dark);font-size:20px;margin-bottom:16px;}
.comment-list{list-style:none;margin:0 0 20px;}
.comment-list .comment-body{
	background:var(--kpro-bg-box);border:1px solid #e1e6e1;border-radius:8px;padding:16px;margin-bottom:14px;
}
.comment-form input,.comment-form textarea{
	width:100%;padding:10px;border:1px solid var(--kpro-border);border-radius:6px;margin-bottom:12px;
}
.comment-form .form-submit input{
	width:auto;background:var(--kpro-primary);color:#fff;border:0;padding:10px 24px;cursor:pointer;font-weight:700;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
	.kpro-content.has-sidebar{grid-template-columns:1fr;}
	.kpro-columns.cols-2,.kpro-columns.cols-3,.kpro-columns.cols-4{grid-template-columns:1fr 1fr;}
	.kpro-post-list.cols-3,.kpro-post-list.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:680px){
	.kpro-nav ul{display:none;flex-direction:column;}
	.kpro-nav ul.show{display:flex;}
	.kpro-menu-toggle{display:block;}
	.kpro-nav ul ul{position:static;display:flex;}
	.kpro-columns.cols-2,.kpro-columns.cols-3,.kpro-columns.cols-4{grid-template-columns:1fr;}
	.kpro-post-list.cols-2,.kpro-post-list.cols-3,.kpro-post-list.cols-4{grid-template-columns:1fr;}
	.kpro-post-list.cols-1 .kpro-card{flex-direction:column;}
	.kpro-post-list.cols-1 .kpro-card .kpro-card-thumb{width:100%;flex:none;}

	/* Cỡ chữ / giãn dòng dành riêng cho điện thoại (giá trị dự phòng - giá trị
	   thật lấy từ Customizer > KPRO > Chữ: ... > Cỡ chữ/Giãn dòng (Điện thoại)) */
	:root{
		--kpro-logo-size: 28px;
		--kpro-logo-line-height: 1.2;
		--kpro-logo-width: 140px;
		--kpro-footer-title-size: 20px;
		--kpro-footer-title-line-height: 1.3;
		--kpro-footer-text-size: 15px;
		--kpro-footer-text-line-height: 1.6;
		--kpro-posttitle-size: 22px;
		--kpro-posttitle-line-height: 1.3;
		--kpro-meta-size: 12px;
		--kpro-meta-line-height: 1.4;
		--kpro-content-size: 15px;
		--kpro-content-line-height: 1.6;
		--kpro-tags-size: 13px;
		--kpro-tags-line-height: 1.4;
		--kpro-card-title-size: 17px;
		--kpro-card-title-line-height: 1.3;
		--kpro-card-meta-size: 12px;
		--kpro-card-meta-line-height: 1.4;
		--kpro-card-excerpt-size: 14px;
		--kpro-card-excerpt-line-height: 1.5;
		--kpro-menu-size: 14px;
		--kpro-menu-align: center;
		--kpro-menu-justify: center;
	}
}