/* pro-space-2026-r3.css — 21/09/2026.
 *
 * Trang Pro Space dựng theo gói bàn giao `design_handoff_togashyamo_pro_space`.
 *
 * ===========================================================================
 * KHÔNG NẠP `responsive.css` CỦA GÓI — ĐÃ KIỂM, KHÔNG PHẢI ĐỀ PHÒNG SUÔNG
 * ===========================================================================
 * File đó chứa `#tg-hdr`, `#tg-nav`, `#tg-foot` (header/menu/chân trang THẬT
 * của site) kèm `!important`, cộng một luật quét
 * `main section > div[style*="grid-template-columns"]`. Nạp vào là đè lên
 * toàn site. Cùng cái bẫy đã ghi trong inc/pro-space.php từ 17/09 với gói
 * Retail. Các mốc responsive dưới đây chép ĐÚNG ý của gói, viết lại sạch.
 *
 * ===========================================================================
 * BẢNG MÀU — LẤY NGUYÊN CỦA GÓI, KỂ CẢ LỜI CẤM
 * ===========================================================================
 *   Ink Black   #0B0B0B   nền tối, nút đặc
 *   Warm Ivory  #F3F0E8   nền trang, chữ trên nền tối
 *   Washi       #E7E1D5   nền phụ
 *   Accent red  #B03A1E   nhãn eyebrow, số tab đang mở
 *   Signal      #F13708   dải CTA
 *   Mid grey    #4A4741   chữ phụ — ĐẶC, KHÔNG dùng alpha (8,1:1 trên ivory)
 *   Muted grey  #6E6A62   số tab chưa mở (5,5:1)
 *   Warm grey   #C9C4BA   chữ phụ trên nền Ink Black
 *
 * README của gói ghi rõ: các sắc xám dạng alpha (`rgba(11,11,11,0.5)` và
 * họ hàng) ĐÃ TỪNG dùng và TRƯỢT chuẩn AA ở cỡ chữ thân bài; `#A8A29A` cũng
 * trượt (2,2:1) nên đã bị thay bằng `#6E6A62`. Đừng đưa chúng trở lại. Đây là
 * yêu cầu tương phản có số đo, không phải sở thích màu.
 *
 * Noto Serif Display 300 cho tiêu đề, Noto Sans cho phần còn lại — hai họ chữ
 * này theme đã nạp sẵn toàn site, không nạp thêm.
 */

.tgs-ps26 {
	--ps-ink: #0B0B0B;
	--ps-ivory: #F3F0E8;
	--ps-washi: #E7E1D5;
	--ps-do: #B03A1E;
	--ps-cam: #F13708;
	--ps-xam: #4A4741;
	--ps-xam-mo: #6E6A62;
	--ps-xam-am: #C9C4BA;

	background: var(--ps-ivory);
}

.tgs-ps26-khung {
	max-width: 1328px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Nhãn eyebrow dùng chung --------------------------------------------- */
.tgs-ps26-mat {
	margin: 0 0 18px;
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--ps-do);
}

.tgs-ps26-mat--sang {
	color: var(--ps-xam-am);
}

/* --- Nút dùng chung ------------------------------------------------------ */
.tgs-ps26-nut {
	display: inline-block;
	padding: 18px 40px;
	font-size: 12px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--ps-ink);
	cursor: pointer;
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.tgs-ps26-nut--dac {
	color: var(--ps-ivory);
	background: var(--ps-ink);
}

.tgs-ps26-nut--dac:hover,
.tgs-ps26-nut--dac:focus-visible {
	color: var(--ps-ink);
	background: transparent;
}

.tgs-ps26-nut--vien {
	color: var(--ps-ink);
	background: transparent;
}

.tgs-ps26-nut--vien:hover,
.tgs-ps26-nut--vien:focus-visible {
	color: var(--ps-ivory);
	background: var(--ps-ink);
}

