/* BALOTECH: hai bộ màu (tối, sáng), nhấn cyan và vàng.
 * Chế độ: data-theme="dark" | "light" trên <html>; không có thuộc tính thì theo cài đặt thiết bị. */

:root {
	color-scheme: dark;
	--header-h: 64px;
	--bg: #070C18;
	--panel: #0D1528;
	--panel-line: #1C2A47;
	--divider: #16223C;
	--raise: #13203A;
	--chip-line: #22345A;
	--ghost-line: #2A3F68;
	--well: #091226;
	--well-2: #081426;
	--track: #1A2848;
	--text: #E8EEF8;
	--text-2: #C9D5EA;
	--text-3: #B8C6DD;
	--muted: #93A3BF;
	--strong: #FFFFFF;
	--placeholder: #7E8DA8;
	--input-bg: #070F22;
	--cyan: #3FD0E0;
	--cyan-soft: #8BE6F0;
	--cyan-text: #3FD0E0;
	--cyan-ink: #05131A;
	--gold: #F5B841;
	--gold-hover: #FFC85E;
	--gold-text: #F5B841;
	--gold-ink: #141007;
	--gold-bg: #2A2410;
	--gold-line: #5A4A1A;
	--gold-panel: #11192E;
	--coral: #FF8A70;
	--coral-text: #FF8A70;
	--focus: #3FD0E0;
	--accent-bg: #0C2433;
	--accent-bg-hover: #0E2A3B;
	--accent-line: #1F4A62;
	--chip-on-bg: #0E3343;
	--advisor-bg: #0A1A2E;
	--problem-line: #3A4A2A;
	--product-hover: #0C1730;
	--avatar-hover: #1A2C4E;
	--avatar-muted: #1F2D4D;
	--glass: rgba(11, 23, 48, 0.93);
	--hero-glow: #0F2A4A;
	--globe-fill: #0E2A4C;
	--globe-center: #FFFFFF;
	--shadow: rgba(0, 0, 0, 0.45);
	--radius: 16px;
	--radius-sm: 12px;
	--font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Giao diện sáng: khi thiết bị đang ở chế độ sáng (và người dùng không chọn Tối), hoặc khi chọn Sáng. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
	color-scheme: light;
	--bg: #F4F6FA;
	--panel: #FFFFFF;
	--panel-line: #DDE3EC;
	--divider: #E3E8F0;
	--raise: #EEF2F8;
	--chip-line: #D2DAE6;
	--ghost-line: #C3CDDC;
	--well: #F3F6FA;
	--well-2: #F0F4F9;
	--track: #E2E8F0;
	--text: #0F1B2D;
	--text-2: #2B3A52;
	--text-3: #3D4C63;
	--muted: #586880;
	--strong: #0A1424;
	--placeholder: #7C8AA0;
	--input-bg: #FFFFFF;
	--cyan-soft: #075E6B;
	--cyan-text: #0B7285;
	--gold-hover: #E9A82A;
	--gold-text: #8A5A00;
	--gold-bg: #FFF4DB;
	--gold-line: #EDCF8A;
	--gold-panel: #FFFBF0;
	--coral: #F0714F;
	--coral-text: #B93A1C;
	--focus: #0B7285;
	--accent-bg: #EAF8FA;
	--accent-bg-hover: #DCF2F5;
	--accent-line: #A6DCE4;
	--chip-on-bg: #DFF6F8;
	--advisor-bg: #F3FAFC;
	--problem-line: #E9D9A6;
	--product-hover: #EEF2F8;
	--avatar-hover: #E1E8F2;
	--avatar-muted: #E4E9F1;
	--glass: rgba(255, 255, 255, 0.94);
	--hero-glow: #D9EEF6;
	--globe-fill: #E3F4F8;
	--globe-center: #0F1B2D;
	--shadow: rgba(15, 27, 45, 0.14);
	}
}
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #F4F6FA;
	--panel: #FFFFFF;
	--panel-line: #DDE3EC;
	--divider: #E3E8F0;
	--raise: #EEF2F8;
	--chip-line: #D2DAE6;
	--ghost-line: #C3CDDC;
	--well: #F3F6FA;
	--well-2: #F0F4F9;
	--track: #E2E8F0;
	--text: #0F1B2D;
	--text-2: #2B3A52;
	--text-3: #3D4C63;
	--muted: #586880;
	--strong: #0A1424;
	--placeholder: #7C8AA0;
	--input-bg: #FFFFFF;
	--cyan-soft: #075E6B;
	--cyan-text: #0B7285;
	--gold-hover: #E9A82A;
	--gold-text: #8A5A00;
	--gold-bg: #FFF4DB;
	--gold-line: #EDCF8A;
	--gold-panel: #FFFBF0;
	--coral: #F0714F;
	--coral-text: #B93A1C;
	--focus: #0B7285;
	--accent-bg: #EAF8FA;
	--accent-bg-hover: #DCF2F5;
	--accent-line: #A6DCE4;
	--chip-on-bg: #DFF6F8;
	--advisor-bg: #F3FAFC;
	--problem-line: #E9D9A6;
	--product-hover: #EEF2F8;
	--avatar-hover: #E1E8F2;
	--avatar-muted: #E4E9F1;
	--glass: rgba(255, 255, 255, 0.94);
	--hero-glow: #D9EEF6;
	--globe-fill: #E3F4F8;
	--globe-center: #0F1B2D;
	--shadow: rgba(15, 27, 45, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
}

