/*
 * Hệ thống giao diện dùng chung cho toàn bộ plugin: màn hình quản trị, Trung
 * tâm vận hành, portal cộng tác viên/đại lý/điểm bán và dashboard điều hành.
 *
 * Trước đây mỗi khu vực có bảng màu và bộ chữ riêng nên cùng một hệ thống mà
 * nhìn như ba sản phẩm khác nhau. Ở đây chỉ có MỘT bảng token; các khu vực chỉ
 * khác nhau ở bố cục, không khác nhau ở màu, bo góc hay cỡ chữ.
 *
 * Nguyên tắc: đây là công cụ nội bộ để đối soát tiền, không phải trang quảng
 * cáo. Số liệu phải dễ quét, trạng thái phải đọc được ngay, phần trang trí
 * nhường chỗ cho dữ liệu.
 */

.saola-admin,
.saola-ops,
.saola-client,
.saola-registration,
.saola-management {
	--saola-blue: #002fa7;
	--saola-blue-hover: #00248a;
	--saola-blue-tint: #e9eefb;
	--saola-ink: #151821;
	--saola-muted: #5b6478;
	--saola-line: #dfe2ea;
	--saola-line-strong: #c3c9d6;
	--saola-paper: #ffffff;
	--saola-surface: #f5f6fa;
	--saola-ok: #0f6b4f;
	--saola-ok-tint: #e4f3ec;
	--saola-warn: #8a5a06;
	--saola-warn-tint: #fdf0da;
	--saola-stop: #a12630;
	--saola-stop-tint: #fbe9ea;
	--saola-radius: 6px;
	--saola-shadow: 0 1px 2px rgba(21, 24, 33, .06);

	color: var(--saola-ink);
	font-variant-numeric: tabular-nums;
}

.saola-admin *,
.saola-ops *,
.saola-client *,
.saola-registration *,
.saola-management *,
.saola-admin *::before,
.saola-ops *::before,
.saola-client *::before,
.saola-registration *::before,
.saola-management *::before,
.saola-admin *::after,
.saola-ops *::after,
.saola-client *::after,
.saola-registration *::after,
.saola-management *::after { box-sizing: border-box; }

/* Trong WP Admin dùng đúng bộ chữ của WordPress để không lạc khỏi khung quản
   trị; ngoài website thì thừa kế bộ chữ của giao diện. */
.saola-admin,
.saola-ops {
	max-width: 1420px;
	margin-top: 18px;
	padding: 0 20px 40px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

.saola-client,
.saola-registration,
.saola-management { font-family: inherit; }

.saola-admin h1,
.saola-ops h1 { margin: 0; padding: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--saola-ink); }
.saola-admin h2,
.saola-ops h2,
.saola-client h2,
.saola-management h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--saola-ink); }
.saola-admin h3,
.saola-ops h3,
.saola-client h3,
.saola-management h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--saola-ink); }
.saola-admin p,
.saola-ops p,
.saola-client p,
.saola-management p { color: inherit; }
.saola-admin a,
.saola-ops a,
.saola-client a,
.saola-management a { color: var(--saola-blue); }
.saola-admin small,
.saola-ops small { color: var(--saola-muted); }

/* Nhãn nhỏ in hoa: dùng thống nhất cho mọi khu vực. */
.saola-admin__eyebrow,
.saola-ops__eyebrow,
.saola-client__label,
.saola-management__eyebrow {
	margin: 0 0 6px !important;
	color: var(--saola-muted) !important;
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- masthead */

.saola-admin__hero,
.saola-ops__masthead,
.saola-client__masthead,
.saola-management__masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 28px;
	padding: 22px 24px;
	border: 1px solid var(--saola-line);
	border-top: 3px solid var(--saola-blue);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}

.saola-admin__hero > div,
.saola-ops__masthead > div,
.saola-client__masthead > div,
.saola-management__masthead > div { max-width: 74ch; }
.saola-admin__hero p:last-child,
.saola-ops__masthead p:last-child,
.saola-management__masthead p:last-child { margin: 6px 0 0; color: var(--saola-muted); }

.saola-ops__title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.saola-ops__index { display: none; }
.saola-client h2 { max-width: 40ch; font-size: 24px; letter-spacing: -.015em; }
.saola-management__masthead h2 { font-size: 24px; letter-spacing: -.015em; }