.tgs-ps26-nut--trang {
	color: var(--ps-ink);
	background: var(--ps-ivory);
	border-color: var(--ps-ivory);
}

.tgs-ps26-nut--trang:hover,
.tgs-ps26-nut--trang:focus-visible {
	color: var(--ps-ivory);
	background: transparent;
}

.tgs-ps26-nut--tat {
	opacity: 0.45;
	cursor: default;
}

/* ===========================================================================
   A · HERO
   ======================================================================== */

.tgs-ps26-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 62vh;
	padding: 120px 0 64px;
	background: var(--ps-ink);
	overflow: hidden;
}

.tgs-ps26-hero__anh {
	position: absolute;
	inset: 0;
}

.tgs-ps26-hero__anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Màn phủ ba chặng: đậm ở đáy nơi có chữ, nhạt dần lên trên để vẫn thấy ảnh.
 * Một lớp phủ phẳng sẽ hoặc làm chữ khó đọc, hoặc giết mất ảnh.
 */
.tgs-ps26-hero__anh::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(11, 11, 11, 0.55) 0%,
		rgba(11, 11, 11, 0.30) 45%,
		rgba(11, 11, 11, 0.82) 100%
	);
}

.tgs-ps26-hero__trong {
	position: relative;
	width: 100%;
	color: var(--ps-ivory);
}

.tgs-ps26-hero__tieu {
	margin: 0 0 22px;
	max-width: 15ch;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.06;
	color: var(--ps-ivory);
}

.tgs-ps26-hero__dan {
	margin: 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ps-xam-am);
}

/* ===========================================================================
   B · GIỚI THIỆU + LƯỚI PHỐI MÀU
   ======================================================================== */

.tgs-ps26-gt {
	padding: 104px 0;
}

.tgs-ps26-gt__doi {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 88px;
	align-items: start;
}

/*
 * Lưới GIỮ LẠI trong lúc cột chữ cuộn qua. `top: 112px` chừa chỗ cho thanh
 * đầu trang `position: fixed` cao 80px cộng khoảng thở.
 */
.tgs-ps26-luoi {
	position: sticky;
	top: 112px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.tgs-ps26-o {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ps-washi);
}

.tgs-ps26-o__anh {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.45s ease, transform 0.6s ease;
}

.tgs-ps26-o:hover .tgs-ps26-o__anh {
	filter: brightness(1.05);
	transform: scale(1.02);
}

/*
 * Ô CHƯA CÓ ẢNH: swatch hai tông chéo dựng từ chính mã màu đế và quai. Thà
 * một ô thật thà còn hơn mượn ảnh của phối màu khác.
 */
.tgs-ps26-o--swatch {
	background: linear-gradient(
		135deg,
		var(--o-de) 0%,
		var(--o-de) 49.5%,
		var(--o-quai) 50.5%,
		var(--o-quai) 100%
	);
}

.tgs-ps26-o__chu {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 18px 16px 16px;
	background: linear-gradient(to top, rgba(11, 11, 11, 0.86), rgba(11, 11, 11, 0));
	color: var(--ps-ivory);
	transform: translateY(24%);
	opacity: 0;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

/* Hiện khi rê chuột HOẶC khi ô nhận tiêu điểm bàn phím. */
.tgs-ps26-o:hover .tgs-ps26-o__chu,
.tgs-ps26-o:focus-within .tgs-ps26-o__chu {
	transform: translateY(0);
	opacity: 1;
}

.tgs-ps26-o__so {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--ps-cam);
}

.tgs-ps26-o__ten {
	display: block;
	font-family: 'Noto Serif Display', serif;
	font-size: 19px;
	line-height: 1.2;
}

.tgs-ps26-o__spec {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--ps-xam-am);
}

.tgs-ps26-gt__tieu {
	margin: 0 0 28px;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.16;
	color: var(--ps-ink);
}