a { color: var(--cyan-text); text-decoration: none; }
a:hover { color: var(--cyan-soft); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
img:is([sizes=auto i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }

.sr-only, .screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 14px; background: var(--gold); color: var(--gold-ink); border-radius: 8px; }

/* Chữ */
.strong { font-weight: 700; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.text-gold { color: var(--gold-text); }
.text-cyan { color: var(--cyan-text); }
.label {
	font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--muted); font-weight: 600;
}
.label--cyan { color: var(--cyan-text); }
.label--gold { color: var(--gold-text); }
.link-strong { font-size: 14px; font-weight: 600; }
.page-title { margin: 0; font-size: 26px; line-height: 1.3; }

/* Khối nền */
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); }
.well { background: var(--well-2); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* Nút */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 0;
	font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	text-decoration: none; white-space: nowrap;
}
.btn--ghost { background: transparent; border: 1px solid var(--ghost-line); color: var(--text); }
.btn--ghost:hover { background: var(--raise); color: var(--strong); }
.btn--ghost[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan-text); }
.btn--gold { background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { background: var(--gold-hover); color: var(--gold-ink); }
.btn--cyan { background: var(--cyan); color: var(--cyan-ink); }
.btn--cyan:hover { background: var(--cyan-soft); color: var(--cyan-ink); }
.btn--icon { padding: 0; width: 44px; }
.btn--sm { min-height: 38px; padding: 0 14px; }
.btn--lg { min-height: 48px; font-size: 15px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* Nhãn chủ đề */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
	border-radius: 999px; background: var(--raise); border: 1px solid var(--chip-line);
	color: var(--text-2); font-size: 13px; line-height: 1.4;
}
a.chip:hover { color: var(--strong); border-color: var(--ghost-line); }
.chip--lg { font-size: 14px; padding: 8px 14px; }
.chip--gold { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-text); }
.chip--button { min-height: 36px; font-family: inherit; cursor: pointer; }
.chip--button[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--cyan); color: var(--cyan-text); }

/* Ảnh đại diện chữ */
.avatar {
	width: 44px; height: 44px; flex: none; display: inline-flex;
	align-items: center; justify-content: center; font-weight: 700;
	background: var(--raise); color: var(--strong);
}
.avatar--round { border-radius: 50%; }
.avatar--square { border-radius: var(--radius-sm); font-weight: 800; }
.avatar--ring { border: 2px solid var(--cyan); }
.avatar--gold { background: var(--gold-bg); color: var(--gold-text); }
.avatar--cyan { background: var(--chip-on-bg); color: var(--cyan-text); }
.avatar--muted { background: var(--avatar-muted); }
.avatar--link:hover { color: var(--strong); background: var(--avatar-hover); }
.avatar.avatar--tint { background: linear-gradient(135deg, hsl(var(--hue) 62% 46%), hsl(calc(var(--hue) + 40) 58% 34%)); color: #fff; }
.avatar--img { object-fit: cover; background: var(--panel); border: 1px solid var(--panel-line); }
.avatar--square.avatar--img { object-fit: contain; background: #fff; padding: 4px; }
.avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
summary.avatar { overflow: hidden; }
.avatar--lg { width: 72px; height: 72px; font-size: 24px; }
.avatar--xl { width: 104px; height: 104px; font-size: 34px; }
.avatar--hero { width: 132px; height: 132px; font-size: 44px; }
.avatar--square.avatar--lg, .avatar--square.avatar--xl, .avatar--square.avatar--hero { border-radius: 18px; }

/* Thanh tiến độ */
.bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 0; }
.bar__fill { display: block; height: 100%; }
.bar__fill--cyan, .bar__fill--high { background: var(--cyan); }
.bar__fill--mid { background: var(--gold); }
.bar__fill--low { background: var(--coral); }

/* Đầu trang */
.site-header {
	position: sticky; top: 0; z-index: 30; min-height: var(--header-h);
	display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 620px) minmax(max-content, 1fr); align-items: center; gap: 16px;
	padding: 10px 16px; border-bottom: 1px solid var(--divider); background: var(--bg);
}