.saola-admin__actions,
.saola-ops-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Phạm vi dữ liệu người dùng đang xem — thông tin kiểm soát, luôn hiện rõ. */
.saola-management__scope {
	padding: 12px 16px;
	border: 1px solid var(--saola-blue);
	border-radius: var(--saola-radius);
	background: var(--saola-blue-tint);
}
.saola-management__scope span,
.saola-management__scope strong { display: block; color: var(--saola-ink); }
.saola-management__scope span { margin-bottom: 3px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saola-blue); }
.saola-management__scope strong { font-size: 15px; font-weight: 600; line-height: 1.35; }

/* ------------------------------------------------------------------ điều hướng */

.saola-ops__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 14px 0 0;
	padding: 4px;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-surface);
}
.saola-ops__nav a,
.saola-ops__readonly {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 4px;
	color: var(--saola-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.saola-ops__nav a:hover,
.saola-ops__nav a:focus { background: var(--saola-blue-tint); color: var(--saola-blue); }
.saola-ops__nav a.is-active { background: var(--saola-blue); color: #fff; }
.saola-ops__readonly { margin-left: auto; color: var(--saola-muted); font-weight: 500; }

/* --------------------------------------------------------------------- nút */

.saola-button,
.saola-ops-button,
.woocommerce .saola-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--saola-blue);
	border-radius: 4px;
	background: var(--saola-blue);
	box-shadow: none;
	color: #fff !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.saola-button:hover,
.saola-button:focus,
.saola-ops-button:hover,
.saola-ops-button:focus { border-color: var(--saola-blue-hover); background: var(--saola-blue-hover); color: #fff !important; }
.saola-button:focus-visible,
.saola-ops-button:focus-visible { outline: 2px solid var(--saola-blue); outline-offset: 2px; }

.saola-button--secondary,
.saola-ops-button--ghost {
	background: var(--saola-paper);
	color: var(--saola-blue) !important;
}
.saola-button--secondary:hover,
.saola-button--secondary:focus,
.saola-ops-button--ghost:hover,
.saola-ops-button--ghost:focus { background: var(--saola-blue-tint); color: var(--saola-blue) !important; }

.saola-button--primary { border-color: var(--saola-blue); background: var(--saola-blue); color: #fff !important; }

.saola-ops-button[disabled],
.saola-button[disabled] {
	border-color: var(--saola-line-strong);
	background: var(--saola-surface);
	color: var(--saola-muted) !important;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ ô nhập */

.saola-admin input:not([type="checkbox"]):not([type="radio"]),
.saola-admin select,
.saola-admin textarea,
.saola-ops input:not([type="checkbox"]):not([type="radio"]),
.saola-ops select,
.saola-ops textarea,
.saola-client input[type="text"],
.saola-client input[type="tel"],
.saola-client input[type="email"],
.saola-client input[type="number"],
.saola-client select,
.saola-client textarea,
.saola-registration input:not([type="checkbox"]):not([type="radio"]),
.saola-registration select,
.saola-registration textarea {
	min-height: 38px;
	max-width: 100%;
	padding: 7px 11px;
	border: 1px solid var(--saola-line-strong);
	border-radius: 4px;
	background: var(--saola-paper);
	box-shadow: none;
	color: var(--saola-ink);
	font-family: inherit;
	font-size: 14px;
}
.saola-client input[type="text"],
.saola-client input[type="tel"],
.saola-client input[type="email"],
.saola-client select,
.saola-client textarea,
.saola-registration input:not([type="checkbox"]):not([type="radio"]),
.saola-registration select,
.saola-registration textarea { width: 100%; }

.saola-admin textarea,
.saola-ops textarea,
.saola-client textarea,
.saola-registration textarea { min-height: 92px; resize: vertical; }

.saola-admin input:focus,
.saola-admin select:focus,
.saola-admin textarea:focus,
.saola-ops input:focus,
.saola-ops select:focus,
.saola-ops textarea:focus,
.saola-client input:focus,
.saola-client select:focus,
.saola-client textarea:focus,
.saola-registration input:focus,
.saola-registration select:focus,
.saola-registration textarea:focus {
	border-color: var(--saola-blue);
	box-shadow: 0 0 0 3px var(--saola-blue-tint);
	outline: none;
}

.saola-filters,
.saola-ops-command {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 14px;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}
.saola-filters label,
.saola-ops-command > div,
.saola-ops-inline-form label,
.saola-inline-form label,
.saola-form-grid label {
	display: flex;
	min-width: 170px;
	flex-direction: column;
	gap: 5px;
	color: var(--saola-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.saola-filters__search { flex: 1 1 240px; }
.saola-ops-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.saola-ops-inline-form form,
.saola-ops-actions form { margin: 0; }
.saola-ops-actions { padding: 16px 18px; }

/* ------------------------------------------------------------- khối số liệu */

.saola-kpis,
.saola-ops-metrics,
.saola-metrics,
.saola-management__metrics,
.saola-withdrawal__balance,
.saola-tier-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin: 16px 0;
	padding: 0;
	border: 0;
}

.saola-kpi,
.saola-ops-metrics article,
.saola-metric,
.saola-management__metric,
.saola-withdrawal__balance article,
.saola-tier-list > div {
	position: relative;
	display: flex;
	min-height: 0;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}

.saola-kpi > span,
.saola-ops-metrics span,
.saola-metric span,
.saola-management__metric span,
.saola-withdrawal__balance span,
.saola-tier-list span {
	display: block;
	min-height: 0;
	margin: 0;
	color: var(--saola-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1.4;
	text-transform: uppercase;
}

.saola-kpi > strong,
.saola-ops-metrics strong,
.saola-metric strong,
.saola-management__metric strong,
.saola-withdrawal__balance strong,
.saola-tier-list strong {
	display: block;
	position: static;
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--saola-ink);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.saola-ops-metrics small,
.saola-management__metric small,
.saola-withdrawal__balance small,
.saola-ops-metrics em {
	display: block;
	position: static;
	max-width: none;
	margin: 0;
	color: var(--saola-muted);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* Giá của WooCommerce nằm trong <strong>, phải thừa kế chứ không tự tạo cỡ chữ riêng. */
.saola-metric strong .woocommerce-Price-amount,
.saola-metric strong .woocommerce-Price-currencySymbol,
.saola-management__metric strong .woocommerce-Price-amount,
.saola-management__metric strong .woocommerce-Price-currencySymbol,
.saola-withdrawal__balance strong .woocommerce-Price-amount,
.saola-withdrawal__balance strong .woocommerce-Price-currencySymbol {
	display: inline;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/* Ô dẫn: chỉ một ô được tô đậm trên mỗi màn hình, đó là con số quan trọng nhất. */
.saola-kpi--wide,
.saola-ops-metrics article:first-child,
.saola-metric--primary,
.saola-management__metric--lead,
.saola-withdrawal__balance article:first-child {
	grid-column: auto;
	grid-row: auto;
	border-color: var(--saola-blue);
	background: var(--saola-blue);
}
.saola-kpi--wide span,
.saola-kpi--wide strong,
.saola-kpi--wide small,
.saola-ops-metrics article:first-child span,
.saola-ops-metrics article:first-child strong,
.saola-ops-metrics article:first-child small,
.saola-ops-metrics article:first-child em,
.saola-metric--primary span,
.saola-metric--primary strong,
.saola-metric--primary .woocommerce-Price-amount,
.saola-management__metric--lead span,
.saola-management__metric--lead strong,
.saola-management__metric--lead small,
.saola-management__metric--lead .woocommerce-Price-amount,
.saola-withdrawal__balance article:first-child span,
.saola-withdrawal__balance article:first-child strong,
.saola-withdrawal__balance article:first-child small { color: #fff; opacity: 1; }
.saola-kpi--wide span,
.saola-ops-metrics article:first-child span,
.saola-metric--primary span,
.saola-management__metric--lead span,
.saola-withdrawal__balance article:first-child span { color: rgba(255, 255, 255, .82); }

.saola-kpi--attention { border-color: var(--saola-warn); background: var(--saola-warn-tint); }
.saola-kpi--attention strong { color: var(--saola-warn); }

.saola-withdrawal__note { margin: 10px 0 0; color: var(--saola-muted); font-size: 13px; }

/* ------------------------------------------------------------------ khung */

.saola-panel,
.saola-ops-panel,
.saola-section,
.saola-management__section,
.saola-referral,
.saola-registration {
	margin: 18px 0;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}

.saola-panel,
.saola-section,
.saola-registration { padding: 20px 22px; }
.saola-section--form { padding-bottom: 20px; }

.saola-panel__heading,
.saola-ops-panel__head,
.saola-section__heading,
.saola-management__section-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0 0 16px;
}
.saola-ops-panel__head { min-height: 0; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--saola-line); }
.saola-ops-panel__head span { display: block; color: var(--saola-muted); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.saola-ops-panel__head h2 { margin: 3px 0 0; font-size: 18px; letter-spacing: -.01em; }
.saola-panel__heading p,
.saola-section__heading > p,
.saola-management__section-heading > p { margin: 4px 0 0; color: var(--saola-muted); font-size: 13px; }
.saola-section__heading h3,
.saola-management__section-heading h3 { font-size: 17px; letter-spacing: -.005em; }

.saola-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

.saola-panel--notice { border-left: 4px solid var(--saola-blue); }

.saola-ops-notice,
.saola-ops-readonly-note,
.saola-ops-caveat {
	margin: 14px 0;
	padding: 12px 16px;
	border: 1px solid var(--saola-line);
	border-left: 4px solid var(--saola-blue);
	border-radius: var(--saola-radius);
	background: var(--saola-blue-tint);
	color: var(--saola-ink);
	font-size: 13.5px;
	font-weight: 500;
}
.saola-ops-notice--error { border-color: var(--saola-stop); border-left-color: var(--saola-stop); background: var(--saola-stop-tint); }
.saola-ops-caveat { margin: 0; border: 0; border-top: 1px solid var(--saola-line); border-radius: 0; background: var(--saola-surface); color: var(--saola-muted); font-weight: 400; }

/* Khối "vì sao đang khóa": đây là thông tin kiểm soát, không phải poster. */
.saola-ops-blocker {
	display: grid;
	grid-template-columns: 52px 1fr;
	margin: 16px 0;
	border: 1px solid var(--saola-warn);
	border-radius: var(--saola-radius);
	background: var(--saola-warn-tint);
	overflow: hidden;
}
.saola-ops-blocker__mark {
	display: grid;
	place-items: center;
	min-height: 0;
	border-right: 1px solid var(--saola-warn);
	color: var(--saola-warn);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}
.saola-ops-blocker > div:last-child { padding: 16px 20px; }
.saola-ops-blocker h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.005em; }
.saola-ops-blocker p { margin: 0 0 6px; color: var(--saola-ink); }
.saola-ops-blocker ul { margin: 0; padding-left: 20px; }

/* ------------------------------------------------------------------- bảng */

.saola-table-wrap,
.saola-ops-table-wrap,
.saola-management__table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}
.saola-ops-panel .saola-ops-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

.saola-table,
.saola-ops-table,
.saola-management__table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	color: var(--saola-ink);
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.saola-table th,
.saola-ops-table th,
.saola-management__table th {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--saola-line);
	background: var(--saola-surface);
	color: var(--saola-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.saola-table td,
.saola-ops-table td,
.saola-management__table td {
	padding: 13px 14px;
	border: 0;
	border-bottom: 1px solid var(--saola-line);
	text-align: left;
	vertical-align: top;
}
.saola-table tr:last-child td,
.saola-ops-table tr:last-child td,
.saola-management__table tr:last-child td { border-bottom: 0; }
.saola-table tbody tr:hover,
.saola-ops-table tbody tr:hover,
.saola-management__table tbody tr:hover { background: var(--saola-surface); }

.saola-table td > strong,
.saola-table td > small,
.saola-ops-table td > strong,
.saola-ops-table td > small,
.saola-management__table strong,
.saola-management__table small { display: block; }
.saola-table td > small,
.saola-ops-table td > small,
.saola-management__table small { margin-top: 3px; color: var(--saola-muted); font-size: 12px; }
.saola-ops-table code { padding: 1px 5px; border-radius: 3px; background: var(--saola-surface); color: var(--saola-blue); font-size: 12px; }
.saola-table a { color: var(--saola-blue); }

.saola-empty,
.saola-ops-empty,
.saola-management__empty {
	margin: 0;
	padding: 28px !important;
	border-radius: var(--saola-radius);
	color: var(--saola-muted);
	text-align: center !important;
}
.saola-empty,
.saola-management__empty { border: 1px dashed var(--saola-line-strong); background: var(--saola-surface); }

.saola-statement-action td { padding-top: 8px; background: var(--saola-surface); }
.saola-statement-action p { margin: 0; font-size: 13px; }
.saola-statement-action summary { color: var(--saola-blue); font-weight: 600; cursor: pointer; }

/* --------------------------------------------------------------- trạng thái */

.saola-status,
.saola-ops-status {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 9px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--saola-surface);
	color: var(--saola-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}
.saola-status--active,
.saola-status--approved,
.saola-status--paid,
.saola-status--closed,
.saola-ops-status--active,
.saola-ops-status--approved,
.saola-ops-status--paid,
.saola-ops-status--closed { background: var(--saola-ok-tint); color: var(--saola-ok); }

.saola-status--pending,
.saola-status--open,
.saola-status--calculated,
.saola-status--locked,
.saola-ops-status--pending,
.saola-ops-status--open,
.saola-ops-status--calculated,
.saola-ops-status--locked { background: var(--saola-warn-tint); color: var(--saola-warn); }

.saola-status--suspended,
.saola-status--terminated,
.saola-status--rejected,
.saola-status--held,
.saola-ops-status--suspended,
.saola-ops-status--terminated,
.saola-ops-status--rejected,
.saola-ops-status--held { background: var(--saola-stop-tint); color: var(--saola-stop); }
.saola-status--terminated,
.saola-status--rejected { text-decoration: none; }

/* ------------------------------------------- đường ray 13 bước đối soát */

.saola-ops-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(118px, 1fr);
	overflow-x: auto;
	padding: 16px 18px;
	gap: 8px;
}
.saola-ops-rail article {
	position: relative;
	display: flex;
	min-height: 0;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
}
.saola-ops-rail b { display: block; color: var(--saola-line-strong); font-size: 20px; font-weight: 700; line-height: 1; }
.saola-ops-rail span { display: block; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.35; }
.saola-ops-rail small { position: static; margin-top: auto; color: var(--saola-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.saola-ops-rail .is-done { border-color: var(--saola-ok); background: var(--saola-ok-tint); }
.saola-ops-rail .is-done b,
.saola-ops-rail .is-done small { color: var(--saola-ok); }
.saola-ops-rail .is-current { border-color: var(--saola-blue); box-shadow: inset 0 -3px 0 var(--saola-blue); }
.saola-ops-rail .is-current b,
.saola-ops-rail .is-current small { color: var(--saola-blue); }
.saola-ops-rail .is-blocked { border-color: var(--saola-warn); background: var(--saola-warn-tint); background-image: none; }
.saola-ops-rail .is-blocked b,
.saola-ops-rail .is-blocked small { color: var(--saola-warn); }

/* ------------------------------------------------------- danh sách kỳ */

.saola-ops-period-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	padding: 16px 18px;
}
.saola-ops-period-list a {
	display: flex;
	min-height: 0;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	color: var(--saola-ink);
	text-decoration: none;
}
.saola-ops-period-list a:hover { border-color: var(--saola-blue); background: var(--saola-blue-tint); color: var(--saola-ink); }
.saola-ops-period-list a.is-active { border-color: var(--saola-blue); background: var(--saola-blue); color: #fff; }
.saola-ops-period-list a.is-active small,
.saola-ops-period-list a.is-active span { color: rgba(255, 255, 255, .85); }
.saola-ops-period-list strong,
.saola-ops-period-list span,
.saola-ops-period-list small { display: block; margin: 0; }
.saola-ops-period-list strong { font-size: 17px; font-weight: 600; }
.saola-ops-period-list span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--saola-muted); }
.saola-ops-period-list small { color: var(--saola-muted); font-size: 12px; }

/* --------------------------------------------------------- hồ sơ rủi ro */

.saola-ops-risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; padding: 16px 18px; }
.saola-ops-risk-card { border: 1px solid var(--saola-line); border-radius: var(--saola-radius); background: var(--saola-paper); overflow: hidden; }
.saola-ops-risk-card header {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 14px 16px;
	border-bottom: 1px solid var(--saola-line);
	background: var(--saola-surface);
}
.saola-ops-risk-card header > b {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--saola-stop-tint);
	color: var(--saola-stop);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
}
.saola-ops-risk-card header span { color: var(--saola-muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.saola-ops-risk-card h3 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.005em; }
.saola-ops-risk-card header em { color: var(--saola-muted); font-size: 12px; font-style: normal; font-weight: 600; }
.saola-ops-risk-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); margin: 0; }
.saola-ops-risk-card dl div { padding: 12px 16px; border-right: 1px solid var(--saola-line); }
.saola-ops-risk-card dl div:last-child { border-right: 0; }
.saola-ops-risk-card dt { color: var(--saola-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.saola-ops-risk-card dd { margin: 5px 0 0; font-size: 15px; font-weight: 600; }
.saola-ops-risk-card details { border-top: 1px solid var(--saola-line); }
.saola-ops-risk-card summary { padding: 11px 16px; color: var(--saola-blue); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.saola-ops-risk-card form { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: end; padding: 0 16px 16px; }
.saola-ops-risk-card label { display: flex; flex-direction: column; gap: 5px; color: var(--saola-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.saola-ops-risk-card textarea { min-height: 64px; }

/* ------------------------------------------------------- kênh phân phối */

.saola-channel-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.saola-channel-rail > div {
	position: relative;
	display: flex;
	min-height: 0;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}
.saola-channel-rail > div:nth-child(even) { background: var(--saola-paper); }
.saola-channel-rail > div::after { display: none; }
.saola-channel-rail span { display: block; color: var(--saola-muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.saola-channel-rail strong { display: block; max-width: none; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.saola-channel-rail b { position: static; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.saola-channel-rail small { position: static; margin-top: auto; color: var(--saola-muted); font-size: 12px; line-height: 1.45; }
.saola-channel-rail--detail > div { min-height: 0; }

/* --------------------------------------------------- danh sách chỉ số phụ */

.saola-breakdown { margin: 0; }
.saola-breakdown > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--saola-line);
}
.saola-breakdown > div:last-child { border-bottom: 0; }
.saola-breakdown dt, .saola-breakdown dd { margin: 0; }
.saola-breakdown dt { color: var(--saola-muted); font-size: 13px; }
.saola-breakdown dd { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

.saola-tier-list > div { min-width: 0; }

/* ------------------------------------ màn hình dùng bảng gốc của WordPress
 *
 * Trang chính sách và trang hồ sơ đăng ký dựng bằng markup quản trị chuẩn
 * (widefat, form-table, notice). Kéo chúng về cùng ngôn ngữ với các màn hình
 * còn lại thay vì viết lại markup.
 */

.saola-admin > h1:first-of-type,
.saola-admin > h1:first-of-type + .description,
.saola-admin > h1:first-of-type + p {
	max-width: 74ch;
}
.saola-admin > h1:first-of-type { margin-bottom: 6px; padding-top: 4px; }
.saola-admin > p.description,
.saola-admin > h1 + p { margin: 0 0 16px; color: var(--saola-muted); font-size: 14px; }

.saola-admin .widefat {
	border: 1px solid var(--saola-line);
	border-radius: var(--saola-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
	overflow: hidden;
}
.saola-admin .widefat th,
.saola-admin .widefat td { border-bottom: 1px solid var(--saola-line); }
.saola-admin .widefat thead th,
.saola-admin .widefat tfoot th {
	padding: 11px 14px;
	background: var(--saola-surface);
	color: var(--saola-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.saola-admin .widefat tbody td { padding: 13px 14px; vertical-align: top; }
.saola-admin .widefat tbody tr:last-child td { border-bottom: 0; }
.saola-admin .widefat.striped tbody tr:nth-child(odd),
.saola-admin .widefat tbody tr:nth-child(odd) { background: var(--saola-paper); }
.saola-admin .widefat tbody tr:hover { background: var(--saola-surface); }

.saola-admin .form-table th {
	padding: 16px 20px 16px 0;
	color: var(--saola-ink);
	font-size: 13px;
	font-weight: 600;
}
.saola-admin .form-table td { padding: 12px 0; }

.saola-admin .notice {
	margin: 14px 0;
	border: 1px solid var(--saola-line);
	border-left: 4px solid var(--saola-blue);
	border-radius: var(--saola-radius);
	background: var(--saola-paper);
	box-shadow: var(--saola-shadow);
}
.saola-admin .notice-warning { border-left-color: var(--saola-warn); background: var(--saola-warn-tint); }
.saola-admin .notice-error { border-left-color: var(--saola-stop); background: var(--saola-stop-tint); }
.saola-admin .notice-success { border-left-color: var(--saola-ok); background: var(--saola-ok-tint); }

/* Nút chuẩn của WordPress trên các màn hình này cũng theo cùng một kiểu. */
.saola-admin .button-primary {
	border-color: var(--saola-blue);
	border-radius: 4px;
	background: var(--saola-blue);
	box-shadow: none;
	color: #fff;
	text-shadow: none;
}
.saola-admin .button-primary:hover,
.saola-admin .button-primary:focus { border-color: var(--saola-blue-hover); background: var(--saola-blue-hover); color: #fff; }
.saola-admin .button:not(.button-primary) {
	border-color: var(--saola-line-strong);
	border-radius: 4px;
	background: var(--saola-paper);
	color: var(--saola-ink);
}

/* --------------------------------------------------------------- phân trang */

.saola-pagination { margin-top: 16px; text-align: right; }
.saola-pagination .page-numbers {
	display: inline-flex;
	min-width: 32px;
	min-height: 32px;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	padding: 0 8px;
	border: 1px solid var(--saola-line);
	border-radius: 4px;
	background: var(--saola-paper);
	color: var(--saola-ink);
	font-size: 13px;
	text-decoration: none;
}
.saola-pagination .page-numbers:hover { border-color: var(--saola-blue); color: var(--saola-blue); }
.saola-pagination .current { border-color: var(--saola-blue); background: var(--saola-blue); color: #fff; }

/* ------------------------------------------------------------ portal client */

.saola-client__masthead { margin-bottom: 18px; }
.saola-client p { color: var(--saola-muted); }

.saola-referral { display: grid; grid-template-columns: minmax(200px, .6fr) minmax(0, 1.4fr); padding: 0; }
.saola-referral > div { padding: 18px 20px; }
.saola-referral > div + div { border-left: 1px solid var(--saola-line); }
.saola-referral span,
.saola-referral label,
.saola-referral small { display: block; margin-bottom: 6px; color: var(--saola-muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.saola-referral strong {
	display: block;
	color: var(--saola-blue);
	font-size: 26px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
	line-height: 1.2;
	white-space: nowrap;
}
.saola-referral__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.saola-referral__link label { grid-column: 1 / -1; margin: 0; }

.saola-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 14px 0 6px; }
.saola-inline-form textarea { margin-top: 4px; }

.saola-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.saola-form-grid label input { margin-top: 4px; }
.saola-checkbox { display: flex; align-items: flex-start; gap: 10px; padding-top: 22px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--saola-ink); }
.saola-checkbox input { width: auto; min-height: 0; margin-top: 3px; }
.saola-form-grid__actions { grid-column: 1 / -1; padding-top: 4px; }

.saola-registration { margin: 20px 0; }
.saola-registration__note { margin: 10px 0 0; color: var(--saola-muted); font-size: 13px; }
.saola-registration [hidden] { display: none !important; }

.saola-management__section { padding: 20px 22px; }

/* --------------------------------------------------------------- thu hẹp */

@media (max-width: 782px) {
	.saola-admin,
	.saola-ops { padding-right: 10px; }
	.saola-admin__hero,
	.saola-ops__masthead,
	.saola-client__masthead,
	.saola-management__masthead { align-items: flex-start; flex-direction: column; padding: 18px; }
	.saola-ops__nav { overflow-x: auto; flex-wrap: nowrap; }
	.saola-ops__nav a { flex: 0 0 auto; }
	.saola-ops__readonly { display: none; }
	.saola-filters,
	.saola-ops-command,
	.saola-ops-inline-form { align-items: stretch; flex-direction: column; }
	.saola-filters label,
	.saola-ops-command > div { min-width: 0; width: 100%; }
	.saola-referral,
	.saola-referral__link,
	.saola-inline-form,
	.saola-ops-risk-card form { grid-template-columns: 1fr; }
	.saola-referral > div + div { border-top: 1px solid var(--saola-line); border-left: 0; }
	.saola-ops-blocker { grid-template-columns: 1fr; }
	.saola-ops-blocker__mark { min-height: 40px; border-right: 0; border-bottom: 1px solid var(--saola-warn); }
}

@media (prefers-reduced-motion: reduce) {
	.saola-admin *,
	.saola-ops *,
	.saola-client *,
	.saola-management * { transition: none !important; animation: none !important; }
}