.tgs-ps26-gt__doan {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--ps-xam);
}

.tgs-ps26-gt__nut {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

/* ===========================================================================
   C · NĂM TAB THÔNG TIN
   ======================================================================== */

.tgs-ps26-tt {
	padding: 0 0 104px;
}

.tgs-ps26-tt__tieu {
	margin: 0 0 56px;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.14;
	text-align: center;
	color: var(--ps-ink);
}

.tgs-ps26-tt__doi {
	display: grid;
	grid-template-columns: 0.68fr 1.6fr;
	gap: 56px;
	align-items: start;
}

.tgs-ps26-tt__ds {
	display: flex;
	flex-direction: column;
}

/*
 * KHÔNG CÓ ĐƯỜNG KẺ GIỮA CÁC DÒNG — vệt nền của dòng đang mở mới là thứ giữ
 * nhịp. Đây là ghi chú của gói bàn giao, và nó đúng: kẻ ngang cộng vệt nền
 * là hai hệ thống phân cách chồng lên nhau.
 */
.tgs-ps26-tt__nut {
	display: flex;
	align-items: baseline;
	gap: 16px;
	width: 100%;
	padding: 18px 20px;
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	color: var(--ps-xam);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tgs-ps26-tt__so {
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: 1.6px;
	color: var(--ps-xam-mo);
	transition: color 0.3s ease;
}

.tgs-ps26-tt__nut.dang {
	font-size: 18px;
	color: var(--ps-ink);
	background: rgba(11, 11, 11, 0.06);
}

.tgs-ps26-tt__nut.dang .tgs-ps26-tt__so {
	color: var(--ps-do);
}

.tgs-ps26-tt__nut:hover:not(.dang) {
	color: var(--ps-ink);
}

.tgs-ps26-tt__bang-tieu {
	margin: 0 0 20px;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: 26px;
	line-height: 1.14;
	color: var(--ps-ink);
}

.tgs-ps26-tt__bang p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--ps-xam);
}

.tgs-ps26-tab__phu {
	margin: 30px 0 14px;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: 21px;
	line-height: 1.2;
	color: var(--ps-ink);
}

/*
 * Danh sách thông số dùng dấu chấm ĐỎ thay vì gạch chân hay viền — cùng lý do
 * với việc bỏ kẻ ngang ở danh sách tab.
 */
.tgs-ps26-tab__ds {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.tgs-ps26-tab__ds li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ps-xam);
}

.tgs-ps26-tab__ds li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--ps-do);
}

.tgs-ps26-tab__co {
	margin: 0 0 8px;
	font-family: 'Noto Serif Display', serif;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.3;
	letter-spacing: 1px;
	color: var(--ps-ink);
}

.tgs-ps26-tab__co-nhan {
	margin: 0;
	font-size: 11px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--ps-xam-mo);
}

/* Bốn lý do hợp tác — lưới 2×2. */
.tgs-ps26-tab__ly {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 32px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.tgs-ps26-tab__ly li {
	font-size: 13px;
	line-height: 1.7;
	color: var(--ps-xam);
}

.tgs-ps26-tab__ly-so {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	letter-spacing: 1.8px;
	color: var(--ps-do);
}

.tgs-ps26-tab__ly strong {
	display: block;
	margin-bottom: 6px;
	font-weight: 400;
	color: var(--ps-ink);
}

/* ===========================================================================
   D · DÒNG KẾT + DẢI CTA
   ======================================================================== */

.tgs-ps26-ket {
	padding: 0 0 96px;
	text-align: center;
}

.tgs-ps26-ket__dong {
	margin: 0;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: clamp(20px, 2vw, 29px);
	line-height: 1.5;
	color: var(--ps-ink);
}

.tgs-ps26-cta {
	padding: 68px 0;
	background: var(--ps-cam);
}

.tgs-ps26-cta__trong {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.tgs-ps26-cta__tieu {
	margin: 0;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: clamp(26px, 3.2vw, 46px);
	line-height: 1.1;
	color: var(--ps-ivory);
}

/* ===========================================================================
   E · SỐ LƯỢNG SỈ VÀ BẬC GIÁ
   ======================================================================== */

.tgs-ps26-sl {
	padding: 0 0 104px;
}

.tgs-ps26-sl__hop {
	padding: 48px;
	background: var(--ps-ink);
	color: var(--ps-ivory);
}

.tgs-ps26-sl__mat {
	margin: 0 0 30px;
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--ps-cam);
}

.tgs-ps26-sl__doi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.tgs-ps26-sl__nhan {
	margin: 0 0 14px;
	font-size: 11px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--ps-xam-am);
}