/* Ô tìm kiếm giữa thanh đầu trang, gợi ý kết quả khi gõ */
.site-search { position: relative; width: 100%; }
.site-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.site-search__input {
	width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: 999px;
	border: 1px solid var(--panel-line); background: var(--raise); color: var(--strong); font: inherit; font-size: 15px;
}
.site-search__input::placeholder { color: var(--muted); }
.site-search__input:focus { outline: none; border-color: var(--cyan); background: var(--panel); box-shadow: 0 0 0 3px var(--chip-on-bg); }
.site-search__input::-webkit-search-cancel-button { cursor: pointer; }
.site-search__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; max-height: min(70vh, 560px); overflow-y: auto;
	padding: 8px; display: flex; flex-direction: column; box-shadow: 0 16px 40px var(--shadow);
}
.site-search__panel[hidden] { display: none; }
.site-search__group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site-search__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--text-2); }
.site-search__item:hover, .site-search__item[aria-selected="true"], .site-search__all[aria-selected="true"] { background: var(--raise); color: var(--strong); }
.site-search__text { min-width: 0; display: flex; flex-direction: column; }
.site-search__label { font-weight: 600; color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search__text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search__empty { margin: 0; padding: 10px; }
.site-search__all { margin-top: 6px; padding: 10px; border-top: 1px solid var(--panel-line); border-radius: 0 0 10px 10px; font-weight: 600; color: var(--cyan-text); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--strong); }
.brand:hover { color: var(--strong); }
.brand__logo { color: var(--cyan-text); flex: none; }
.theme-toggle__icon { display: none; }
.theme-toggle[data-current="auto"] [data-mode="auto"],
.theme-toggle[data-current="light"] [data-mode="light"],
.theme-toggle[data-current="dark"] [data-mode="dark"],
.theme-toggle:not([data-current]) [data-mode="auto"] { display: inline-flex; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 800; font-size: 19px; letter-spacing: 0.06em; }
.brand__tag { font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.site-header__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* Hero */
.hero {
	position: relative; overflow: hidden; border-bottom: 1px solid var(--divider);
	background: radial-gradient(ellipse 60% 90% at 70% 40%, var(--hero-glow) 0%, var(--bg) 70%);
}
.hero__inner {
	max-width: 1400px; margin: 0 auto; padding: 48px 24px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
}
.hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero__title { margin: 0; font-size: 52px; line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; }
.hero__lead { margin: 0; font-size: 18px; color: var(--text-3); max-width: 560px; }
.hero__art { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }
.globe { position: relative; width: 460px; max-width: 100%; aspect-ratio: 1 / 1; }
.globe__svg { position: absolute; inset: 0; }
.globe__tag {
	position: absolute; display: flex; flex-direction: column; padding: 10px 14px;
	background: var(--glass); border: 1px solid var(--panel-line); border-radius: var(--radius); font-size: 13px;
}
.globe__tag span { color: var(--muted); }
.globe__tag--tl { left: 0; top: 40px; }
.globe__tag--tr { right: 0; top: 24px; }
.globe__tag--bl { left: 10px; bottom: 60px; }
.globe__tag--br { right: 6px; bottom: 90px; }

/* Bố cục ba cột kiểu Facebook: cột trái bám mép trái, cột phải bám mép phải, bảng tin ở giữa.
   Hai cột bên đứng yên khi cuộn bảng tin và tự cuộn riêng nếu dài hơn màn hình. */
.layout {
	--side-top: calc(var(--header-h) + 20px);
	padding: 20px 16px 32px;
	display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(280px, 360px); gap: 24px; align-items: start;
}
.layout__left, .layout__right, .layout__feed { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.layout__feed { width: 100%; max-width: 760px; justify-self: center; }
.layout--wide .layout__feed { max-width: 1240px; }
.layout__left, .layout__right {
	position: sticky; top: var(--side-top); max-height: calc(100vh - var(--side-top) - 16px);
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.layout__left:hover, .layout__right:hover { scrollbar-color: var(--panel-line) transparent; }

/* Điều hướng trái */
.nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.nav__item {
	display: flex; align-items: center; gap: 12px; padding: 11px 14px;
	border-radius: 10px; color: var(--text-2); font-size: 15px;
}
.nav__item:hover { background: var(--raise); color: var(--strong); }
.nav__item[aria-current="page"] { background: var(--chip-on-bg); color: var(--cyan-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--cyan); }
.nav__item .icon { color: var(--cyan-text); }
.side-cta { display: flex; flex-direction: column; gap: 8px; }
.nav__item .icon { flex: none; }

/* Thẻ nhỏ ở hai cột bên */
.card-sm { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.layout__left .card-sm { padding: 16px; gap: 10px; }
.card-sm--gold { background: var(--gold-panel); border-color: var(--gold-line); }
.card-sm__title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.card-sm__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Luồng nội dung */
.tabs { padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.tab {
	min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 600;
	background: transparent; color: var(--text-2);
}
.tab:hover { background: var(--raise); color: var(--strong); }
.tab { display: inline-flex; align-items: center; gap: 8px; }
.home .tabs { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; box-shadow: 0 6px 18px var(--shadow); }
.tab[aria-selected="true"] { background: var(--cyan); color: var(--cyan-ink); }
.feed { display: flex; flex-direction: column; gap: 16px; }
.feed[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s; }
.feed-more { align-self: center; }
.feed-empty p { margin: 0; color: var(--text-2); }

/* Ô soạn bài */
.composer { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.composer__row { display: flex; gap: 12px; align-items: center; }
.composer__row--split { flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.composer__field { flex: 1; min-width: 0; }
.composer__status { margin: 0; }
.composer__status:empty { display: none; }
.input {
	width: 100%; height: 48px; padding: 0 16px; border-radius: var(--radius-sm);
	background: var(--input-bg); border: 1px solid var(--chip-line); color: var(--text);
	font-family: inherit; font-size: 15px;
}
.input::placeholder { color: var(--placeholder); }
.input--area { height: auto; padding: 12px 16px; resize: vertical; }

/* Thẻ bài trên bảng tin */
.card { min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card--problem { border-color: var(--problem-line); }
.card--advisor { gap: 16px; border-color: var(--accent-line); background: var(--advisor-bg); }
.card__head { display: flex; align-items: center; gap: 12px; }
.card__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card__who > .strong { display: block; }
.card__meta { font-size: 13px; color: var(--muted); font-weight: 400; }
.card__kicker { font-size: 13px; font-weight: 600; text-transform: uppercase; }
.card__title { margin: 0; font-size: 21px; line-height: 1.35; }
.card__title a { color: var(--text); }
.card__title a:hover { color: var(--strong); text-decoration: underline; text-decoration-color: var(--ghost-line); }
.card__text { margin: 0; color: var(--text-3); }
.card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card__stats { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: -6px 0 -10px -10px; }
.stat-btn {
	min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
	color: var(--muted); font-family: inherit; font-size: 14px; cursor: pointer;
	display: inline-flex; align-items: center;
}
.stat-btn:hover { color: var(--text); background: var(--raise); }
.stat-btn[aria-pressed="true"] { color: var(--cyan-text); }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--raise); color: var(--muted); font-weight: 500; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--cyan-text); font-size: 13px; font-weight: 600; }

.facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.facts__item { background: var(--well); border-radius: var(--radius-sm); padding: 10px 12px; }
.facts dd { margin: 0; font-weight: 700; }

.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flow--sm { gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.flow__arrow { color: var(--cyan-text); }

/* Bình chọn */
.poll {
	margin: 0; border: 1px solid var(--chip-line); border-radius: var(--radius-sm);
	padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.poll__legend { padding: 0 6px; font-weight: 600; }
.poll .chips { gap: 8px; }
.poll__option {
	min-height: 44px; padding: 0 20px; border-radius: 10px; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 600;
	background: transparent; color: var(--text); border: 1px solid var(--ghost-line);
}
.poll__option:hover { background: var(--raise); }
.poll__option[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.poll__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; color: var(--text-2); }
.poll__cta[hidden] { display: none; }

/* DX Score */
.dx { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.dx__ring-wrap { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dx__ring {
	width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: conic-gradient(var(--gold) 0 calc(var(--score) * 1%), var(--track) calc(var(--score) * 1%) 100%);
}
.dx__ring-inner {
	width: 112px; height: 112px; border-radius: 50%; background: var(--advisor-bg);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dx__value { font-size: 40px; font-weight: 800; line-height: 1; }
.dx__max { font-size: 13px; color: var(--muted); }
.dx__dims { flex: 1 1 280px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.dx__dim { display: grid; grid-template-columns: 120px minmax(0, 1fr) 32px; gap: 10px; align-items: center; font-size: 13px; }
.dx__dim dt { color: var(--text-2); }
.dx__num { margin: 0; text-align: right; font-weight: 700; }
.todo { margin: 0; padding-left: 20px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.suggest {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px;
	border-radius: var(--radius-sm); border: 1px solid var(--cyan); background: var(--accent-bg);
}
.suggest__body { flex: 1 1 260px; min-width: 0; }

.dx-form { gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__row { display: flex; justify-content: space-between; align-items: center; }
.field--range input { width: 100%; accent-color: var(--gold); min-height: 32px; }

/* Cột phải */
.opp { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 14px; }
.opp:hover { color: var(--strong); }
.opp__num {
	width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); background: var(--raise);
	color: var(--cyan-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
}
.product { display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius-sm); background: var(--well); color: var(--text); }
.product:hover { color: var(--text); background: var(--product-hover); }
.product--featured { background: var(--accent-bg); border: 1px solid var(--accent-line); }
.product--featured:hover { background: var(--accent-bg-hover); }
.product__badge { font-size: 12px; color: var(--cyan-text); margin-top: 4px; font-weight: 600; }
.event { display: flex; gap: 12px; align-items: center; color: var(--text); }
.event:hover { color: var(--strong); }
.event__date {
	width: 52px; flex: none; text-align: center; border-radius: var(--radius-sm);
	background: var(--gold); color: var(--gold-ink); padding: 6px 0; display: flex; flex-direction: column;
}
.event__day { font-size: 20px; font-weight: 800; line-height: 1.1; }
.event__month { font-size: 11px; font-weight: 600; }
.event__body { min-width: 0; display: flex; flex-direction: column; }
.event__title { font-weight: 600; font-size: 14px; }

/* Chân trang */
.site-footer { border-top: 1px solid var(--divider); background: var(--well); }
.site-footer__inner { max-width: 1400px; margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; }
.site-footer__legal { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer__links a { color: var(--text-2); }
.site-footer__links a:hover { color: var(--strong); }

/* Trang chi tiết, bình luận, tìm kiếm */
.prose { color: var(--text-3); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.comment-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--text-2); }
.comment-list .comment-meta { font-size: 13px; color: var(--muted); }
.comment-list .comment-meta a { color: var(--muted); }
.comment-respond .comment-reply-title { font-size: 16px; margin: 0 0 8px; }
.comment-form label { display: block; margin-bottom: 6px; font-weight: 600; }
.comment-form .logged-in-as { font-size: 13px; color: var(--muted); }
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-form .search-field {
	width: 100%; height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
	background: var(--input-bg); border: 1px solid var(--chip-line); color: var(--text); font-family: inherit; font-size: 15px;
}
.search-form .search-submit { min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 0; background: var(--gold); color: var(--gold-ink); font-family: inherit; font-weight: 600; cursor: pointer; }
.pager .nav-links { display: flex; gap: 8px; justify-content: center; }
.pager .page-numbers { padding: 8px 12px; border-radius: 10px; background: var(--raise); color: var(--text-2); }
.pager .page-numbers.current { background: var(--cyan); color: var(--cyan-ink); }

/* Đầu trang: chuyển ngôn ngữ, menu tài khoản */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--ghost-line); }
.lang-switch a { min-width: 40px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 700; }
.lang-switch a:hover { color: var(--strong); background: var(--raise); }
.lang-switch a[aria-current="true"] { background: var(--cyan); color: var(--cyan-ink); }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px; padding: 8px; display: flex; flex-direction: column; box-shadow: 0 12px 32px var(--shadow); }
.user-menu__who { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--panel-line); margin-bottom: 4px; }
.user-menu__panel a, .user-menu__logout { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 8px; color: var(--text-2); background: none; border: 0; font: inherit; cursor: pointer; }
.user-menu__panel a:hover, .user-menu__logout:hover { background: var(--raise); color: var(--strong); }
.user-menu__panel a .small { display: block; }
.user-menu__sep { display: block; height: 1px; margin: 4px 0; background: var(--panel-line); }

/* Tiêu đề trang */
.layout--wide { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.page-head { min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-head__back { color: var(--muted); }
.page-head__sub { margin: 0; color: var(--muted); max-width: 720px; }
.section-title { margin: 8px 0 0; font-size: 20px; }
.badge--lang { font-size: 11px; vertical-align: middle; border: 1px solid var(--chip-line); background: transparent; }

/* Lưới thẻ: giải pháp, chuyên gia, doanh nghiệp */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
a.card { color: var(--text); }
a.card:hover { border-color: var(--ghost-line); color: var(--text); }
.solution { gap: 8px; }
.solution__name { font-size: 18px; font-weight: 700; }
.solution--partner { background: var(--accent-bg); border-color: var(--cyan); }
.company-card { gap: 12px; }
.card__author { color: var(--text); }
.card__author:hover { color: var(--strong); text-decoration: underline; text-decoration-color: var(--ghost-line); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stack--tight { gap: 6px; }
.stat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.stat-big { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }

/* Sự kiện */
.event-row { flex-direction: row; align-items: flex-start; gap: 16px; }
.event-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.event-row__title { font-size: 18px; font-weight: 700; }
.event-badge { flex: none; width: 72px; padding: 10px 0; border-radius: var(--radius-sm); text-align: center; font-size: 13px; font-weight: 800; background: var(--gold); color: var(--gold-ink); }
.event-badge--online, .event__date--online { background: var(--cyan); color: var(--cyan-ink); }

/* Tìm kiếm */
.search { display: flex; align-items: center; gap: 8px; padding: 8px; }
.search__icon { display: flex; padding-left: 8px; }
.search__input { border: 0; background: transparent; height: 44px; }

/* Form */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 600; font-size: 14px; color: var(--text-2); }
.field[hidden] { display: none; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.input--sm { height: 38px; font-size: 14px; }
.choice { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; }
.segmented span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ghost-line); color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.segmented input:checked + span { background: var(--chip-on-bg); border-color: var(--cyan); color: var(--cyan-text); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.form-actions .form-status { margin-right: auto; }
.form-status { margin: 0; font-size: 14px; color: var(--cyan-text); }
.form-status:empty { display: none; }
.form-status--error { color: var(--coral-text); }
.hp { position: absolute; left: -9999px; }
.lead-form { border-color: var(--cyan); background: var(--accent-bg); }
.lead-form__title { margin: 0; font-size: 18px; }
.blueprint .lead-form { padding: 16px; }

.notice-box { border-color: var(--gold-line); background: var(--gold-panel); gap: 8px; }

/* Ô mật khẩu có nút hiện/ẩn */
.pw { position: relative; display: block; }
.pw__input { padding-right: 52px; }
.pw__toggle { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.pw__toggle:hover { color: var(--text); background: var(--raise); }
.pw__hide, .pw__toggle[aria-pressed="true"] .pw__show { display: none; }
.pw__toggle[aria-pressed="true"] .pw__hide { display: inline-flex; }
.pw__show { display: inline-flex; }
input.pw__input::-ms-reveal { display: none; }

/* Ô tích đồng ý */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); cursor: pointer; }
.form-note { margin: 0; }

/* Trang nội dung dài (điều khoản, chính sách) */
.card.prose { display: block; }
.prose > * + * { margin-top: 12px; }
.prose p:empty { display: none; }
.prose h2 { margin: 28px 0 0; font-size: 19px; color: var(--text); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 22px 0 8px; font-size: 16px; color: var(--text); }
.prose p, .prose li { line-height: 1.7; }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--raise); font-size: 13px; }
.prose strong { color: var(--text); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* Đăng nhập, đăng ký */
.auth { min-height: calc(100vh - 260px); display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth__card { width: 440px; max-width: 100%; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* AI Advisor */
.blueprint { gap: 18px; }
.blueprint__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.phases { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.phase { padding: 14px; border-radius: var(--radius-sm); background: var(--well-2); border: 1px solid var(--panel-line); }
.phase__when { color: var(--cyan-text); font-size: 13px; font-weight: 700; }
.phase ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; }

/* DX Score */
.dx-form { display: flex; flex-direction: column; gap: 16px; }
.dx-dim { margin: 0; gap: 18px; }
.dx-dim__legend { padding: 0 6px; }
.dx-q { display: flex; flex-direction: column; gap: 10px; }
.scale { display: flex; flex-wrap: wrap; gap: 8px; }
.scale label { position: relative; }
.scale input { position: absolute; opacity: 0; inset: 0; }
.scale span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ghost-line); color: var(--text-2); font-size: 14px; cursor: pointer; }
.scale input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }
.scale input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.dx-submit { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; box-shadow: 0 -8px 24px var(--shadow); }
.dx-submit .form-status { flex: 1; text-align: right; }
.dx-progress { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.dx-progress .bar__fill { transition: width 0.25s; }
.dx-progress[hidden], .dx-dim[hidden], .dx-submit [hidden] { display: none; }
.dx-form--steps .dx-submit { position: static; box-shadow: none; }

/* Tri thức: được quan tâm */
.popular { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.popular a { color: var(--text-2); }
.popular a:hover { color: var(--strong); }

/* Bình luận */
.comment-list { list-style: none; padding: 0; gap: 14px; }
.comment { display: flex; gap: 12px; align-items: flex-start; }
.comment__body { min-width: 0; }
.comment__text p { margin: 4px 0 0; color: var(--text-2); }
.avatar--sm { width: 36px; height: 36px; font-size: 13px; }

/* Bảng quản trị */
.table-box { position: relative; max-width: 100%; overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--panel-line); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 820px; }
.table th, .table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--panel-line); }
.table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--well); }
.table__message { max-width: 280px; color: var(--text-2); }
.prose--lead { font-size: 16px; }

/* Quản trị trên giao diện */
.admin-nav { padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.admin-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 600; }
.admin-nav a:hover { background: var(--raise); color: var(--strong); }
.admin-nav a[aria-current="page"] { background: var(--chip-on-bg); color: var(--cyan-text); }
.admin-nav__system { margin-left: auto; }
.filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.filters .field { flex: 1 1 220px; max-width: 420px; }
.filters .chips { flex-basis: 100%; }
.chip[aria-current="page"] { background: var(--chip-on-bg); border-color: var(--cyan); color: var(--cyan-text); }
.table--compact { min-width: 640px; }
.table__title { font-weight: 600; color: var(--strong); }
.table__actions { display: flex; gap: 6px; white-space: nowrap; }
.pill { display: inline-flex; white-space: nowrap; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--raise); color: var(--text-2); }
.pill--publish { background: var(--chip-on-bg); color: var(--cyan-text); }
.pill--draft, .pill--pending { background: var(--gold-bg); color: var(--gold-text); }
.btn--danger { color: var(--coral-text); border-color: currentColor; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.editor__main, .editor__side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.editor__title { font-size: 20px; font-weight: 700; height: 52px; }
.editor__content { min-height: 360px; font-size: 15px; line-height: 1.65; }
.fmt-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.fmt-bar button { min-width: 38px; min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ghost-line); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fmt-bar button:hover { background: var(--raise); color: var(--strong); }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--cyan); }
.cover { display: flex; flex-direction: column; gap: 10px; }
.cover__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--panel-line); background: var(--well); }
.cover__img[hidden] { display: none; }
.cover__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cover__file { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Trang Giải pháp */
.solution-search { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.solution-search__box { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.solution-search__box .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.solution-search__box .input { padding-left: 44px; height: 50px; font-size: 16px; }
.solution-search__cat { flex: 0 1 240px; height: 50px; }
.solutions { display: flex; flex-direction: column; gap: 16px; }
.solutions__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.solutions__featured { display: flex; flex-direction: column; gap: 12px; }
.solutions__featured .section-title { margin: 0; }
.solution-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.solution-grid--featured { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.solution-card { position: relative; padding: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); transition: border-color .15s, transform .15s; }
.solution-card:hover { border-color: var(--ghost-line); transform: translateY(-2px); color: var(--text-2); }
.solution-card--partner { border-color: var(--gold-line); }
.solution-card--featured { background: linear-gradient(160deg, var(--gold-panel), var(--panel) 60%); border-color: var(--gold-line); }
.solution-card__top { display: flex; align-items: center; gap: 12px; }
.solution-card__top .avatar--lg { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
.solution-card__id { min-width: 0; display: flex; flex-direction: column; }
.solution-card__name { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--strong); }
.solution-card:hover .solution-card__name { color: var(--cyan-text); }
.solution-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.solution-card__text { font-size: 14px; line-height: 1.6; }
.solution-card__fit { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); }
.solution-card__fit .icon { flex: none; margin-top: 2px; }
.solution-card__more { margin-top: auto; color: var(--cyan-text); font-weight: 600; }

/* Hộp thoại giới thiệu chuyên gia */
.refer { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; color: var(--text); }
.refer::backdrop { background: rgba(4, 8, 18, .6); }
.refer__inner { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.refer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.refer__head p { margin: 4px 0 0; }
.refer__lists { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.refer__group { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.refer__opt { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.refer__opt:hover { background: var(--raise); }
.refer__opt:has(input:checked) { border-color: var(--cyan); background: var(--chip-on-bg); }
.refer__opt[hidden] { display: none; }
.refer__opt input { accent-color: var(--cyan); }
.refer__opt .person-row__text { flex: 1; }
.referral { margin-top: 8px; border: 1px solid var(--panel-line); background: var(--well); }
.referral .person-row__text { flex: 1; }

/* Thông báo */
.notif-menu__btn { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.notif-badge[hidden] { display: none; }
.notif-menu__panel { width: min(380px, calc(100vw - 24px)); padding: 6px; }
.notif-menu__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--cyan-text); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.notif-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.user-menu__panel .notif, .notif { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--text-2); text-align: left; }
.notif:hover { background: var(--raise); color: var(--strong); }
.notif--unread { background: var(--chip-on-bg); }
.notif--unread .notif__text { color: var(--strong); font-weight: 600; }
.notif__who { position: relative; flex: none; }
.notif__icon { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cyan); color: var(--cyan-ink); border: 2px solid var(--panel); }
.notif__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.notif__empty { margin: 0; padding: 16px 10px; }
.notif-menu__all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--panel-line); text-align: center; font-weight: 600; color: var(--cyan-text) !important; }
.notif-page { padding: 8px; }
.notif-page .notif-list { max-height: none; }
@media (max-width: 520px) {
	.notif-menu { position: static; }
	.notif-menu__panel { left: 12px; right: 12px; width: auto; }
}

/* Trình soạn thảo trực quan */
.rich { display: flex; flex-direction: column; gap: 8px; }
.rich__bar { position: sticky; top: calc(var(--header-h) + 4px); z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 10px; background: var(--well); border: 1px solid var(--panel-line); }
.rich__bar button { min-width: 36px; height: 34px; padding: 0 9px; border-radius: 8px; border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rich__bar button:hover, .rich__bar button[aria-pressed="true"] { background: var(--raise); color: var(--strong); }
.rich__html { margin-left: auto; font-size: 12px !important; }
.rich__area { min-height: 380px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--panel-line); background: var(--panel); color: var(--text); font-size: 16px; line-height: 1.75; outline: none; overflow-wrap: anywhere; }
.rich__area:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--chip-on-bg); }
.rich__area:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.rich__area[hidden] { display: none; }
.rich__source { min-height: 380px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.rich__source[hidden] { display: none; }
.prose blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--gold); color: var(--text-2); font-style: italic; }
.prose figure { margin: 18px 0; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }
.prose hr { border: 0; border-top: 1px solid var(--panel-line); margin: 24px 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.tab[aria-current="page"] { background: var(--cyan); color: var(--cyan-ink); }
a.tab { display: inline-flex; align-items: center; }
.editor__side .btn { width: 100%; justify-content: center; }

/* Ảnh bìa bài viết: trên thẻ và đầu trang chi tiết */
.card__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.card__byline-who { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); }
.card__byline-who:hover .strong { color: var(--cyan-text); }
.card__cover { display: block; margin: -4px 0 4px; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 7; background: var(--well); }
.card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.card__cover:hover img { transform: scale(1.02); }
.post-cover { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--panel-line); }
.post-cover img { width: 100%; max-height: 440px; object-fit: cover; display: block; }

