/**
 * DI/CSV offer + self-assessment tool (việc 5).
 *
 * Palette light cố định vì global shell là dark (critical CSS
 * pdpn_print_critical_shell_styles). Override nền/chữ body chỉ scoped vào
 * body-class do WP sinh cho 2 page-template này.
 */

body.page-template-page-dich-vu-di-csv,
body.page-template-page-cong-cu-di-csv {
	background-color: #FFFFFF;
	color: #0F172A;
	color-scheme: light;
}

/* html vẫn mang nền tối #0A0F1C của critical shell → phải phủ trắng cho
 * 2 template này, cả trên màn hình (trang ngắn lộ dải tối dưới footer)
 * lẫn khi in có background graphics. html.di-csv-html là fallback do
 * js/di-csv*.js set cho browser thiếu :has() (Firefox < 121).
 */
html.di-csv-html,
html:has(> body.page-template-page-dich-vu-di-csv),
html:has(> body.page-template-page-cong-cu-di-csv) {
	background: #FFFFFF;
}

.di-csv {
	--bg: #FFFFFF;
	--panel: #F8FAFC;
	--ink: #0F172A;
	--muted: #475569;
	--line: #E2E8F0;
	--line-strong: #94A3B8;
	--line-input: #64748B;
	--teal: #0F766E;
	--teal-dark: #115E59;
	--cyan: #0891B2;
	--amber: #F59E0B;
	--grad-a: #0C4A6E;
	--grad-b: #0E7490;
	--r-bg: #FEF2F2;
	--r-ink: #991B1B;
	--a-bg: #FFFBEB;
	--a-ink: #92400E;
	--g-bg: #ECFDF5;
	--g-ink: #065F46;
	background: var(--bg);
	color: var(--ink);
	color-scheme: light;
	font-size: 16px;
	line-height: 1.6;
}

.di-csv * { box-sizing: border-box; }
.di-csv a { color: var(--teal); text-underline-offset: 2px; }
.di-csv a:hover { color: var(--teal-dark); }
.di-csv a:focus-visible,
.di-csv button:focus-visible,
.di-csv input:focus-visible,
.di-csv textarea:focus-visible,
.di-csv summary:focus-visible,
.di-csv input:focus-visible + span {
	outline: 3px solid var(--amber);
	outline-offset: 2px;
}

/* ---- offer page ---------------------------------------------------------- */

.di-csv-offer .di-csv-hero {
	background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
	color: #FFFFFF;
	padding: 48px 24px 40px;
	margin: 0 -16px 32px;
	padding-left: max(24px, calc(50% - 460px));
	padding-right: max(24px, calc(50% - 460px));
}

.di-csv-offer .eyebrow {
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 4px 14px;
	margin-bottom: 18px;
}

.di-csv-offer .di-csv-hero h1,
.di-csv-offer .di-csv-hero h2,
.di-csv-offer .di-csv-hero h3 {
	color: #FFFFFF;
}