.tgs-ps26-sl__dem {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(243, 240, 232, 0.3);
}

.tgs-ps26-sl__nut-dem {
	width: 52px;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	color: var(--ps-ivory);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tgs-ps26-sl__nut-dem:hover:not(:disabled) {
	background: rgba(243, 240, 232, 0.12);
}

.tgs-ps26-sl__nut-dem:disabled {
	color: var(--ps-xam-mo);
	cursor: default;
}

.tgs-ps26-sl__so {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	padding: 16px 8px;
	font-size: 17px;
	border-right: 1px solid rgba(243, 240, 232, 0.3);
	border-left: 1px solid rgba(243, 240, 232, 0.3);
}

.tgs-ps26-sl__ghi {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--ps-xam-am);
}

.tgs-ps26-sl__tong {
	margin: 0;
	font-family: 'Noto Serif Display', serif;
	font-weight: 300;
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.1;
	color: var(--ps-ivory);
}

.tgs-ps26-sl__don {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ps-xam-am);
}

.tgs-ps26-sl__bac {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.tgs-ps26-sl__bac-o {
	padding: 16px 18px;
	background: #111110;
	transition: background-color 0.3s ease;
}

/* Bậc đang áp sáng lên — đây là phần "bộ máy chạy" mà Minh yêu cầu giữ. */
.tgs-ps26-sl__bac-o.dang {
	background: #232019;
}

.tgs-ps26-sl__bac-dai {
	display: block;
	font-size: 12px;
	letter-spacing: 1.4px;
	color: var(--ps-xam-am);
}

.tgs-ps26-sl__bac-gia {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	color: var(--ps-ivory);
}

.tgs-ps26-sl__luu {
	margin: 20px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ps-xam-am);
}

.tgs-ps26-sl__nut-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.tgs-ps26-sl__nut-hang .tgs-ps26-nut--dac {
	color: var(--ps-ink);
	background: var(--ps-ivory);
	border-color: var(--ps-ivory);
}

.tgs-ps26-sl__nut-hang .tgs-ps26-nut--dac:hover,
.tgs-ps26-sl__nut-hang .tgs-ps26-nut--dac:focus-visible {
	color: var(--ps-ivory);
	background: transparent;
}

.tgs-ps26-sl__nut-hang .tgs-ps26-nut--vien {
	color: var(--ps-ivory);
	border-color: rgba(243, 240, 232, 0.4);
}

.tgs-ps26-sl__nut-hang .tgs-ps26-nut--vien:hover,
.tgs-ps26-sl__nut-hang .tgs-ps26-nut--vien:focus-visible {
	color: var(--ps-ink);
	background: var(--ps-ivory);
	border-color: var(--ps-ivory);
}

/* ===========================================================================
   RESPONSIVE — chép đúng hai mốc của gói bàn giao
   ======================================================================== */

@media (max-width: 1180px) {
	.tgs-ps26-gt__doi {
		gap: 48px;
	}

	.tgs-ps26-tt__doi {
		gap: 36px;
	}
}

