/* ══════════════════════════════════════════════════════════════════════════
   K-Solutions Git — theme phủ (design token K-Dev) cho Forgejo 15
   Nạp SAU theme nền (forgejo-light) qua templates/custom/header.tmpl.
   Chỉ ghi đè BIẾN + polish component ổn định → nâng cấp Forgejo không vỡ.
   Token lấy từ giao diện K-Dev: coral #ef4e2a, nền xám lạnh, card trắng bo góc + shadow mềm.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Bảng màu K-Solutions ── */
	--ks-coral: #ef4e2a;
	--ks-coral-hover: #dc4020;
	--ks-coral-active: #c5391a;
	--ks-coral-soft: #fdeae4;          /* nền pill active / icon square */
	--ks-coral-soft-2: #fbd6cc;

	--ks-bg: #f6f7f9;                   /* nền trang (xám lạnh nhạt) */
	--ks-surface: #ffffff;             /* card / box / sidebar */
	--ks-surface-2: #fbfcfd;           /* header của box */
	--ks-border: #e8eaed;              /* viền nhạt */
	--ks-border-2: #eceef1;

	--ks-text: #101828;                /* chữ chính gần đen */
	--ks-text-2: #475467;              /* chữ phụ */
	--ks-text-muted: #667085;          /* chú thích */

	--ks-radius: 12px;                 /* card */
	--ks-radius-sm: 8px;               /* button / input */
	--ks-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
	--ks-shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 2px 4px -2px rgba(16,24,40,.04);
}

/* ── Ghi đè biến ngữ nghĩa Forgejo (cascade ra mọi component) ── */
:root {
	--color-primary: var(--ks-coral);
	--color-primary-contrast: #ffffff;
	--color-primary-dark-1: var(--ks-coral-hover);
	--color-primary-dark-2: var(--ks-coral-active);
	--color-primary-hover: var(--ks-coral-hover);
	--color-primary-active: var(--ks-coral-active);
	--color-primary-light-1: #f26a4a;
	--color-primary-light-2: #f5836a;
	--color-primary-light-3: #f79d8a;
	--color-primary-light-4: #f9b6a9;
	--color-primary-light-5: #fbd0c9;
	--color-primary-light-6: #fde3dc;
	--color-primary-light-7: var(--ks-coral-soft);
	--color-primary-alpha-10: #ef4e2a1a;
	--color-primary-alpha-20: #ef4e2a33;
	--color-primary-alpha-30: #ef4e2a4d;
	--color-primary-alpha-40: #ef4e2a66;
	--color-primary-alpha-50: #ef4e2a80;
	--color-primary-alpha-60: #ef4e2a99;
	--color-primary-alpha-70: #ef4e2ab3;
	--color-primary-alpha-80: #ef4e2acc;
	--color-primary-alpha-90: #ef4e2ae6;

	--color-body: var(--ks-bg);
	--color-box-body: var(--ks-surface);
	--color-box-body-highlight: var(--ks-surface-2);
	--color-box-header: var(--ks-surface-2);
	--color-nav-bg: var(--ks-surface);
	--color-nav-hover-bg: var(--ks-coral-soft);
	--color-secondary-bg: var(--ks-surface-2);
	--color-menu: var(--ks-surface);
	--color-footer: var(--ks-surface);
	--color-text: var(--ks-text);
	--color-text-dark: var(--ks-text);
	--color-text-light-1: var(--ks-text-2);
	--color-text-light-2: var(--ks-text-muted);
	--color-text-light-3: var(--ks-text-muted);
	--color-border: var(--ks-border);
	--color-secondary: var(--ks-border);
	--color-light-border: var(--ks-border);
	--color-input-background: var(--ks-surface);
	--color-input-border: var(--ks-border);
	--color-input-border-hover: #d0d5dd;
	--color-active: var(--ks-coral-soft);
	--color-hover: #f2f4f7;
	--color-accent: var(--ks-coral);
}

/* ── Nền trang ── */
body { background: var(--ks-bg); color: var(--ks-text); }

/* ── Thanh điều hướng trên (navbar) ── */
.page-content, .full.height { background: var(--ks-bg); }
#navbar, .navbar {
	background: var(--ks-surface) !important;
	border-bottom: 1px solid var(--ks-border);
	box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
