/* =============================================================
 * Trang Tài liệu kỹ thuật — chỉ áp trong .gtl, không ảnh hưởng trang khác.
 * Bố cục đổi theo BỀ RỘNG KHUNG (container query), không theo cửa sổ,
 * nên đặt trong cột hẹp hay rộng đều thẳng hàng.
 * ========================================================== */

.gtl {
	--gtl-chinh: #0b63d8;
	--gtl-chinh-dam: #0850b4;
	--gtl-chinh-nhat: #e9f1fd;
	--gtl-dau-1: #081a3a;
	--gtl-dau-2: #0d3170;
	--gtl-chu: #13213c;
	--gtl-chu-2: #4a5870;
	--gtl-chu-3: #5f6d82; /* ≥4.5:1 trên nền #f3f6fa (chữ 12px) */
	--gtl-vien: #d9e1ec;
	--gtl-vien-nhat: #e8edf4;
	--gtl-nen: #f3f6fa;
	--gtl-nen-2: #f8fafd;
	--gtl-trang: #fff;
	--gtl-do: #d92d20;
	--gtl-bo-nho: 8px;
	--gtl-bo-lon: 12px;
	--gtl-cao-o: 52px;
	--gtl-cao-nut: 40px;
	--gtl-rong: 1310px;
	--gtl-le: 15px;

	container: gtl / inline-size;
	color: var(--gtl-chu);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

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

/* Trung hoà style chung của giao diện (Flatsome) bên trong khối tài liệu. */
.gtl h1,
.gtl h2,
.gtl p,
.gtl ul,
.gtl ol,
.gtl li,
.gtl table,
.gtl th,
.gtl td,
.gtl form,
.gtl label,
.gtl caption {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	line-height: inherit;
	background: none;
}

.gtl ul,
.gtl ol {
	list-style: none;
}

.gtl a {
	color: inherit;
	text-decoration: none;
}

.gtl svg.gtl-icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

.gtl button,
.gtl select,
.gtl input {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
}

.gtl .gtl-an-chu {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.gtl :focus-visible {
	outline: 2px solid var(--gtl-chinh);
	outline-offset: 2px;
}

.gtl-khung {
	width: 100%;
	max-width: var(--gtl-rong);
	margin-inline: auto;
	padding-inline: var(--gtl-le);
}

/* ---------- Đầu trang ---------- */

.gtl .gtl-dau {
	position: relative;
	padding-block: clamp(40px, 7cqi, 96px);
	background-color: var(--gtl-dau-1);
	background-image:
		linear-gradient(115deg, rgba(8, 26, 58, 0.96) 0%, rgba(13, 49, 112, 0.88) 55%, rgba(11, 99, 216, 0.72) 100%),
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: auto, 32px 32px, 32px 32px;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.gtl .gtl-dau--anh {
	background-image:
		linear-gradient(115deg, rgba(8, 26, 58, 0.9) 0%, rgba(13, 49, 112, 0.72) 60%, rgba(8, 26, 58, 0.55) 100%),
		var(--gtl-anh-dau);
	background-size: auto, cover;
	background-position: center, center;
}

.gtl .gtl-dau__tieu-de {
	max-width: 30em;
	margin-inline: auto;
	color: #fff;
	font-size: clamp(22px, 3.1cqi, 38px);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

/* ---------- Bộ lọc ---------- */

.gtl .gtl-loc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 32px;
	margin-top: 32px;
	padding: 28px 32px 32px;
	background: var(--gtl-nen);
	border: 1px solid var(--gtl-vien-nhat);
	border-radius: var(--gtl-bo-lon);
}

.gtl .gtl-loc__o {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.gtl .gtl-loc__o--tu-khoa {
	grid-column: 1 / -1;
}

.gtl .gtl-loc__nhan {
	display: block;
	color: var(--gtl-chu);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.gtl .gtl-loc__hang {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: stretch;
}

.gtl .gtl-chon-hop,
.gtl .gtl-o-nhap {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--gtl-cao-o);
	min-width: 0;
	background: var(--gtl-trang);
	border: 1px solid var(--gtl-vien);
	border-radius: var(--gtl-bo-nho);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.gtl .gtl-chon-hop:hover,
.gtl .gtl-o-nhap:hover {
	border-color: #b8c5d8;
}

.gtl .gtl-chon-hop:focus-within,
.gtl .gtl-o-nhap:focus-within {
	border-color: var(--gtl-chinh);
	box-shadow: 0 0 0 3px rgba(11, 99, 216, 0.16);
}

.gtl .gtl-chon-hop__bieu-tuong,
.gtl .gtl-o-nhap__bieu-tuong {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	color: var(--gtl-chu-3);
	pointer-events: none;
}

.gtl .gtl-chon-hop__bieu-tuong::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 0;
	bottom: 14px;
	width: 1px;
	background: var(--gtl-vien);
}

.gtl .gtl-o-nhap__bieu-tuong {
	color: var(--gtl-chinh);
}

.gtl .gtl-chon-hop__select {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 60px 0 66px;
	background: transparent none;
	border: 0;
	border-radius: var(--gtl-bo-nho);
	color: var(--gtl-chu);
	font-size: 15px;
	line-height: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	box-shadow: none;
}

.gtl .gtl-chon-hop__select:focus {
	outline: none;
	box-shadow: none;
}

.gtl .gtl-chon-hop__mui {
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	background: var(--gtl-chinh);
	border-radius: 6px;
	color: #fff;
	pointer-events: none;
}

.gtl .gtl-o-nhap__input {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 16px 0 52px;
	background: transparent;
	border: 0;
	border-radius: var(--gtl-bo-nho);
	color: var(--gtl-chu);
	font-size: 15px;
	line-height: normal;
	text-overflow: ellipsis;
	box-shadow: none;
}

.gtl .gtl-o-nhap__input::placeholder {
	color: var(--gtl-chu-3);
	opacity: 1;
}

.gtl .gtl-o-nhap__input:focus {
	outline: none;
	box-shadow: none;
}

.gtl .gtl-o-nhap__input::-webkit-search-cancel-button {
	cursor: pointer;
}

/* ---------- Nút ---------- */

.gtl .gtl-nut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--gtl-cao-nut);
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--gtl-bo-nho);
	background: transparent;
	color: var(--gtl-chu);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	vertical-align: middle;
}

.gtl .gtl-nut--lon {
	height: var(--gtl-cao-o);
	padding-inline: 28px;
	font-size: 15px;
}

.gtl .gtl-nut--chinh {
	background: var(--gtl-chinh);
	border-color: var(--gtl-chinh);
	color: #fff;
}

.gtl .gtl-nut--chinh:hover {
	background: var(--gtl-chinh-dam);
	border-color: var(--gtl-chinh-dam);
	color: #fff;
}

.gtl .gtl-nut--vien {
	background: var(--gtl-trang);
	border-color: var(--gtl-vien);
	color: var(--gtl-chinh);
}

.gtl .gtl-nut--vien:hover {
	background: var(--gtl-chinh-nhat);
	border-color: #b9cff3;
	color: var(--gtl-chinh-dam);
}

.gtl .gtl-nut--nhat {
	color: var(--gtl-chu-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gtl .gtl-nut--nhat:hover {
	color: var(--gtl-chinh);
}

.gtl .gtl-loc__cai-lai {
	padding-inline: 12px;
}

.gtl .gtl-nut:disabled,
.gtl .gtl-nut[aria-disabled="true"] {
	background: var(--gtl-nen);
	border-color: var(--gtl-vien-nhat);
	color: #a3aec0;
	cursor: not-allowed;
}

/* ---------- Kết quả ---------- */

.gtl .gtl-ket-qua {
	position: relative;
	margin-top: 44px;
	margin-bottom: 64px;
	min-height: 240px;
}

.gtl .gtl-ket-qua::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	width: 0;
	height: 3px;
	background: var(--gtl-chinh);
	border-radius: 3px;
	opacity: 0;
}

.gtl .gtl-ket-qua.is-dang-tai::before {
	opacity: 1;
	animation: gtl-tai 1.2s ease-in-out infinite;
}

.gtl .gtl-ket-qua.is-dang-tai > * {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s 0.1s;
}

@keyframes gtl-tai {
	0% { left: 0; width: 0; }
	50% { left: 20%; width: 60%; }
	100% { left: 100%; width: 0; }
}

.gtl .gtl-ket-qua__dau {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 16px;
}

.gtl .gtl-ket-qua__tieu-de {
	color: var(--gtl-chu);
	font-size: clamp(24px, 2.6cqi, 32px);
	font-weight: 700;
	line-height: 1.25;
}

.gtl .gtl-ket-qua__so {
	color: var(--gtl-chu-2);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Tab loại tài liệu */
.gtl .gtl-tab {
	position: relative;
	border-bottom: 1px solid var(--gtl-vien);
}

.gtl .gtl-tab__cuon {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.gtl .gtl-tab__cuon::-webkit-scrollbar {
	display: none;
}

.gtl .gtl-tab::before,
.gtl .gtl-tab::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 1px;
	z-index: 1;
	width: 40px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}

.gtl .gtl-tab::before {
	left: 0;
	background: linear-gradient(90deg, #fff 20%, rgba(255, 255, 255, 0));
}

.gtl .gtl-tab::after {
	right: 0;
	background: linear-gradient(270deg, #fff 20%, rgba(255, 255, 255, 0));
}

.gtl .gtl-tab.is-con-trai::before,
.gtl .gtl-tab.is-con-phai::after {
	opacity: 1;
}

.gtl .gtl-tab__muc {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	padding: 14px 0 13px;
	color: var(--gtl-chu-2);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}

.gtl .gtl-tab__muc:hover {
	color: var(--gtl-chinh);
}

.gtl .gtl-tab__muc.is-dang-chon {
	color: var(--gtl-chinh);
	font-weight: 600;
}

.gtl .gtl-tab__muc.is-dang-chon::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	background: var(--gtl-chinh);
	border-radius: 3px 3px 0 0;
}

.gtl .gtl-tab__dem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 20px;
	padding: 0 6px;
	background: var(--gtl-nen);
	border-radius: 10px;
	color: var(--gtl-chu-3);
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.gtl .gtl-tab__muc.is-dang-chon .gtl-tab__dem {
	background: var(--gtl-chinh-nhat);
	color: var(--gtl-chinh);
}

/* Loại con */
.gtl .gtl-nhom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.gtl .gtl-nhom__muc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	background: var(--gtl-trang);
	border: 1px solid var(--gtl-vien);
	border-radius: 17px;
	color: var(--gtl-chu-2);
	font-size: 14px;
	white-space: nowrap;
}

.gtl .gtl-nhom__muc:hover {
	border-color: #b9cff3;
	color: var(--gtl-chinh);
}

.gtl .gtl-nhom__muc.is-dang-chon {
	background: var(--gtl-chinh-nhat);
	border-color: var(--gtl-chinh);
	color: var(--gtl-chinh);
	font-weight: 500;
}

.gtl .gtl-nhom__dem {
	color: var(--gtl-chu-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Thẻ thông tin dòng sản phẩm */
.gtl .gtl-the-dong {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 16px 20px;
	background: var(--gtl-nen-2);
	border: 1px solid var(--gtl-vien-nhat);
	border-radius: var(--gtl-bo-lon);
}

.gtl .gtl-the-dong__anh {
	flex: none;
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--gtl-vien-nhat);
	border-radius: var(--gtl-bo-nho);
}

.gtl .gtl-the-dong__noi-dung {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.gtl .gtl-the-dong__duong {
	color: var(--gtl-chu-3);
	font-size: 13px;
}

.gtl .gtl-the-dong__ten {
	color: var(--gtl-chu);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.gtl .gtl-the-dong__mo-ta {
	color: var(--gtl-chu-2);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.gtl .gtl-the-dong__model {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.gtl .gtl-the-dong__model li {
	padding: 2px 8px;
	background: #fff;
	border: 1px solid var(--gtl-vien);
	border-radius: 6px;
	color: var(--gtl-chu-2);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* Trạng thái rỗng */
.gtl .gtl-trong {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 56px 24px;
	background: var(--gtl-nen-2);
	border: 1px dashed var(--gtl-vien);
	border-radius: var(--gtl-bo-lon);
	text-align: center;
}

.gtl .gtl-trong__bieu-tuong {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 4px;
	background: #fff;
	border: 1px solid var(--gtl-vien-nhat);
	border-radius: 50%;
	color: var(--gtl-chu-3);
}

.gtl .gtl-trong__bieu-tuong .gtl-icon {
	width: 26px;
	height: 26px;
}

.gtl .gtl-trong__tieu-de {
	color: var(--gtl-chu);
	font-size: 18px;
	font-weight: 600;
}

.gtl .gtl-trong__mo-ta {
	max-width: 46ch;
	margin-bottom: 8px;
	color: var(--gtl-chu-2);
	font-size: 14.5px;
}

/* ---------- Bảng tài liệu ---------- */

.gtl .gtl-bang {
	margin-top: 20px;
	background: var(--gtl-trang);
	border: 1px solid var(--gtl-vien);
	border-radius: var(--gtl-bo-lon);
}

.gtl .gtl-bang__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

/* Độ rộng cột đặt trên tiêu đề (table-layout: fixed lấy theo hàng đầu). */
.gtl .gtl-bang__table th.gtl-o--chon { width: 56px; }
.gtl .gtl-bang__table th.gtl-o--stt { width: 56px; }
.gtl .gtl-bang__table th.gtl-o--dong { width: 150px; }
.gtl .gtl-bang__table th.gtl-o--phien-ban { width: 100px; }
.gtl .gtl-bang__table th.gtl-o--dung-luong { width: 116px; }
.gtl .gtl-bang__table th.gtl-o--ngon-ngu { width: 96px; }
.gtl .gtl-bang__table th.gtl-o--ngay { width: 112px; }
.gtl .gtl-bang__table th.gtl-o--xem { width: 104px; }
.gtl .gtl-bang__table th.gtl-o--tai { width: 96px; }

.gtl .gtl-bang__table td.gtl-o--ngat {
	display: none;
}

.gtl .gtl-bang__table th {
	height: 52px;
	padding: 0 8px;
	background: var(--gtl-nen);
	border-bottom: 1px solid var(--gtl-vien);
	color: var(--gtl-chu-2);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gtl .gtl-bang__table th:first-child {
	border-top-left-radius: calc(var(--gtl-bo-lon) - 1px);
}

.gtl .gtl-bang__table th:last-child {
	border-top-right-radius: calc(var(--gtl-bo-lon) - 1px);
}

.gtl .gtl-bang__table th.gtl-o--ten {
	text-align: left;
}

.gtl .gtl-bang__table td {
	height: 64px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--gtl-vien-nhat);
	color: var(--gtl-chu);
	font-size: 15px;
	text-align: center;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
	overflow: hidden;
}

.gtl .gtl-bang__table td.gtl-o--ten {
	text-align: left;
}

.gtl .gtl-hang:hover td {
	background: var(--gtl-nen-2);
}

.gtl .gtl-hang.is-da-chon td {
	background: #f1f6fe;
}

.gtl .gtl-o-ten {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.gtl .gtl-duoi {
	display: inline-flex;
	flex: none;
	align-items: flex-end;
	justify-content: center;
	width: 30px;
	height: 36px;
	padding-bottom: 5px;
	background: var(--gtl-do);
	border-radius: 3px 10px 3px 3px;
	color: #fff;
	font-size: 8.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.gtl .gtl-duoi--nen { background: #6941c6; }
.gtl .gtl-duoi--ban-ve { background: #0e7490; }
.gtl .gtl-duoi--van-phong { background: #1d6f42; }
.gtl .gtl-duoi--khac { background: #475467; }

.gtl .gtl-ten {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	color: var(--gtl-chu);
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.gtl .gtl-ten:hover {
	color: var(--gtl-chinh);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gtl .gtl-nhan {
	display: inline-block;
	max-width: 100%;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.gtl .gtl-nhan--0 { background: #e8f1fd; color: #1b5fc1; }
.gtl .gtl-nhan--1 { background: #f0ebfd; color: #6941c6; }
.gtl .gtl-nhan--2 { background: #e6f5ec; color: #1d7a43; }
.gtl .gtl-nhan--3 { background: #fdf2e2; color: #a2570b; }
.gtl .gtl-nhan--4 { background: #e3f5f6; color: #0e7085; }
.gtl .gtl-nhan--5 { background: #fdebef; color: #b42352; }

.gtl .gtl-trong-o {
	color: #a3aec0;
}

.gtl .gtl-nut--xem {
	width: 100%;
	max-width: 88px;
	padding-inline: 10px;
}

.gtl .gtl-nut--tai {
	width: 48px;
	padding: 0;
}

.gtl .gtl-nut--tai .gtl-nut__chu-phu {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Ô chọn */
.gtl .gtl-hop-chon {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	cursor: pointer;
	vertical-align: middle;
}

.gtl .gtl-hop-chon input {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	margin: -10px 0 0;
	opacity: 0;
	cursor: pointer;
}

.gtl .gtl-hop-chon__o {
	flex: none;
	width: 20px;
	height: 20px;
	background: #fff center / 14px 14px no-repeat;
	border: 1.5px solid #b3bfd1;
	border-radius: 5px;
	transition: background-color 0.12s, border-color 0.12s;
}

.gtl .gtl-hop-chon:hover .gtl-hop-chon__o {
	border-color: var(--gtl-chinh);
}

.gtl .gtl-hop-chon input:checked + .gtl-hop-chon__o {
	background-color: var(--gtl-chinh);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	border-color: var(--gtl-chinh);
}

.gtl .gtl-hop-chon input:indeterminate + .gtl-hop-chon__o {
	background-color: var(--gtl-chinh);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
	border-color: var(--gtl-chinh);
}

.gtl .gtl-hop-chon input:focus-visible + .gtl-hop-chon__o {
	outline: 2px solid var(--gtl-chinh);
	outline-offset: 2px;
}

/* Chân bảng: chọn nhiều + phân trang */
.gtl .gtl-bang__chan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 12px 16px 12px 18px;
	background: var(--gtl-nen-2);
	border-radius: 0 0 var(--gtl-bo-lon) var(--gtl-bo-lon);
}

.gtl .gtl-chon-nhieu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	min-width: 0;
}

.gtl .gtl-chon-nhieu__chu {
	color: var(--gtl-chu-2);
	font-size: 14.5px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gtl:not(.gtl--js) .gtl-chon-nhieu,
.gtl:not(.gtl--js) .gtl-o--chon {
	display: none;
}

.gtl .gtl-phan-trang {
	margin-left: auto;
}

.gtl .gtl-phan-trang__ds {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.gtl .gtl-phan-trang__muc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid var(--gtl-vien);
	border-radius: var(--gtl-bo-nho);
	color: var(--gtl-chu);
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}

.gtl a.gtl-phan-trang__muc:hover {
	border-color: var(--gtl-chinh);
	color: var(--gtl-chinh);
}

.gtl .gtl-phan-trang__muc.is-dang-chon {
	background: var(--gtl-chinh);
	border-color: var(--gtl-chinh);
	color: #fff;
	font-weight: 600;
}

.gtl .gtl-phan-trang__muc--cham {
	min-width: 24px;
	padding: 0;
	background: transparent;
	border-color: transparent;
	color: var(--gtl-chu-3);
}

.gtl .gtl-phan-trang__muc.is-tat {
	color: #b6c0cf;
	background: var(--gtl-nen);
	border-color: var(--gtl-vien-nhat);
}

.gtl .gtl-phan-trang__muc .gtl-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Hộp thoại tải lần lượt ---------- */

.gtl .gtl-hop-thoai {
	width: min(560px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 14px;
	color: var(--gtl-chu);
	box-shadow: 0 24px 64px rgba(8, 26, 58, 0.28);
	overflow: hidden;
}

.gtl .gtl-hop-thoai::backdrop {
	background: rgba(8, 26, 58, 0.5);
}

.gtl .gtl-hop-thoai__khung {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 32px);
}

.gtl .gtl-hop-thoai__dau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 16px 8px 24px;
}

.gtl .gtl-hop-thoai__tieu-de {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.gtl .gtl-hop-thoai__dong {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--gtl-chu-2);
	cursor: pointer;
}

.gtl .gtl-hop-thoai__dong:hover {
	background: var(--gtl-nen);
}

.gtl .gtl-hop-thoai__mo-ta {
	padding: 0 24px 12px;
	color: var(--gtl-chu-2);
	font-size: 14.5px;
}

.gtl .gtl-hop-thoai__ds {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 24px;
	overflow-y: auto;
	border: 1px solid var(--gtl-vien-nhat);
	border-radius: 10px;
}

.gtl .gtl-hop-thoai__ds li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 16px;
	border-bottom: 1px solid var(--gtl-vien-nhat);
}

.gtl .gtl-hop-thoai__ds li:last-child {
	border-bottom: 0;
}

.gtl .gtl-hop-thoai__ten {
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gtl .gtl-hop-thoai__kt {
	color: var(--gtl-chu-3);
	font-size: 13px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gtl .gtl-hop-thoai__ds .gtl-nut {
	height: 36px;
	padding-inline: 14px;
}

.gtl .gtl-hop-thoai__ds li.is-da-tai .gtl-nut {
	color: #1d7a43;
	border-color: #b7e0c5;
	background: #eef8f1;
}

.gtl .gtl-hop-thoai__chan {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 24px 20px;
}

.gtl .gtl-thong-bao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	padding: 14px 16px;
	background: #fef3f2;
	border: 1px solid #fecdca;
	border-radius: var(--gtl-bo-nho);
	color: #912018;
	font-size: 14.5px;
}

/* =============================================================
 * Khung vừa: bỏ cột STT và Ngày để tên tài liệu đủ rộng.
 * ========================================================== */
@container gtl (max-width: 1179px) {
	.gtl .gtl-bang__table .gtl-o--stt,
	.gtl .gtl-bang__table .gtl-o--ngay {
		display: none;
	}

	.gtl .gtl-bang__table th.gtl-o--dong { width: 136px; }
	.gtl .gtl-bang__table th.gtl-o--ngon-ngu { width: 96px; }
}

/* =============================================================
 * Khung hẹp (máy tính bảng, điện thoại): bảng chuyển thành thẻ.
 * ========================================================== */
@container gtl (max-width: 999px) {
	.gtl .gtl-loc {
		gap: 16px 20px;
		padding: 20px;
	}

	.gtl .gtl-bang {
		background: transparent;
		border: 0;
	}

	.gtl .gtl-bang__table,
	.gtl .gtl-bang__table tbody {
		display: block;
		width: 100%;
	}

	.gtl .gtl-bang__table thead {
		display: none;
	}

	.gtl .gtl-bang__table tbody {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.gtl .gtl-hang {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		align-items: center;
		gap: 0;
		padding: 14px 16px 16px 52px;
		background: #fff;
		border: 1px solid var(--gtl-vien);
		border-radius: var(--gtl-bo-lon);
	}

	.gtl .gtl-hang.is-da-chon {
		border-color: #9fc0f0;
		box-shadow: inset 0 0 0 1px #9fc0f0;
	}

	.gtl .gtl-hang:hover td,
	.gtl .gtl-hang.is-da-chon td {
		background: transparent;
	}

	.gtl .gtl-bang__table td {
		display: block;
		height: auto;
		padding: 0;
		border: 0;
		text-align: left;
		overflow: visible;
	}

	.gtl .gtl-bang__table td.gtl-o--chon {
		position: absolute;
		top: 14px;
		left: 16px;
	}

	.gtl .gtl-bang__table td.gtl-o--stt,
	.gtl .gtl-bang__table td.gtl-o--rong {
		display: none;
	}

	.gtl .gtl-bang__table td.gtl-o--ten {
		flex: 1 1 100%;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.gtl .gtl-bang__table td.gtl-o--ngay {
		display: block;
	}

	.gtl .gtl-bang__table td.gtl-o--ngay.gtl-o--rong {
		display: none;
	}

	.gtl .gtl-o-ten {
		width: 100%;
	}

	/* Dòng thông tin phụ: nhãn dòng · phiên bản · dung lượng · ngôn ngữ · ngày */
	.gtl .gtl-bang__table td.gtl-o--dong {
		margin: 10px 14px 0 0;
		max-width: 100%;
	}

	.gtl .gtl-bang__table td.gtl-o--phien-ban,
	.gtl .gtl-bang__table td.gtl-o--dung-luong,
	.gtl .gtl-bang__table td.gtl-o--ngon-ngu,
	.gtl .gtl-bang__table td.gtl-o--ngay {
		margin-top: 10px;
		color: var(--gtl-chu-2);
		font-size: 13.5px;
		line-height: 24px;
		white-space: nowrap;
	}

	.gtl .gtl-bang__table td.gtl-o--phien-ban::before {
		content: "Bản ";
	}

	.gtl .gtl-bang__table td.gtl-o--phien-ban,
	.gtl .gtl-bang__table td.gtl-o--dung-luong,
	.gtl .gtl-bang__table td.gtl-o--ngon-ngu {
		margin-right: 14px;
	}

	/* Ô ngắt hàng: đẩy hai nút xuống hàng riêng dù hàng thông tin ngắn hay dài. */
	.gtl .gtl-bang__table td.gtl-o--ngat {
		display: block;
		flex: 0 0 100%;
		height: 0;
	}

	/* Hai nút luôn nằm riêng một hàng: tổng bề rộng = 100% nên không thể chen vào hàng thông tin. */
	.gtl .gtl-bang__table td.gtl-o--xem,
	.gtl .gtl-bang__table td.gtl-o--tai {
		flex: 0 0 calc(50% - 4px);
		min-width: 0;
		margin-top: 14px;
	}

	.gtl .gtl-hang--khong-xem td.gtl-o--tai {
		flex-basis: 100%;
	}

	.gtl .gtl-bang__table td.gtl-o--xem {
		margin-right: 8px;
	}

	.gtl .gtl-bang__table td.gtl-o--khong-xem {
		display: none;
	}

	.gtl .gtl-nut--xem,
	.gtl .gtl-nut--tai {
		width: 100%;
		max-width: none;
		height: 42px;
	}

	.gtl .gtl-nut--tai .gtl-nut__chu-phu {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	.gtl .gtl-bang__chan {
		margin-top: 12px;
		padding: 12px 14px;
		background: #fff;
		border: 1px solid var(--gtl-vien);
		border-radius: var(--gtl-bo-lon);
	}

	.gtl .gtl-bang__chan.is-dang-chon {
		position: sticky;
		bottom: 8px;
		z-index: 5;
		box-shadow: 0 8px 28px rgba(8, 26, 58, 0.16);
	}
}

@container gtl (max-width: 719px) {
	.gtl {
		--gtl-cao-o: 48px;
	}

	.gtl .gtl-loc {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 20px;
		padding: 16px;
		gap: 14px;
	}

	.gtl .gtl-loc__hang {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.gtl .gtl-o-nhap {
		grid-column: 1 / -1;
	}

	.gtl .gtl-loc__hang .gtl-nut--chinh {
		width: 100%;
	}

	.gtl .gtl-ket-qua {
		margin-top: 32px;
	}

	.gtl .gtl-bang__table tbody {
		grid-template-columns: minmax(0, 1fr);
	}

	.gtl .gtl-tab__cuon {
		gap: 24px;
	}

	.gtl .gtl-tab__muc {
		font-size: 15px;
	}

	.gtl .gtl-bang__chan {
		flex-direction: column;
		align-items: stretch;
	}

	.gtl .gtl-chon-nhieu {
		justify-content: space-between;
	}

	.gtl .gtl-phan-trang {
		margin-left: 0;
	}

	.gtl .gtl-phan-trang__ds {
		justify-content: center;
	}

	.gtl .gtl-the-dong {
		padding: 14px 16px;
	}

	.gtl .gtl-the-dong__anh {
		width: 56px;
		height: 56px;
	}
}

@container gtl (max-width: 400px) {
	.gtl .gtl-chon-nhieu {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.gtl .gtl-chon-nhieu__nut {
		width: 100%;
	}

	.gtl .gtl-phan-trang__muc {
		min-width: 34px;
		height: 34px;
		padding: 0 6px;
		font-size: 14px;
	}

	.gtl .gtl-hop-thoai__ds li {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.gtl .gtl-hop-thoai__kt {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtl *,
	.gtl *::before,
	.gtl *::after {
		transition: none !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}