/* Kiểm duyệt, trang rời BALOTECH */
.mod-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--panel-line); }
.mod-item__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mod-item__body p { margin: 0; color: var(--text-2); }
.mod-item .pill { align-self: flex-start; white-space: normal; }
.leave__url { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--panel-line); overflow-wrap: anywhere; }

/* Danh sách các bước ngắn */
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); font-size: 14px; }

/* Danh bạ chuyên gia */
.chips--sm .chip { padding: 4px 10px; font-size: 12px; }
.chip--more { background: transparent; }
.chip--cyan { background: var(--chip-on-bg); border-color: var(--cyan); color: var(--cyan-text); }
.verified-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); color: var(--cyan-ink); vertical-align: 2px; }
.expert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.expert-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0; text-align: center; transition: border-color .15s, transform .15s; }
.expert-card:hover { border-color: var(--ghost-line); transform: translateY(-2px); }
.expert-card__cover { height: 84px; background: linear-gradient(120deg, hsl(var(--hue) 60% 42% / .9), hsl(calc(var(--hue) + 50) 65% 30% / .9)), radial-gradient(circle at 80% 0, var(--gold) 0, transparent 60%); }
.expert-card__photo { align-self: center; margin-top: -52px; border-radius: 50%; padding: 4px; background: var(--panel); }
.expert-card__body { flex: 1; padding: 8px 18px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.expert-card__name { margin: 0; font-size: 18px; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; }
.expert-card__name a { color: var(--strong); }
.expert-card__title { margin: 0; color: var(--cyan-text); font-weight: 600; font-size: 14px; }
.expert-card__meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.expert-card__meta span, .profile-hero__meta span, .company-row__facts li { display: inline-flex; align-items: center; gap: 5px; }
.expert-card__bio { margin: 0; color: var(--text-2); }
.expert-card .chips { justify-content: center; }
.expert-card__actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.expert-stats { margin: 4px 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-block: 1px solid var(--panel-line); }
.expert-stats div { padding: 8px 4px; display: flex; flex-direction: column-reverse; }
.expert-stats div + div { border-left: 1px solid var(--panel-line); }
.expert-stats dt { font-size: 11px; color: var(--muted); }
.expert-stats dd { margin: 0; font-size: 18px; font-weight: 800; color: var(--strong); }
/* Chuyên gia tiêu biểu: thẻ ngang, ảnh lớn */
.expert-card--featured { display: grid; grid-template-columns: 220px minmax(0, 1fr); text-align: left; border-color: var(--gold-line); }
.expert-card--featured .expert-card__cover { grid-column: 1; grid-row: 1 / 3; height: auto; align-self: stretch; }
.expert-card--featured .expert-card__photo { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; margin: 0; }
.expert-card--featured .avatar--xl { width: 168px; height: 168px; font-size: 52px; }
.expert-card--featured .expert-card__body { grid-column: 2; grid-row: 1 / 3; align-items: flex-start; padding: 22px 24px; }
.expert-card--featured .expert-card__name { font-size: 24px; }
.expert-card--featured .chips, .expert-card--featured .expert-card__meta, .expert-card--featured .expert-card__actions { justify-content: flex-start; }
.expert-card--featured .expert-stats { max-width: 460px; }

/* Phần đầu hồ sơ công khai */
.profile-hero { padding: 0; overflow: hidden; }
.profile-hero__cover {
	height: 150px; padding: 14px 18px; position: relative;
	background: linear-gradient(120deg, hsl(var(--hue) 60% 40%), hsl(calc(var(--hue) + 50) 65% 26%)), var(--well);
}
.profile-hero__cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, rgba(245, 184, 65, .45), transparent 45%), radial-gradient(circle at 10% 120%, rgba(53, 210, 230, .35), transparent 50%); }
.profile-hero__back { position: relative; z-index: 1; display: inline-flex; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: #fff; }
.profile-hero__back:hover { color: #fff; background: rgba(0, 0, 0, .5); }
.profile-hero__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; padding: 14px 24px 18px; position: relative; }
.profile-hero__photo { margin-top: -84px; }
.profile-hero__photo { flex: none; padding: 5px; border-radius: 50%; background: var(--panel); }
.profile-hero__photo .avatar--square { border-radius: 18px; }
.profile-hero__photo:has(.avatar--square) { border-radius: 22px; }
.profile-hero__text { flex: 1 1 260px; min-width: 0; padding-bottom: 4px; display: flex; flex-direction: column; gap: 4px; }
.profile-hero__name { margin: 0; font-size: 28px; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.profile-hero__headline { margin: 0; color: var(--cyan-text); font-weight: 600; font-size: 16px; }
.profile-hero__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.profile-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-hero__stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 1px solid var(--panel-line); }
.profile-hero__stats div { padding: 12px 24px; display: flex; flex-direction: column-reverse; gap: 2px; }
.profile-hero__stats div + div { border-left: 1px solid var(--panel-line); }
.profile-hero__stats dt { font-size: 12px; color: var(--muted); }
.profile-hero__stats dd { margin: 0; font-size: 22px; font-weight: 800; color: var(--strong); }
.anchor-target { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Người trong danh sách nhỏ (cột phải, kết quả tìm kiếm) */
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--text-2); }
.person-row:hover { background: var(--raise); color: var(--strong); }
.person-row__text { min-width: 0; display: flex; flex-direction: column; }