#navbar .item, .navbar .item { color: var(--ks-text-2); border-radius: var(--ks-radius-sm); }
#navbar .item:hover, .navbar .item:hover { background: var(--ks-coral-soft); color: var(--ks-coral); }

/* ── Card / box: bo góc + viền nhạt + shadow mềm (K-Dev) ── */
.ui.segment,
.ui.card,
.ui.attached.segment,
.repository .ui.segment,
.dashboard .ui.segment,
.ui.grid > .column > .ui.segment,
.ui.attached.header,
.ui.attached.table,
.issue.list-header,
.markup {
	border-radius: var(--ks-radius) !important;
	border: 1px solid var(--ks-border) !important;
	box-shadow: var(--ks-shadow);
}

/* ── Danh sách repo/issue kiểu GitHub: khung card, dòng ngăn bằng vạch, hover sáng ── */
.flex-list {
	border-radius: var(--ks-radius);
	border: 1px solid var(--ks-border);
	box-shadow: var(--ks-shadow);
	background: var(--ks-surface);
	overflow: hidden;
}
.flex-list .flex-item {
	margin: 0;
	border: none;
	border-bottom: 1px solid var(--ks-border-2);
	border-radius: 0;
	box-shadow: none;
	padding: 16px 20px;
	transition: background .1s;
}
.flex-list .flex-item:last-child { border-bottom: none; }
/* FIX padding: Forgejo bỏ padding-top item ĐẦU (`.divider + .flex-list > :first-child`) vì giả định
   có divider ngoài ngăn cách. Ta bọc flex-list thành CARD viền → item đầu dính mép trên (cramp).
   Trả lại padding-top đối xứng cho MỌI list dạng card (explore/issue/pull/profile/dashboard). */