.di-csv-offer .di-csv-hero a { color: #FFFFFF; }
.di-csv-offer .di-csv-hero a:hover { color: #E0F2F1; }

.di-csv-offer .di-csv-hero h1 {
	font-size: 2rem;
	line-height: 1.3;
	margin: 0 0 16px;
	max-width: 24ch;
}

.di-csv-offer .lede {
	font-size: 1.05rem;
	color: #E0F2F1;
	max-width: 62ch;
	margin: 0 0 28px;
}

.di-csv-offer .lede strong { color: #FFFFFF; }

.di-csv-offer .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.di-csv .btn {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	padding: 12px 22px;
	cursor: pointer;
	border: 1px solid transparent;
}

.di-csv .btn.primary { background: var(--amber); color: #1E293B; border-color: #D97706; }
.di-csv .btn.primary:hover { background: #FBBF24; color: #1E293B; }
.di-csv .btn.ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.di-csv .btn.ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.di-csv .btn.teal { background: var(--teal); color: #FFFFFF; border-color: var(--teal-dark); }
.di-csv .btn.teal:hover { background: var(--teal-dark); color: #FFFFFF; }

.di-csv-offer .di-csv-section {
	padding: 36px 0;
	border-bottom: 1px solid var(--line);
	max-width: 920px;
	margin: 0 auto;
}

.di-csv-offer .di-csv-section:last-of-type { border-bottom: 0; }

.di-csv h2 { font-size: 1.5rem; margin: 0 0 18px; color: var(--ink); }
.di-csv h3 { font-size: 1.1rem; margin: 24px 0 10px; color: var(--ink); }

.di-csv ul.clean { padding-left: 22px; }
.di-csv ul.clean li { margin-bottom: 10px; }

.di-csv .cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
}

.di-csv .card {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 18px;
	background: var(--panel);
}

.di-csv .card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--teal-dark); }
.di-csv .card p { margin: 0; font-size: .95rem; }

.di-csv .tblwrap { overflow-x: auto; }
.di-csv table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.di-csv th,
.di-csv td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.di-csv th { background: var(--panel); color: var(--teal-dark); }

.di-csv .note {
	border-left: 4px solid var(--cyan);
	background: var(--panel);
	border-radius: 0 8px 8px 0;
	padding: 14px 18px;
	margin: 20px 0;
}

.di-csv .note.amber { border-left-color: var(--amber); }

.di-csv .steps { counter-reset: di-step; list-style: none; padding: 0; }
.di-csv .steps li {
	position: relative;
	padding: 12px 0 12px 52px;
	border-bottom: 1px dashed var(--line);
}
.di-csv .steps li:last-child { border-bottom: 0; }
.di-csv .steps li::before {
	counter-increment: di-step;
	content: counter(di-step);
	position: absolute;
	left: 0;
	top: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--teal);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.di-csv .person { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.di-csv .person .meta { flex: 1; min-width: 260px; }
.di-csv .project-line {
	border-left: 4px solid var(--teal);
	background: var(--panel);
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	font-size: .95rem;
}

.di-csv details.faq {
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	padding: 0;
	margin: 10px 0;
	background: var(--panel);
}
.di-csv details.faq summary { cursor: pointer; font-weight: 600; padding: 14px 18px; color: var(--ink); }
.di-csv details.faq .a { padding: 0 18px 14px; }

.di-csv form.lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	max-width: 680px;
}
.di-csv form.lead .full { grid-column: 1 / -1; }
.di-csv form.lead label { font-size: .9rem; font-weight: 600; display: block; margin-bottom: 4px; }
.di-csv form.lead input,
.di-csv form.lead textarea {
	width: 100%;
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--line-input);
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--ink);
}
.di-csv form.lead .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; }
.di-csv form.lead .consent input { width: auto; margin-top: 4px; }
.di-csv .mail-alt { margin-top: 18px; }
.di-csv .di-csv-disclaimer { color: var(--muted); font-size: .92rem; padding: 8px 0 24px; max-width: 920px; margin: 0 auto; }

/* ---- tool page ----------------------------------------------------------- */

.di-csv-tool .di-csv-wrap { max-width: 880px; margin: 0 auto; padding: 8px 0 48px; }
.di-csv-tool .di-csv-head h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 8px; }
.di-csv-tool .di-csv-head p { margin: 0 0 6px; color: var(--muted); }

.di-csv .bar {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 16px 0;
}

.di-csv .bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.di-csv-tool button,
.di-csv-tool .btn {
	font: inherit;
	border: 1px solid var(--teal);
	background: var(--bg);
	color: var(--teal);
	padding: 8px 14px;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	font-weight: 500;
}