/* Danh bạ doanh nghiệp: mỗi doanh nghiệp một hàng ngang */
.filters--grid { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(130px, 1fr)) auto; }
.filters--grid .field { max-width: none; }
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.list-bar p { margin: 0; }
.list-bar .chips { align-items: center; }
.company-list { display: flex; flex-direction: column; gap: 14px; }
.company-row { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 20px; padding: 14px; transition: border-color .15s; }
.company-row:hover { border-color: var(--ghost-line); }
.company-row__id { padding: 16px; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 12px; }
.company-row__brand { display: flex; align-items: center; gap: 14px; color: var(--strong); }
.company-row__name { font-size: 17px; font-weight: 800; line-height: 1.3; }
.company-row__brand:hover .company-row__name { color: var(--cyan-text); }
.company-row__facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.company-row__facts .icon { color: var(--muted); flex: none; }
.company-row__facts a { overflow-wrap: anywhere; }
.company-row__dx { display: flex; flex-direction: column; gap: 6px; }
.company-row__body { min-width: 0; padding: 6px 4px; display: flex; flex-direction: column; gap: 12px; }
.company-row__about { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.company-row__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.company-row__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

/* Ảnh hồ sơ trong form */
.photo-field { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--panel-line); }
.photo-field__text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.photo-field__text p { margin: 0; }

