/*
 * Thông báo lựa chọn quyền riêng tư.
 *
 * Mọi màu đều lấy từ bộ token của theme hitechcloud-news-2026
 * (css/hitechcloud-design-system.css) qua var() kèm giá trị dự phòng: theme chỉ
 * nạp bộ token đó trên các trang có pagekit, mà banner thì xuất hiện ở mọi
 * trang, nên nếu không có dự phòng thì trang không nạp design system sẽ hiện
 * banner không màu.
 */

/*
 * Thuộc tính hidden phải thắng position:fixed bên dưới.
 *
 * Trình duyệt đặt [hidden]{display:none} trong user-agent stylesheet, mà quy
 * tắc của tác giả luôn thắng user-agent stylesheet — nếu không có dòng này thì
 * banner đang mang thuộc tính hidden vẫn hiện ra trên mọi trang.
 */
.hpm-consent-banner[hidden],
.hpm-consent-overlay[hidden],
.hpm-consent-fab[hidden] {
	display: none !important;
}

.hpm-consent-root {
	--hpm-consent-blue: var(--hc-blue, #0969ff);
	--hpm-consent-navy: var(--hc-navy, #071832);
	--hpm-consent-text: var(--hc-text, #22304a);
	/*
	 * Cố tình KHÔNG dùng --hc-muted của theme ở đây. #667895 trên nền trắng chỉ
	 * đạt tỉ lệ tương phản 4.42:1, dưới ngưỡng 4.5:1 của WCAG AA cho chữ cỡ
	 * thường — mà phần lớn chữ trong bảng tuỳ chỉnh (mô tả từng nhóm cookie)
	 * chính là chữ cỡ thường mang thông tin pháp lý. #5b6b84 giữ đúng sắc xanh
	 * xám của theme nhưng đạt 5.4:1.
	 */
	--hpm-consent-muted: #5b6b84;
	--hpm-consent-border: var(--hc-border, #d9e7f5);
	--hpm-consent-surface: var(--hc-white, #ffffff);
	--hpm-consent-soft: var(--hc-bg, #f5f9ff);
	--hpm-consent-radius: 16px;
	/* --hc-font-sans nay là ngăn xếp phông gốc duy nhất của site, khai báo trong
	   theme tại css/beau-sans-pro-fonts.css — tệp nạp sớm nhất trên mọi trang.
	   Ghi chú cũ ở đây nói biến này không tồn tại; điều đó không còn đúng. */
	--hpm-consent-font: var(--hc-font-sans);

	/*
	 * Widget live chat của hitechcloud-livechat cắm ở z-index 2147483000, góc
	 * dưới bên phải. Banner là một cửa chặn pháp lý nên phải nằm TRÊN nó, còn
	 * nút mở lại thì nằm DƯỚI nó và dạt sang góc trái để hai nút không chồng
	 * lên nhau trên màn hình điện thoại.
	 */
	--hpm-consent-z-fab: 2147482000;
	--hpm-consent-z-banner: 2147483001;
	--hpm-consent-z-panel: 2147483002;
}

/* ==========================================================================
   Banner
   ========================================================================== */

.hpm-consent-banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--hpm-consent-z-banner);
	max-height: 85vh;
	overflow-y: auto;
	background: var(--hpm-consent-surface);
	border-top: 1px solid var(--hpm-consent-border);
	box-shadow: var(--hc-shadow-hover, 0 -18px 60px rgba(8, 47, 134, 0.18));
	color: var(--hpm-consent-text);
	font-family: var(--hpm-consent-font);
	font-size: 14px;
	line-height: 1.6;

	/*
	 * Chỉ animate transform: animate chiều cao hoặc chèn banner vào luồng tài
	 * liệu sẽ đẩy nội dung của website xuống và tạo layout shift.
	 */
	animation: hpm-consent-rise 0.28s ease-out both;
}

@keyframes hpm-consent-rise {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hpm-consent-banner { animation: none; }
}

.hpm-consent-banner__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.hpm-consent-banner__text {
	flex: 1 1 460px;
	min-width: 0;
}

.hpm-consent-banner__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--hpm-consent-navy);
}

.hpm-consent-banner__text p {
	margin: 0 0 8px;
}

.hpm-consent-banner__links {
	margin-top: 10px;
	color: var(--hpm-consent-muted);
}

.hpm-consent-banner__links-label {
	margin-right: 4px;
}

.hpm-consent-root a {
	color: var(--hpm-consent-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hpm-consent-root a:hover {
	color: var(--hc-blue-dark, #082f86);
}

.hpm-consent-sep {
	margin: 0 6px;
	color: var(--hpm-consent-muted);
}

.hpm-consent-banner__actions {
	flex: 0 1 300px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: center;
}

/* ==========================================================================
   Nút
   ========================================================================== */

.hpm-consent-btn {
	display: inline-block;
	width: 100%;
	padding: 11px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/*
 * Nút đồng ý và nút từ chối phải cùng cỡ chữ, cùng chiều cao và cùng độ nổi.
 * Nghị định 356/2025/NĐ-CP đòi việc từ chối phải dễ như việc đồng ý; làm nút
 * từ chối nhạt hơn hoặc nhỏ hơn là một hình thức thúc ép lựa chọn.
 */
.hpm-consent-btn--primary {
	background: var(--hpm-consent-blue);
	border-color: var(--hpm-consent-blue);
	color: #ffffff;
}

.hpm-consent-btn--primary:hover {
	background: var(--hc-blue-dark, #082f86);
	border-color: var(--hc-blue-dark, #082f86);
}

.hpm-consent-btn--secondary {
	background: var(--hpm-consent-surface);
	border-color: var(--hpm-consent-blue);
	/* #0b398c trên nền trắng cho tỉ lệ tương phản 8.6:1, vượt ngưỡng AA. */
	color: var(--hc-blue-dark, #082f86);
}

.hpm-consent-btn--secondary:hover {
	background: var(--hpm-consent-soft);
}

.hpm-consent-btn--ghost {
	background: transparent;
	border-color: var(--hpm-consent-border);
	color: var(--hpm-consent-text);
}

.hpm-consent-btn--ghost:hover {
	background: var(--hpm-consent-soft);
	border-color: var(--hpm-consent-muted);
}

/*
 * Vòng focus vẽ bằng outline chứ không bằng box-shadow: outline không bị cắt
 * bởi overflow của thanh banner khi nội dung phải cuộn.
 */
.hpm-consent-root :focus-visible {
	outline: 3px solid var(--hpm-consent-blue);
	outline-offset: 2px;
}

/* ==========================================================================
   Bảng tuỳ chỉnh
   ========================================================================== */

.hpm-consent-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--hpm-consent-z-panel);
	background: rgba(4, 16, 32, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: var(--hpm-consent-font);
}

.hpm-consent-panel {
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--hpm-consent-surface);
	color: var(--hpm-consent-text);
	border-radius: var(--hpm-consent-radius);
	box-shadow: var(--hc-shadow-glass, 0 28px 80px rgba(0, 0, 0, 0.25));
	padding: 24px;
	font-size: 14px;
	line-height: 1.6;
}

.hpm-consent-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.hpm-consent-panel__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--hpm-consent-navy);
}

.hpm-consent-close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 1px solid var(--hpm-consent-border);
	border-radius: 50%;
	background: var(--hpm-consent-surface);
	color: var(--hpm-consent-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.hpm-consent-close:hover {
	background: var(--hpm-consent-soft);
}

.hpm-consent-panel__intro {
	margin: 10px 0 18px;
	color: var(--hpm-consent-muted);
}

.hpm-consent-group {
	border: 0;
	margin: 0;
	padding: 0;
}

.hpm-consent-group__legend {
	/*
	 * Legend cần cho trình đọc màn hình để ba mục dưới đây được đọc như một
	 * nhóm, nhưng trên màn hình nó lặp lại đúng ý của tiêu đề bảng nên được ẩn
	 * bằng kỹ thuật chỉ-đọc-màn-hình thay vì display:none (display:none sẽ gỡ
	 * nó khỏi cây trợ năng luôn).
	 */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hpm-consent-item {
	border: 1px solid var(--hpm-consent-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: var(--hpm-consent-surface);
}

.hpm-consent-item--locked {
	background: var(--hpm-consent-soft);
}

.hpm-consent-item__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hpm-consent-item__name {
	font-weight: 600;
	color: var(--hpm-consent-navy);
	cursor: pointer;
}

.hpm-consent-item--locked .hpm-consent-item__name {
	cursor: default;
}

.hpm-consent-item__desc {
	margin: 6px 0 0;
	color: var(--hpm-consent-muted);
}

.hpm-consent-badge {
	flex: 0 0 auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--hpm-consent-border);
	/* Nền #d9e7f5 với chữ #071832 cho tỉ lệ tương phản 14:1. */
	color: var(--hpm-consent-navy);
	font-size: 12px;
	font-weight: 600;
}

/*
 * Công tắc là một <input type="checkbox"> thật, chỉ được vẽ lại.
 *
 * Ô đánh dấu vẫn nằm trong DOM, vẫn nhận được focus bằng bàn phím, vẫn bật/tắt
 * bằng phím cách và vẫn được trình đọc màn hình công bố đúng trạng thái. Dùng
 * opacity:0 chứ không dùng display:none vì display:none sẽ loại nó khỏi thứ tự
 * tab.
 */
.hpm-consent-switch {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 48px;
	height: 28px;
}

.hpm-consent-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.hpm-consent-switch__track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	/* #6b7b96 đạt 4.3:1 với nền trắng của thẻ; WCAG AA đòi tối thiểu 3:1 cho
	   ranh giới của một thành phần điều khiển. */
	background: #6b7b96;
	transition: background-color 0.15s ease;
	pointer-events: none;
}

.hpm-consent-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	transition: transform 0.15s ease;
}

.hpm-consent-switch input:checked + .hpm-consent-switch__track {
	background: var(--hpm-consent-blue);
}

.hpm-consent-switch input:checked + .hpm-consent-switch__track::after {
	transform: translateX(20px);
}

.hpm-consent-switch input:focus-visible + .hpm-consent-switch__track {
	outline: 3px solid var(--hpm-consent-blue);
	outline-offset: 2px;
}

.hpm-consent-note {
	margin: 16px 0 0;
	color: var(--hpm-consent-muted);
	font-size: 13px;
}

.hpm-consent-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.hpm-consent-panel__actions .hpm-consent-btn {
	width: auto;
	flex: 1 1 160px;
}

.hpm-consent-panel__links {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--hpm-consent-border);
	color: var(--hpm-consent-muted);
	font-size: 13px;
}

/* ==========================================================================
   Nút mở lại (luôn có mặt sau khi đã chọn)
   ========================================================================== */

.hpm-consent-fab {
	position: fixed;
	left: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: var(--hpm-consent-z-fab);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--hpm-consent-border);
	border-radius: 999px;
	background: var(--hpm-consent-surface);
	color: var(--hpm-consent-navy);
	box-shadow: var(--hc-shadow-card, 0 18px 50px rgba(8, 47, 134, 0.14));
	font-family: var(--hpm-consent-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.hpm-consent-fab:hover {
	background: var(--hpm-consent-soft);
}

.hpm-consent-fab__icon {
	display: inline-flex;
	color: var(--hpm-consent-blue);
}

/* ==========================================================================
   Điện thoại
   ========================================================================== */

@media (max-width: 782px) {
	.hpm-consent-banner {
		font-size: 13.5px;
		max-height: 78vh;
	}

	.hpm-consent-banner__inner {
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		gap: 14px;
	}

	.hpm-consent-banner__title {
		font-size: 16px;
	}

	/* Trên màn hình hẹp ba nút xếp dọc và chiếm trọn chiều ngang: cùng cỡ, không
	   nút nào bị đẩy xuống dưới nếp gấp so với nút còn lại. */
	.hpm-consent-banner__actions {
		flex: 1 1 100%;
	}

	.hpm-consent-panel {
		padding: 18px;
		max-height: calc(100dvh - 32px);
	}

	.hpm-consent-panel__actions .hpm-consent-btn {
		flex: 1 1 100%;
	}

	/* Nút mở lại thu về chỉ còn biểu tượng để không che nội dung; tên vẫn còn
	   trong aria-label nên trình đọc màn hình không mất thông tin. */
	.hpm-consent-fab__label {
		display: none;
	}

	.hpm-consent-fab {
		padding: 10px;
		left: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
}

/*
 * Khi bảng tuỳ chỉnh đang mở, khoá cuộn của trang nền bằng overflow chứ không
 * bằng position:fixed trên body: position:fixed làm trang nền nhảy về đầu và
 * khách mất chỗ đang đọc khi đóng bảng.
 */
html.hpm-consent-locked,
html.hpm-consent-locked body {
	overflow: hidden;
}

/*
 * Không có ngữ cảnh nào trên website này chạy giao diện tối — theme
 * hitechcloud-news-2026 không khai báo prefers-color-scheme ở bất kỳ đâu — nên
 * mọi màu ở trên đều được viết tường minh thay vì để thừa hưởng. Nếu sau này
 * theme có bản tối thì chỉ cần ghi đè khối biến trong .hpm-consent-root.
 */