@media (max-width: 1000px) {
	.tgs-ps26-gt {
		padding: 68px 0;
	}

	/* Một cột, và lưới NHẢ STICKY — dính trong bố cục một cột là ảnh che chữ. */
	.tgs-ps26-gt__doi {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tgs-ps26-luoi {
		position: relative;
		top: auto;
	}

	/* Tab xếp dọc: danh sách lên trên, nội dung xuống dưới. */
	.tgs-ps26-tt__doi {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.tgs-ps26-tt,
	.tgs-ps26-sl {
		padding-bottom: 68px;
	}

	.tgs-ps26-sl__hop {
		padding: 32px 22px;
	}

	.tgs-ps26-sl__doi,
	.tgs-ps26-tab__ly {
		grid-template-columns: 1fr;
	}

	.tgs-ps26-sl__bac {
		grid-template-columns: 1fr;
		gap: 1px;
	}
}

@media (max-width: 620px) {
	.tgs-ps26-hero {
		min-height: 54vh;
		padding: 104px 0 48px;
	}

	.tgs-ps26-luoi {
		gap: 12px;
	}

	.tgs-ps26-nut {
		padding: 16px 28px;
		font-size: 11px;
		letter-spacing: 2px;
	}

	.tgs-ps26-cta__trong {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ---------------------------------------------------------------------------
   TIÊU ĐỀ KHỐI CẤU HÌNH — thêm 21/09/2026
   ---------------------------------------------------------------------------
   Class này CHỈ do page-prospace.php gắn vào (xem chú thích ở đó).
   `than-personal.php` không bao giờ in class này, nên trang Made Personal
   không thể bị ảnh hưởng — kể cả nếu tệp CSS này có được nạp ở chỗ khác.

   Đo trên trang thật, cửa sổ 1920px:
     H1 hero của trang Pro Space      64px
     H1 khối cấu hình (đi mượn)      104px   ← tiêu đề mượn to hơn tiêu đề trang
   Ảnh thiết kế vẽ tiêu đề này nhỏ hơn hero rõ rệt. Hạ xuống 44px.

   Dùng clamp chứ không một số cứng: phần còn lại của theme đều theo clamp,
   một số cứng sẽ lọt thỏm ở khổ rộng và tràn ở khổ hẹp.
   --------------------------------------------------------------------------- */

.tgs-ps26-cfg__tieu {
	font-size: clamp(28px, 3.1vw, 44px);
	line-height: 1.14;
}

/* ---------------------------------------------------------------------------
   LIGHTBOX PHỐI MÀU — thêm 21/09/2026
   ---------------------------------------------------------------------------
   Gói bàn giao mô tả tính năng này; bản của họ chỉ bấm được bằng chuột.
   Ở đây nút là <button> thật nên có tiêu điểm và phím; phần JS giam tiêu điểm
   trong hộp và trả nó về đúng ô khi đóng.
   --------------------------------------------------------------------------- */

.tgs-ps26-luoi .tgs-ps26-o {
	position: relative;
}

/* Nút phủ kín ô. Trong suốt — lớp hình ảnh vẫn là <img>/swatch bên dưới. */
.tgs-ps26-o__mo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tgs-ps26-o__mo:focus-visible {
	outline: 2px solid #B03A1E;
	outline-offset: 3px;
}

/* Chữ chỉ dành cho trình đọc màn hình. Không dùng display:none — như thế là
   giấu luôn khỏi trình đọc màn hình, tức mất hẳn nhãn của nút. */
.tgs-ps26-chu-an {
	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;
}

html.tgs-ps26-khoa,
html.tgs-ps26-khoa body {
	overflow: hidden;
}

.tgs-ps26-lb {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tgs-ps26-lb[hidden] {
	display: none;
}

.tgs-ps26-lb__nen {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, .88);
}

.tgs-ps26-lb__hop {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 48px);
	overflow: auto;
	padding: 28px;
	background: #F3F0E8;
}

.tgs-ps26-lb__dong {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #0B0B0B;
	cursor: pointer;
}

.tgs-ps26-lb__khung {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #E7E1D5;
}

.tgs-ps26-lb__khung img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Swatch hai tông chéo, cùng công thức với ô trong lưới. */
.tgs-ps26-lb__swatch {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--o-de) 0 50%, var(--o-quai) 50% 100%);
}

.tgs-ps26-lb__ten {
	margin: 20px 0 0;
	font-family: var(--tgs-chu-de, "Noto Serif Display", serif);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.2;
	color: #0B0B0B;
}

.tgs-ps26-lb__spec {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #4A4741;
}

.tgs-ps26-lb__sau {
	margin: 22px 0 0;
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid #0B0B0B;
	background: none;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0B0B0B;
	cursor: pointer;
}

.tgs-ps26-lb__sau:hover {
	color: #B03A1E;
	border-bottom-color: #B03A1E;
}

@media (max-width: 600px) {
	.tgs-ps26-lb {
		padding: 12px;
	}

	.tgs-ps26-lb__hop {
		padding: 20px;
	}

	.tgs-ps26-lb__ten {
		font-size: 22px;
	}
}

/* ---------------------------------------------------------------------------
   KHỐI SỐ LƯỢNG + GIÁ NẰM TRONG PANEL "YOUR DESIGN" — sửa 21/09/2026
   ---------------------------------------------------------------------------
   Trước đây khối này là một <section> riêng có nền đen của chính nó. Giờ nó
   nằm TRONG panel "Your design" (nền #0B0B0B, chữ #F3F0E8) nên KHÔNG cần nền
   nữa — chỉ cần một đường kẻ mảnh tách nó khỏi phần đọc lại thiết kế ở trên.

   Các class `.tgs-ps26-sl__*` bên trong giữ nguyên, luật cũ vẫn dùng được.
   --------------------------------------------------------------------------- */

.tgs-ps26-sl__nhung {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid rgba(243, 240, 232, .18);
}

/* ---------------------------------------------------------------------------
   ĐÃ SỬA LẠI — lần đầu tôi ĐOÁN, không đo.
   ---------------------------------------------------------------------------
   Lần đầu tôi ép ba bậc giá xếp DỌC, kèm chú thích "panel hẹp hơn dải cũ
   nhiều". Đó là phỏng đoán, không phải số đo.

   Đo thật (dựng trang trong iframe khổ cố định, vì cửa sổ Chrome đang thu nhỏ
   nên đo trực tiếp trả 0):

       khung 1920px  ->  panel 869px,  khối giá rộng 781px
       khung 1280px  ->  panel 764px,  khối giá rộng 676px

   781px thừa chỗ cho ba cột (~260px mỗi cột), và ảnh thiết kế cũng vẽ ba cột.

   Dùng auto-fit thay vì một mốc ngắt cứng: panel co theo bố cục hai cột của
   bộ cấu hình, nên mốc ngắt theo bề rộng MÀN HÌNH sẽ sai ở khổ trung gian.
   auto-fit đọc bề rộng THẬT còn lại và tự xuống dòng.
   --------------------------------------------------------------------------- */

.tgs-ps26-sl__nhung .tgs-ps26-sl__bac {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ---------------------------------------------------------------------------
   HÀNG NÚT CỦA PANEL — Buy Now · Send an Enquiry · Reset Design
   ---------------------------------------------------------------------------
   Class `tgs-ps26-hanh-dong` CHỈ do page-prospace.php gắn vào, trên trang Pro
   Space. `than-personal.php` không bao giờ in class này nên trang Made
   Personal không thể bị ảnh hưởng.

   Ảnh thiết kế để "Buy Now" là nút đặc DUY NHẤT; "Send an Enquiry" là viền.
   Trên trang Made Personal "Send an Enquiry" vẫn là nút đặc như cũ.
   --------------------------------------------------------------------------- */

.tgs-ps26-hanh-dong {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.tgs-ps26-nut--mua {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border: 1px solid #F13708;
	background: #F13708;
	color: #F3F0E8;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s ease, border-color .3s ease;
}

.tgs-ps26-nut--mua:hover,
.tgs-ps26-nut--mua:focus-visible {
	background: #B03A1E;
	border-color: #B03A1E;
	color: #F3F0E8;
}

/* Hạ "Send an Enquiry" xuống kiểu viền. Hai nút đặc cạnh nhau ở hai sắc đỏ
   khác nhau trông như lỗi dựng, và làm người đọc không biết nút nào là chính. */
.tgs-ps26-hanh-dong .tgs-nut--son {
	background: transparent;
	border: 1px solid rgba(243, 240, 232, .45);
	color: #F3F0E8;
}

.tgs-ps26-hanh-dong .tgs-nut--son:hover,
.tgs-ps26-hanh-dong .tgs-nut--son:focus-visible {
	background: transparent;
	border-color: #F3F0E8;
	color: #F3F0E8;
}

/* ---------------------------------------------------------------------------
   SỬA THEO CORRECTIONS_22_September.docx — 23/09/2026
   --------------------------------------------------------------------------- */

/* [080] "Minimum Order 50 Pairs" thôi làm nút, thành ghi chú in nghiêng nằm
   cạnh nút "Order now". Hàng nút phải canh giữa theo trục dọc, nếu không chữ
   nghiêng sẽ dính đáy nút. */
.tgs-ps26-gt__nut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.tgs-ps26-gt__dk {
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	color: #4A4741;
}

/* [085] dòng kết tăng lên 35px.
   Dùng clamp chứ không một số cứng: phần còn lại của theme đều theo clamp, một
   số cứng sẽ tràn ở khổ hẹp. 35px là TRẦN, đúng con số khách yêu cầu. */
.tgs-ps26-ket__dong {
	font-size: clamp(22px, 2.5vw, 35px);
}

/* [089] dải CTA: nền đỏ -> nền đen. Chữ đã viết HOA sẵn trong PHP nên không
   dùng text-transform — để chuỗi thật đúng bằng chữ hiển thị, tránh cảnh
   copy ra lại thành chữ thường. */
.tgs-ps26-cta {
	background: #0B0B0B;
}

/* ---------------------------------------------------------------------------
   [095] CORRECTIONS 22/09 — câu dẫn khối cấu hình to hơn "để thấy"
   ---------------------------------------------------------------------------
   Class này CHỈ do page-prospace.php gắn vào khi in thân Made Personal trên
   trang Pro Space. `than-personal.php` không bao giờ in class này, nên trang
   /personal/ giữ nguyên cỡ chữ cũ.
   --------------------------------------------------------------------------- */

.tgs-ps26-dan--to {
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.6;
}
/* ---------------------------------------------------------------------------
   CORRECTIONS 22/09 — lo 4, 23/09/2026            [PS26-CORR23-LO4]
   ---------------------------------------------------------------------------
   [081] Bot khoang trong truoc dong "Introduce Your Clientele...".
         .tgs-ps26-tt truoc do padding-bottom 104px.
   [090] Bot padding-top cua bo cau hinh. Lop .tgs-ps26-cfg do
         page-prospace.php gan vao buffer nen CHI trang Pro Space co — trang
         /personal/ giu nguyen 92px.
   --------------------------------------------------------------------------- */
.tgs-ps26-tt { padding-bottom: 56px; }

.tgs-personal.tgs-ps26-cfg { padding-top: 32px; }
/* ---------------------------------------------------------------------------
   CỠ THEO CẶP + CM — 23/09/2026                    [PS26-SIZE-CM]
   ---------------------------------------------------------------------------
   Ô chọn cỡ trong bộ cấu hình: nhãn cặp, dòng cm bên dưới, chữ gợi ý khi rê
   chuột / focus bàn phím. Tab 02: mỗi cặp một dòng.
   --------------------------------------------------------------------------- */
.tgs-ps26-size {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 12px;
}

.tgs-ps26-size__o {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.tgs-ps26-size__cm {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .02em;
	white-space: nowrap;
	color: rgba(11, 11, 11, .6);
}

.tgs-ps26-size__o::after {
	content: attr(data-goi-y);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	transform: translateX(-50%);
	padding: 6px 10px;
	background: #0B0B0B;
	color: #F3F0E8;
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.tgs-ps26-size__o:hover::after,
.tgs-ps26-size__o:has(input:focus-visible)::after {
	opacity: 1;
}

.tgs-ps26-size__ghi {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(11, 11, 11, .55);
}

.tgs-ps26-tab__co-ds {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	max-width: 420px;
}

.tgs-ps26-tab__co-ds li {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(11, 11, 11, .12);
	font-size: 15px;
	color: var(--ps-ink);
}

.tgs-ps26-tab__co-cm {
	color: var(--ps-xam);
}
/* [PS26-SIZE-CM-2] 23/09 — Hộp gợi ý CHỈ sinh ra khi cần. Đo ở khổ 390px:
   năm hộp ẩn (opacity 0) vẫn tính vào bề rộng trang → tràn ngang 410px.
   Tắt hộp thì về 375px. Nên bỏ hẳn content ở trạng thái thường. */
.tgs-ps26-size__o::after {
	content: none;
}

@media (hover: hover) {
	.tgs-ps26-size__o:hover::after {
		content: attr(data-goi-y);
		opacity: 1;
	}
}

.tgs-ps26-size__o:has(input:focus-visible)::after {
	content: attr(data-goi-y);
	opacity: 1;
}

/* [PS26-ANH-CAU-HINH] 25/09/2026 — anh that doi mau thay SVG. */
.tgs-personal__ve .tgs-anh-cau-hinh{display:block;width:100%;height:auto;}
.tgs-personal__ve img.tgs-anh-cau-hinh--an{display:none;}

/* [ANH-2026-09-26] Banner Pro Space moi la anh DOC 900x1024 trong khung ngang: keo khung xuong doi dep. */
.tgs-ps26-hero .tgs-ps26-hero__anh img{object-position:50% 88%;}

/* [PS26-VE-CAN-GIUA-0926] Edith 26/09: "center the drawing in the rectangle".
   configurator.css dat .tgs-personal__ve top:-126px (thiet ke cu cho hinh nho len khoi mep khung).
   Khung la flex can giua + dem 70px tren/duoi, nen top:0 la hinh nam giua. */
.tgs-personal__khung .tgs-personal__ve{top:0}

/* [PS26-DOI-COT-0926] Edith 26/09: chon mau truoc, dep sau -> doi cho hai cot.
   Cu (layout.css .tgs-luoi-6040--dao): 1fr hinh | 1.5fr chon. Moi: 1.5fr chon | 1fr hinh.
   Duoi 960px configurator.css da ve 1 cot, hinh o tren — giu nguyen de van thay dep khi chon.
   Duong lui: xoa khoi nay. */
@media (min-width: 961px) {
	#tgs-cau-hinh .tgs-personal__luoi { grid-template-columns: 1.5fr 1fr; }
	#tgs-cau-hinh .tgs-personal__cot-ve { order: 2; }
}

/* [PS26-TOMTAT-0927] Edith 27/09 anh X: sau khi doi cot, khoi "Your design" con margin-left:-120px (configurator.css)
   -> tran ra ngoai mep trai man hinh, cat chu o khung 1366. Bo phan tran, khoi nam gon trong cot chon. Duong lui: xoa khoi nay. */
@media (min-width: 961px) {
	#tgs-cau-hinh .tgs-personal__tom-tat { margin-left: 0; margin-inline-start: 0; width: auto; max-width: 100%; }
}