/* Nút cài đặt ngôn ngữ, sáng/tối: chỉ dùng trên điện thoại */
.prefs-menu { display: none; }
.prefs-menu__panel { min-width: 290px; padding: 12px; gap: 6px; }
.prefs-menu__row { display: flex; gap: 6px; margin-bottom: 8px; }
.user-menu__panel .prefs-menu__opt, .prefs-menu__opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ghost-line); background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; white-space: nowrap; }
.prefs-menu__opt[aria-current="true"], .prefs-menu__opt[aria-pressed="true"] { background: var(--chip-on-bg); border-color: var(--cyan); color: var(--cyan-text); }

/* Điện thoại nhỏ: logo và tên BALOTECH bên trái, các nút gọn bên phải */
@media (max-width: 520px) {
	.brand__tag { display: none; }
	.brand__name { font-size: 17px; }
	.brand__logo { width: 32px; height: 32px; }
	.prefs-menu { display: block; }
	.site-header__actions > .lang-switch, .site-header__actions > .theme-toggle { display: none; }
	/* Khách: một nút Đăng nhập (trang đăng nhập có liên kết Đăng ký) */
	.header-register { display: none; }
	.header-login { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
	.site-header { padding-inline: 12px; }
	.site-header__actions { gap: 4px; }
	.site-header__actions .btn { min-height: 40px; font-size: 14px; }
	.site-header__actions .btn--icon { width: 40px; padding: 0; }
	.site-header__actions .avatar { width: 40px; height: 40px; }
	.site-header__actions .btn { padding: 0 8px; }
	.lang-switch a { min-width: 30px; }
}

/* Màn hình vừa: cột phải xuống dưới bảng tin */
@media (max-width: 1199px) {
	.layout, .layout--wide { grid-template-columns: 230px minmax(0, 1fr); }
	.layout__right { grid-column: 2; position: static; max-height: none; overflow: visible; }
	.editor { grid-template-columns: minmax(0, 1fr); }
	.filters--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.filters--grid .field:first-child { grid-column: 1 / -1; }
	.layout__feed { max-width: none; }
}

/* Điện thoại và máy tính bảng dọc: một cột, điều hướng thành dải cuộn ngang */
@media (max-width: 860px) {
	.site-header { position: relative; display: flex; flex-wrap: wrap; gap: 10px 8px; }
	.site-header__actions { margin-left: auto; }
	.site-search { order: 3; flex-basis: 100%; }
	.profile-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.profile-hero__stats div:nth-child(odd) { border-left: 0; }
	.profile-hero__stats div:nth-child(n + 3) { border-top: 1px solid var(--panel-line); }
	.home .tabs { position: static; box-shadow: none; }
	.tab { padding: 0 12px; }
	.expert-card--featured { grid-template-columns: minmax(0, 1fr); text-align: center; }
	.expert-card--featured .expert-card__cover { grid-row: 1; height: 84px; min-height: 0; }
	.expert-card--featured .expert-card__photo { grid-row: 2; margin-top: -52px; }
	.expert-card--featured .avatar--xl { width: 120px; height: 120px; font-size: 40px; }
	.expert-card--featured .expert-card__body { grid-column: 1; grid-row: 3; align-items: center; padding: 8px 18px 18px; }
	.expert-card--featured .chips, .expert-card--featured .expert-card__meta, .expert-card--featured .expert-card__actions { justify-content: center; }
	.profile-hero__cover { height: 110px; }
	.profile-hero__main { padding: 12px 16px 16px; }
	.profile-hero__photo { margin-top: -68px; }
	.avatar--hero { width: 104px; height: 104px; font-size: 36px; }
	.profile-hero__name { font-size: 23px; }
	.profile-hero__stats div { padding: 10px 14px; }
	.company-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.filters--grid { grid-template-columns: minmax(0, 1fr); }
	.solution-search__cat { flex-basis: 100%; }
	.hero__title { font-size: 30px; line-height: 1.15; }
	.hero__br { display: none; }
	.hero__inner { padding: 22px 16px 20px; gap: 16px; }
	.hero__lead { font-size: 16px; }
	.hero__art { display: none; }
	.layout, .layout--wide { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
	.layout__left { position: static; max-height: none; overflow: visible; }
	.table--compact { min-width: 0; }
	.table--compact .table__opt { display: none; }
	.grid2 { grid-template-columns: minmax(0, 1fr); }
	.brand__tag { display: none; }
	.site-header__actions { gap: 6px; }
	.site-header__actions .btn { padding: 0 12px; }
	.event-badge { width: 60px; }
	.layout__right { grid-column: auto; }
	/* Menu chính: thanh bám đầu màn hình khi cuộn, mỗi mục có icon trên chữ */
	.layout__left { position: sticky; top: 0; z-index: 20; margin: -16px -16px 0; padding: 8px 8px 0; background: var(--bg); box-shadow: 0 6px 14px var(--shadow); }
	.side-cta { display: none; }
	.nav { flex-direction: row; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 14px; }
	.nav::-webkit-scrollbar { display: none; }
	.nav__item { flex: none; flex-direction: column; gap: 4px; min-width: 72px; padding: 8px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; text-align: center; }
	.nav__item[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--cyan); }
	.home .tabs { position: static; }
	.layout__left .card-sm { display: none; }
	.facts { grid-template-columns: minmax(0, 1fr); }
	.dx__ring-wrap { flex-basis: 100%; }
	.site-footer__inner { padding: 24px 16px; }
}