.di-csv-tool button.primary,
.di-csv-tool .btn.primary { background: var(--teal); color: #FFFFFF; }
.di-csv-tool button.primary:hover,
.di-csv-tool .btn.primary:hover { background: var(--teal-dark); color: #FFFFFF; }

.di-csv-tool .progress {
	position: sticky;
	top: 0;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding: 10px 0;
	z-index: 2;
}
.di-csv-tool .progress .track { height: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.di-csv-tool .progress .fill { height: 100%; background: var(--teal); width: 0; }
.di-csv-tool .progress small { color: var(--muted); }

.di-csv-tool section.group { margin: 28px 0; }
.di-csv-tool section.group h2 { font-size: 1.2rem; margin: 0 0 4px; }

.di-csv-tool fieldset {
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 12px 0;
}
.di-csv-tool legend { float: left; width: 100%; font-weight: 600; padding: 0; margin: 0 0 6px; }
.di-csv-tool legend + * { clear: both; }

.di-csv-tool .opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 6px; cursor: pointer; }
.di-csv-tool .opt:hover { background: var(--panel); }
.di-csv-tool .opt input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

.di-csv-tool details { margin-top: 8px; font-size: .92rem; }
.di-csv-tool summary { cursor: pointer; color: var(--teal); }
.di-csv-tool blockquote {
	margin: 8px 0;
	padding: 8px 12px;
	border-left: 3px solid var(--line);
	background: var(--panel);
	font-style: italic;
}

.di-csv .muted { color: var(--muted); }

.di-csv-tool #di-result { display: none; margin-top: 32px; }
.di-csv-tool .heat { display: grid; gap: 8px; }
.di-csv-tool .heat .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px 150px;
	gap: 8px;
	align-items: center;
	padding: 10px 12px;
	border-radius: 6px;
}
.di-csv-tool .r { background: var(--r-bg); color: var(--r-ink); }
.di-csv-tool .a { background: var(--a-bg); color: var(--a-ink); }
.di-csv-tool .g { background: var(--g-bg); color: var(--g-ink); }
.di-csv-tool .pill { font-size: .85rem; font-weight: 600; text-align: right; }

.di-csv-tool .gap { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.di-csv-tool .gap h4 { margin: 0 0 6px; font-size: 1rem; }

.di-csv-tool .leadbox {
	border: 1px solid var(--teal);
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 18px;
	background: var(--panel);
}
.di-csv-tool .leadbox form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.di-csv-tool .leadbox .full { grid-column: 1 / -1; }
.di-csv-tool .leadbox label { font-size: .85rem; font-weight: 600; display: block; margin-bottom: 3px; }
.di-csv-tool .leadbox input,
.di-csv-tool .leadbox textarea {
	width: 100%;
	font: inherit;
	padding: 8px 10px;
	border: 1px solid var(--line-input);
	border-radius: 6px;
	background: #FFFFFF;
	color: var(--ink);
}
.di-csv-tool .leadbox .consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .85rem; }
.di-csv-tool .leadbox .consent input { width: auto; margin-top: 4px; }

.di-csv .status { margin-top: 10px; font-weight: 600; font-size: .95rem; }
.di-csv .status.err { color: #B91C1C; }
.di-csv .status.ok { color: #047857; }
.di-csv .dl-link { display: inline-block; margin-top: 8px; }

.di-csv-tool .di-csv-foot {
	margin-top: 48px;
	border-top: 1px solid var(--line);
	padding-top: 16px;
	font-size: .92rem;
	color: var(--muted);
}
.di-csv-tool .di-csv-foot strong { color: var(--ink); }

/* ---- workshop print sheet (A4 ×2) ---------------------------------------- */

#di-print-sheet { display: none; }

.di-psheet { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #0F172A; background: #FFFFFF; }
.di-psheet .psheet-page { page-break-after: always; }
.di-psheet .psheet-page:last-child { page-break-after: auto; }
.di-psheet h1 { font-size: 15pt; margin: 0 0 4pt; }
.di-psheet .meta { font-size: 8.5pt; color: #333; margin: 0 0 2pt; }
.di-psheet .org { font-size: 8.5pt; color: #333; margin: 0 0 10pt; }
.di-psheet .head-row { display: flex; justify-content: space-between; gap: 12pt; align-items: flex-start; }
.di-psheet .qr { width: 72pt; flex: none; text-align: center; }
.di-psheet .qr img { width: 72pt; height: 72pt; }
.di-psheet .qr p { font-size: 6.8pt; margin: 2pt 0 0; word-break: break-all; }
.di-psheet h2 { font-size: 10.5pt; margin: 8pt 0 4pt; border-bottom: 1px solid #94A3B8; padding-bottom: 2pt; }
.di-psheet .q { margin: 0 0 8pt; page-break-inside: avoid; }
.di-psheet .q .qt { font-size: 9.5pt; font-weight: 600; margin: 0 0 3pt; }
.di-psheet .q .clause { font-size: 7.5pt; color: #444; font-style: italic; margin: 0 0 4pt; }
.di-psheet .ans { display: flex; gap: 8pt; }
.di-psheet .ans .box {
	flex: 1;
	border: 1px solid #64748B;
	border-radius: 3pt;
	padding: 5pt 6pt;
	font-size: 7.5pt;
	min-height: 34pt;
}
.di-psheet .ans .box::before { content: "☐ "; font-size: 9pt; }
.di-psheet .road { font-size: 8.5pt; margin: 6pt 0; }
.di-psheet .road li { margin-bottom: 3pt; }
.di-psheet .foot { font-size: 7.5pt; color: #444; border-top: 1px solid #94A3B8; margin-top: 8pt; padding-top: 4pt; }

/* ---- responsive + print --------------------------------------------------- */

@media (max-width: 640px) {
	.di-csv form.lead { grid-template-columns: 1fr; }
	.di-csv-offer .di-csv-hero h1 { font-size: 1.55rem; }
	.di-csv-tool .heat .row { grid-template-columns: 1fr 64px; }
	.di-csv-tool .heat .row .pill { grid-column: 1 / -1; text-align: left; }
	.di-csv-tool .leadbox form { grid-template-columns: 1fr; }
}

@media print {
	@page { size: A4; margin: 12mm; }
	html.di-csv-html,
	html:has(body.page-template-page-dich-vu-di-csv),
	html:has(body.page-template-page-cong-cu-di-csv),
	body.page-template-page-dich-vu-di-csv,
	body.page-template-page-cong-cu-di-csv {
		background: #FFFFFF !important;
		color: #0F172A;
	}
	.di-csv-tool .progress,
	.di-csv-tool .bar,
	.di-csv-tool #di-form,
	.di-csv-tool button,
	.di-csv-tool .leadbox { display: none !important; }
	.di-csv-tool #di-result { display: block !important; }
	.di-csv-tool a { color: var(--ink); }

	body.di-printing-sheet .site-header,
	body.di-printing-sheet .site-footer,
	body.di-printing-sheet .site-search,
	body.di-printing-sheet .breadcrumb,
	body.di-printing-sheet .skip-link,
	body.di-printing-sheet .di-csv-wrap { display: none !important; }
	body.di-printing-sheet #di-print-sheet { display: block !important; }
}