.flex-list > .flex-item:first-child { padding-top: 16px !important; }
.dashboard.feeds .flex-list > .flex-item:first-child { padding-top: 15px !important; }
.flex-list .flex-item:hover { background: #f9fafb; }
.flex-list .flex-item-title,
.flex-list .flex-item-title a.text.primary.name {
	font-weight: 600;
	font-size: 1.02rem;
}
.flex-list .flex-item-body { color: var(--ks-text-muted); }
.ui.attached.segment { box-shadow: none; }
.ui.attached + .ui.attached { border-top: none; }

/* ── Nút ── */
.ui.button {
	border-radius: var(--ks-radius-sm);
	font-weight: 600;
	box-shadow: none;
	transition: background .12s, border-color .12s, color .12s;
}
.ui.primary.button,
.ui.primary.buttons .button {
	background: var(--ks-coral);
	color: #fff;
	box-shadow: 0 1px 2px rgba(239,78,42,.25);
}
.ui.primary.button:hover { background: var(--ks-coral-hover); }
.ui.basic.button { box-shadow: inset 0 0 0 1px var(--ks-border); }

/* ── Input / ô tìm kiếm ── */
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.selection.dropdown,
.ui.search > .results {
	border-radius: var(--ks-radius-sm);
	border-color: var(--ks-border);
}
.ui.input > input:focus,
.ui.form input:focus { border-color: var(--ks-coral); box-shadow: 0 0 0 3px var(--ks-coral-alpha, #ef4e2a1a); }

/* ── Bảng dữ liệu ── */
.ui.table {
	border-radius: var(--ks-radius);
	border-color: var(--ks-border);
	overflow: hidden;
}
.ui.table thead th {
	background: var(--ks-surface-2);
	color: var(--ks-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .78em;
	letter-spacing: .02em;
	border-bottom: 1px solid var(--ks-border);
}
.ui.table tbody tr:hover { background: #f9fafb; }

/* ── Link coral ── */
a { color: var(--ks-coral); }
a:hover { color: var(--ks-coral-hover); }

/* ── Tab menu (issue/PR/code) — gạch chân coral ── */
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
	border-color: var(--ks-coral);
	color: var(--ks-coral);
	font-weight: 600;
}

/* ── Logo navbar bo nhẹ ── */
.navbar .brand img, #navbar .logo, img.ui.logo { border-radius: 6px; }

/* ── Footer gọn ── */
footer.page-footer { background: var(--ks-surface); border-top: 1px solid var(--ks-border); color: var(--ks-text-muted); }
footer .left-links a[href*="forgejo.org"], .page-footer .left-links a[href*="forgejo.org"] { display: none; }
footer.page-footer .right-links a[href$="/licenses.txt"],
footer.page-footer .right-links a[href$="/api/swagger"] { display: none !important; }

/* ── Label / badge bo tròn kiểu K-Dev ── */
.ui.label { border-radius: 6px; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD — sidebar TRÁI kiểu GitHub (.page-content.dashboard)
   Forgejo sẵn 2 cột (feeds + repolist); GitHub đặt repolist bên trái → reorder + style.
   ══════════════════════════════════════════════════════════════════════════ */
.page-content.dashboard .ui.container.flex-container {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	max-width: 1280px;
}

/* Cột sidebar → sang TRÁI, rộng cố định, dạng panel */
.page-content.dashboard .flex-container-sidebar {
	order: -1;
	flex: 0 0 316px;
	width: 316px;
	position: sticky;
	top: 16px;
}
.page-content.dashboard .flex-container-main {
	flex: 1 1 auto;
	min-width: 0;
}

/* Panel sidebar: card trắng bo góc */
.page-content.dashboard .flex-container-sidebar .dashboard-repos,
.page-content.dashboard .flex-container-sidebar > div {
	border-radius: var(--ks-radius);
}
.page-content.dashboard .repo-owner-name-list,
.page-content.dashboard .flex-container-sidebar .ui.secondary.menu {
	border-radius: var(--ks-radius);
}

/* Tab "Kho mã / Tổ chức" gọn lại */
.page-content.dashboard .flex-container-sidebar .ui.tabular.menu,
.page-content.dashboard .flex-container-sidebar .ui.secondary.pointing.menu {
	margin-bottom: 12px;
}

/* Danh sách repo trong sidebar — dòng gọn, hover coral-nhạt */
.page-content.dashboard .flex-container-sidebar .repo-list .item,
.page-content.dashboard .flex-container-sidebar li {
	border-radius: var(--ks-radius-sm);
	transition: background .1s;
}
.page-content.dashboard .flex-container-sidebar .repo-list .item:hover {
	background: var(--ks-coral-soft);
}

/* Thanh chuyển context ("designbot ▾") — gọn, nền trong suốt hoà nền */
.page-content.dashboard .dashboard-navbar,
.page-content.dashboard > .ui.secondary.menu {
	max-width: 1280px;
	margin: 0 auto 8px !important;
	padding: 8px 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Feeds bên phải: card nền trắng cho ra khối */
.page-content.dashboard .flex-container-main .flex-list,
.page-content.dashboard .flex-container-main .dashboard-feed {
	background: var(--ks-surface);
}

@media (max-width: 900px) {
	.page-content.dashboard .ui.container.flex-container { flex-direction: column; }
	.page-content.dashboard .flex-container-sidebar { order: 0; width: 100%; flex-basis: auto; position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANG ĐĂNG NHẬP — bản premium (.page-content.user.signin)
   Auth 100% qua K-Dev nên chỉ có 1 nút; dồn toàn lực làm nút + brand cho xịn.
   ══════════════════════════════════════════════════════════════════════════ */
.page-content.user.signin {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: calc(100vh - 240px);
	padding: 72px 20px 40px;
	background:
		radial-gradient(900px 420px at 50% -8%, #fdeae4 0%, rgba(253,238,230,0) 65%),
		var(--ks-bg);
}

/* DOM thật: .page-content.user.signin > .ui.page.grid > .column > .ui.container.fluid */
.page-content.user.signin .ui.page.grid { margin: 0 auto; }
.page-content.user.signin .ui.page.grid > .column {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 0;
}

/* Logo K-Solutions (đầy đủ) phía trên card */
.page-content.user.signin .ui.page.grid > .column::before {
	content: "";
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 22px;
	background: url(/assets/img/logo.svg) center / contain no-repeat;
	filter: drop-shadow(0 6px 16px rgba(239, 78, 42, .28));
}

/* Tiêu đề gốc "auth.login_userpass" không hợp cảnh chỉ-OAuth → ẩn, thay bằng lời chào */
.page-content.user.signin h4.ui.top.attached.header {
	border: none !important;
	background: transparent !important;
	padding: 0 0 4px !important;
	font-size: 0 !important;                 /* giấu chữ gốc */
}
.page-content.user.signin h4.ui.top.attached.header::after {
	content: "Chào mừng đến K-Solutions Git";
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ks-text);
	letter-spacing: -.01em;
}
.page-content.user.signin h4.ui.top.attached.header::before {
	content: "Đăng nhập bằng tài khoản K-Solutions để tiếp tục";
	display: block;
	order: 2;
	margin-top: 6px;
	font-size: .92rem;
	font-weight: 400;
	color: var(--ks-text-muted);
}
.page-content.user.signin h4.ui.top.attached.header {
	display: flex;
	flex-direction: column;
	text-align: center;
}
.page-content.user.signin h4.ui.top.attached.header::after { order: 1; }

/* Card */
.page-content.user.signin .ui.attached.segment {
	border-radius: 16px !important;
	border: 1px solid var(--ks-border) !important;
	box-shadow: 0 16px 40px -12px rgba(16, 24, 40, .18), 0 4px 12px -4px rgba(16, 24, 40, .08) !important;
	padding: 28px 28px 30px !important;
	margin-top: 20px !important;
	background: var(--ks-surface) !important;
}

/* Nút "Đăng nhập bằng kdev" — prominent coral */
.page-content.user.signin .oauth-login-link {
	background: var(--ks-coral) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 13px 18px !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	gap: 10px;
	box-shadow: 0 3px 10px rgba(239, 78, 42, .32) !important;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.page-content.user.signin .oauth-login-link:hover {
	background: var(--ks-coral-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(239, 78, 42, .42) !important;
}
.page-content.user.signin .oauth-login-link:active { transform: translateY(0); }
/* icon provider → trắng cho ăn nền coral */
.page-content.user.signin .oauth-login-link img,
.page-content.user.signin .oauth-login-link svg {
	filter: brightness(0) invert(1);
	width: 22px; height: 22px;
}

/* Khối "quên mật khẩu / đăng ký" phía dưới — gọn, mờ */
.page-content.user.signin .ui.container.fluid:nth-child(2) .ui.attached.segment {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	margin-top: 10px !important;
	text-align: center;
	font-size: .9rem;
}
.page-content.user.signin .ui.container.fluid:nth-child(2) a { color: var(--ks-text-muted); }
.page-content.user.signin .ui.container.fluid:nth-child(2) a:hover { color: var(--ks-coral); }

/* ── Nhãn nút OAuth: "kdev" (tên auth source, không đổi được vì là URL slug OIDC) → "K-Dev" chuẩn brand.
   Ẩn text gốc (font-size:0), giữ icon, chèn nhãn chuẩn qua ::after. Chỉ trang đăng nhập. ── */
.page-content.user.signin .oauth-login-link { font-size: 0 !important; }
.page-content.user.signin .oauth-login-link::after {
	content: "Đăng nhập bằng K-Dev";
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING (home.tmpl override) — enterprise/technical, KHÔNG marketing hội chợ.
   ══════════════════════════════════════════════════════════════════════════ */
/* Fit 100vh: flex-center giữa navbar + footer, không scroll. */
.page-content.home.ks-landing {
	background:
		radial-gradient(1000px 420px at 50% -6%, var(--ks-coral-soft) 0%, rgba(253,234,229,0) 60%),
		var(--ks-bg);
	min-height: calc(100vh - 172px);          /* trừ navbar(49) + footer(37) + wrapper (~86) — content chỉ ~455px, thừa chỗ */
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: 16px 24px 14px; box-sizing: border-box;
}
.ks-landing-inner { max-width: 960px; margin: 0 auto; text-align: center; width: 100%; }
.ks-landing-logo {
	width: 52px; height: 52px;
	filter: drop-shadow(0 6px 16px rgba(239, 78, 42, .22));
}
.ks-landing-brand {
	margin: 10px 0 0; font-size: 1.95rem; font-weight: 800;
	letter-spacing: -.02em; color: var(--ks-text); line-height: 1.1;
}
.ks-landing-tagline {
	margin-top: 7px;
	font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
	font-size: .76rem; font-weight: 600; letter-spacing: .12em;
	color: var(--ks-coral); text-transform: uppercase;
}
.ks-landing-sub {
	margin: 9px auto 0; max-width: 560px;
	font-size: .96rem; line-height: 1.45; color: var(--ks-text-2);
}
.ks-landing-grid {
	margin-top: 18px;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
	text-align: left; width: 100%; max-width: 860px;
}
.ks-feature {
	background: var(--ks-surface); border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius); padding: 13px 16px 12px;
	box-shadow: var(--ks-shadow);
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.ks-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--ks-shadow-md); border-color: var(--ks-coral-soft-2);
}
.ks-feature-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 9px;
	background: var(--ks-coral-soft); color: var(--ks-coral); margin-bottom: 8px;
}
.ks-feature-icon svg { width: 18px; height: 18px; }
.ks-feature-title { font-size: .97rem; font-weight: 700; color: var(--ks-text); margin-bottom: 3px; letter-spacing: -.01em; }
.ks-feature-desc { font-size: .85rem; line-height: 1.45; color: var(--ks-text-muted); }

@media (max-width: 720px) {
	.page-content.home.ks-landing { min-height: auto; padding: 40px 20px; }
	.ks-landing-grid { grid-template-columns: 1fr; }
	.ks-landing-brand { font-size: 1.8rem; }
}

/* ── Nút "Đăng nhập" trên header (anonymous) — style thành nút coral gọn ── */
.navbar-right a[href*="/user/login"],
#navbar a[href*="/user/login"] {
	display: inline-flex !important; align-items: center;
	background: var(--ks-coral) !important; color: #fff !important;
	border-radius: var(--ks-radius-sm) !important;
	padding: 7px 16px !important; margin: 6px 4px !important;
	font-weight: 600 !important; gap: 6px;
	box-shadow: 0 1px 2px rgba(239, 78, 42, .25) !important;
	transition: background .12s ease, transform .04s ease;
}
.navbar-right a[href*="/user/login"]:hover,
#navbar a[href*="/user/login"]:hover { background: var(--ks-coral-hover) !important; color: #fff !important; }
.navbar-right a[href*="/user/login"] svg,
#navbar a[href*="/user/login"] svg { color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   APP-SHELL (kiểu K-Dev) — chỉ khi signed-in (có .ks-sidebar). :has() scope.
   Header fixed top + sidebar trái fixed + content bên phải scroll riêng.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --ks-shell-header: 56px; --ks-shell-sidebar: 248px; }

/* Header (navbar) → fixed top full-width */
.full.height:has(> .ks-sidebar) > #navbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	height: var(--ks-shell-header);
	padding: 0 18px !important; margin: 0 !important;
	display: flex; align-items: center;
	background: #fff !important; border-bottom: 1px solid var(--ks-border) !important;
}

/* Ẩn nav-link cũ trong navbar (đã chuyển sang sidebar), giữ logo + navbar-right */
.full.height:has(> .ks-sidebar) > #navbar .navbar-left > .item:not(#navbar-logo),
.full.height:has(> .ks-sidebar) > #navbar .navbar-left .ui.dropdown.item { display: none !important; }
.full.height:has(> .ks-sidebar) > #navbar #navbar-logo { padding-left: 4px; }

/* Sidebar trái fixed dưới header */
.ks-sidebar {
	position: fixed; top: var(--ks-shell-header); left: 0; bottom: 0;
	width: var(--ks-shell-sidebar); z-index: 90;
	background: #fff; border-right: 1px solid var(--ks-border);
	overflow-y: auto; display: flex; flex-direction: column;
	padding: 12px 12px 8px;
}
.ks-sidebar-nav { flex: 1; }
.ks-sidebar-foot { border-top: 1px solid var(--ks-border); padding-top: 8px; margin-top: 8px; }
.ks-sidebar-group {
	font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ks-text-muted); padding: 12px 10px 6px;
}
.ks-nav-item {
	display: flex; align-items: center; gap: 11px;
	padding: 9px 11px; border-radius: var(--ks-radius-sm);
	color: var(--ks-text-2); font-weight: 500; font-size: .93rem;
	line-height: 1; transition: background .1s, color .1s; margin-bottom: 1px;
}
.ks-nav-item:hover { background: #f2f4f7; color: var(--ks-text); }
.ks-nav-item.active { background: var(--ks-coral-soft); color: var(--ks-coral); font-weight: 600; }
.ks-nav-item .svg { color: currentColor; flex-shrink: 0; }
.ks-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Content → phải sidebar, dưới header. Header+sidebar fixed nên chỉ content cuộn. */
.full.height:has(> .ks-sidebar) > .page-content {
	margin-left: var(--ks-shell-sidebar);
	margin-top: var(--ks-shell-header);
	min-height: calc(100vh - var(--ks-shell-header));
	padding: 22px 28px 32px;
	background: var(--ks-bg);
}
.full.height:has(> .ks-sidebar) > footer.page-footer {
	margin-left: var(--ks-shell-sidebar);
}

/* Responsive: màn nhỏ → ẩn sidebar (giữ nguyên hành vi mobile Forgejo) */
@media (max-width: 900px) {
	.ks-sidebar { display: none; }
	.full.height:has(> .ks-sidebar) > .page-content,
	.full.height:has(> .ks-sidebar) > footer.page-footer { margin-left: 0; }
}

/* Search giữa header (app-shell) */
.ks-header-search {
	flex: 1 1 auto; display: flex; align-items: center; gap: 9px;
	max-width: 520px; margin: 0 auto;
	background: var(--ks-bg); border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm); padding: 8px 14px; color: var(--ks-text-muted);
	transition: border-color .12s, box-shadow .12s;
}
.ks-header-search:focus-within { border-color: var(--ks-coral); box-shadow: 0 0 0 3px var(--ks-coral-soft); }
.ks-header-search input {
	border: none !important; background: transparent !important; outline: none !important;
	flex: 1; font-size: .92rem; color: var(--ks-text); padding: 0 !important; box-shadow: none !important;
}
.ks-header-search input::placeholder { color: var(--ks-text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   POLISH COMPONENT CHIA SẺ (áp nhiều page: feed, repo list, issue/PR list)
   ══════════════════════════════════════════════════════════════════════════ */
/* Feed hoạt động dashboard */
.dashboard.feeds .flex-list .flex-item { padding: 15px 10px; align-items: flex-start; gap: 12px; }
.dashboard.feeds .flex-list .flex-item:hover { background: #fafbfc; }
.dashboard.feeds .flex-item-leading .ui.avatar { border-radius: 8px; }
.dashboard.feeds .flex-item-main { line-height: 1.5; }
.dashboard.feeds .flex-item-trailing { color: var(--ks-text-muted); opacity: .5; align-self: center; }
.dashboard.feeds .flex-item-trailing .svg { width: 20px; height: 20px; }

/* Badge SHA / commit — monospace nhã */
.ui.label.sha, .sha.label, .commit-id, code.sha {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
	background: var(--ks-bg) !important; color: var(--ks-text-2) !important;
	border: 1px solid var(--ks-border) !important; font-weight: 500 !important;
	border-radius: 6px !important; padding: 2px 7px !important;
}

/* Org/dashboard switcher (ktech-admin ▾) → pill gọn */
.dashboard-navbar .ui.dropdown.jump,
.page-content.dashboard .dashboard-navbar > .item:first-child {
	font-weight: 700; font-size: 1.05rem; color: var(--ks-text);
}
.dashboard-navbar .ui.dropdown.jump .ui.avatar { border-radius: 7px; }

/* Heatmap: bọc card cho gọn khối */
.flex-container-main #user-heatmap,
.flex-container-main .contribution-calendar,
.flex-container-main > div:has(> [class*="calendar"]),
#user-heatmap {
	background: var(--ks-surface); border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius); padding: 16px 18px; box-shadow: var(--ks-shadow);
	margin-bottom: 16px;
}

/* Repo/issue/PR list item chung — hover coral-nhạt, tiêu đề đậm vừa */
.flex-list .flex-item .flex-item-title { font-weight: 600; }
.flex-list .flex-item:hover { background: #fafbfc; }

/* Tab menu (Repositories/Organizations, repo tabs) — active coral rõ + spacing */
.ui.secondary.pointing.menu { border-bottom: 1px solid var(--ks-border); gap: 2px; }
.ui.secondary.pointing.menu .item { padding: 11px 14px; font-weight: 500; color: var(--ks-text-2); }
.ui.secondary.pointing.menu .active.item { color: var(--ks-coral); font-weight: 600; }

/* Counter label (số cạnh tab, vd Repositories 2) */
.ui.secondary .item .ui.label, .ui.tabular .item .ui.label {
	background: var(--ks-bg); color: var(--ks-text-muted); border: 1px solid var(--ks-border);
	font-size: .72rem; border-radius: 999px; padding: 2px 8px;
}

/* ══ FIX: content full content-area trong app-shell (bỏ max-width 1280 + căn giữa gây trống) ══ */
.full.height:has(> .ks-sidebar) > .page-content > .ui.container,
.full.height:has(> .ks-sidebar) > .page-content .ui.container.fluid,
.full.height:has(> .ks-sidebar) .page-content.dashboard .ui.container.flex-container {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Repo panel (sub-sidebar dashboard) sát trái, không đẩy vào giữa */
.full.height:has(> .ks-sidebar) .page-content.dashboard .flex-container-sidebar { margin-left: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER LOGO LOCKUP + SIDEBAR STYLE-GUIDE + LANG SWITCH + BỎ FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
/* Logo lockup: mark + K-WORKSPACE + K-SOLUTIONS */
#navbar-logo { display: inline-flex !important; align-items: center; gap: 11px; }
#navbar-logo img { width: 34px !important; height: 34px !important; }
.ks-brand-lock { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.ks-brand-title { font-weight: 800; font-size: 1.02rem; color: var(--ks-text); letter-spacing: -.01em; }
.ks-brand-sub { font-size: .62rem; font-weight: 600; letter-spacing: .16em; color: var(--ks-text-muted); text-transform: uppercase; margin-top: 2px; }
@media (max-width: 700px) { .ks-brand-lock { display: none; } }

/* Sidebar — chuẩn style-guide K-Dev (item cao, icon 20, group dash màu, active viền trái) */
.ks-sidebar { padding: 14px 12px 12px; }
.ks-sidebar-group {
	display: flex; align-items: center; gap: 9px;
	font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--ks-text-muted); padding: 18px 12px 9px;
}
.ks-sidebar-group::before { content: ""; width: 15px; height: 2px; border-radius: 2px; background: var(--ks-coral); flex-shrink: 0; }
.ks-sidebar-group.admin::before { background: #12b76a; }
.ks-sidebar-nav .ks-nav-item, .ks-sidebar-foot .ks-nav-item {
	display: flex; align-items: center; gap: 14px;
	padding: 11px 13px; border-radius: 9px;
	color: var(--ks-text-2); font-weight: 500; font-size: .95rem; line-height: 1.2;
	margin-bottom: 3px; position: relative;
}
.ks-sidebar .ks-nav-item:hover { background: #f2f4f7; color: var(--ks-text); }
.ks-sidebar .ks-nav-item.active {
	background: var(--ks-coral-soft); color: var(--ks-coral); font-weight: 600;
	box-shadow: inset 3px 0 0 var(--ks-coral);
}
.ks-sidebar .ks-nav-item .svg { width: 20px !important; height: 20px !important; color: currentColor; flex-shrink: 0; }

/* Nút ngôn ngữ VI|EN trên header (thay footer) */
.ks-lang-switch {
	display: inline-flex; align-items: center; margin: 0 6px;
	border: 1px solid var(--ks-border); border-radius: 999px; overflow: hidden; background: var(--ks-bg);
	height: 30px; align-self: center;
}
.ks-lang-switch button {
	border: none; background: transparent; cursor: pointer;
	padding: 0 11px; height: 100%; font-size: .78rem; font-weight: 600; color: var(--ks-text-muted);
	transition: background .12s, color .12s;
}
.ks-lang-switch button:hover { color: var(--ks-text); }
.ks-lang-switch button.on { background: var(--ks-coral); color: #fff; }

/* BỎ footer (phiên bản/render-time + lang cũ) — lang đã lên header */
footer.page-footer, .full.height > footer { display: none !important; }

/* Brand "K-GIT powered by K-Solutions" */
.ks-landing-brand-by {
	margin-top: 4px; font-size: .82rem; font-weight: 500; color: var(--ks-text-muted);
	letter-spacing: .01em;
}
/* Header lockup sub → "powered by K-Solutions" (không uppercase, đọc như tagline) */
.ks-brand-sub {
	text-transform: none !important; letter-spacing: .01em !important;
	font-size: .64rem !important; font-weight: 500 !important; margin-top: 1px !important;
}