/* ==========================================================================
   pro-space-2026.css — CSS cho dải "coming soon" của trang Retail Space.

   BỐN ĐIỀU CẦN BIẾT

   1. FILE NÀY KHÔNG PHỤC VỤ TRANG PRO SPACE. Trang Pro Space chỉ nối lại thân
      Collection và thân Made Personal nguyên văn, nên nó dùng lại đúng
      pages.css và configurator.css đã có — không thêm một luật nào. Nếu về sau
      Pro Space cần luật riêng thì thêm vào đây, dưới một mục 2 mới, ĐỪNG sửa
      pages.css hay configurator.css: hai file đó dùng chung với các trang khác.

   2. TIỀN TỐ `.tgs-sap-ra` cho toàn bộ file. Không dùng lại tên khối nào của
      pages.css để hai file không giẫm chân nhau.

   3. MÀU VÀ CON SỐ GÕ THẲNG, không qua biến của tokens.css. Lý do: đây là một
      trang tạm, sẽ bị thay khi khách chốt nội dung Retail Space thật; buộc nó
      vào hệ biến là tạo một chỗ nữa phải nhớ khi dọn. Ba giá trị #F3F0E8,
      #B03A1E, rgba(11,11,11,0.78) khớp đúng bảng màu ngà · son · mực của
      thiết kế.

   4. ĐỔI NỘI DUNG LỚN THÌ PHẢI ĐỔI TÊN FILE. Edge cache hosting giữ file tĩnh
      7 ngày và bỏ qua `?ver=`.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · DẢI COMING SOON

   Đệm 170px trên dưới lấy đúng theo bản dựng. Không dùng `padding` viết tắt
   với hai giá trị ở phần tử con vì con còn phải giữ đệm ngang riêng.
   -------------------------------------------------------------------------- */
.tgs-sap-ra {
	background: #F3F0E8;
	padding: 170px 0;
}

/*
 * Container 1440px lặp lại số của `.tgs-container` thay vì kế thừa nó: mục 3
 * ở trên đã nói lý do — trang tạm thì đứng một mình, gỡ đi không kéo theo gì.
 */
.tgs-sap-ra__trong {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
	text-align: center;
}


/* --------------------------------------------------------------------------
   2 · BA DÒNG CHỮ
   -------------------------------------------------------------------------- */

/* Nhãn nhỏ màu son. 10px là cỡ nhỏ nhất của hệ, chỉ dùng cho nhãn viết hoa. */
.tgs-sap-ra__nhan {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #B03A1E;
}

/*
 * Tiêu đề. Có `serif` đứng sau trong ngăn xếp phông: Noto Serif Display được
 * header.php nạp, nhưng nếu một ngày font đó tải hỏng thì chữ vẫn phải là
 * chữ có chân, không rơi về sans của trình duyệt.
 *
 * clamp(30px, 3.6vw, 52px) — 30px là cỡ đọc được trên điện thoại hẹp nhất,
 * 52px là cỡ bản dựng ở 1440px. Không đặt thêm media query cho tiêu đề:
 * clamp đã lo cả dải.
 */
.tgs-sap-ra__tieu-de {
	margin: 26px 0 0;
	font-family: "Noto Serif Display", Georgia, "Times New Roman", serif;
	font-weight: 300;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.14;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #0B0B0B;
}

/*
 * Dòng mô tả. `max-width: 52ch` + `margin-inline: auto` để dòng chữ không kéo
 * dài hết 1440px — quá 75 ký tự một dòng là mắt mất chỗ khi xuống dòng.
 */
.tgs-sap-ra__dan {
	max-width: 52ch;
	margin: 24px auto 0;
	font-size: 15.5px;
	line-height: 1.85;
	color: rgba(11, 11, 11, 0.78);
}


/* --------------------------------------------------------------------------
   3 · MÀN HÌNH HẸP

   760px là ngưỡng chung của theme (xem layout.css). Đệm dọc giảm còn 110px và
   đệm ngang còn 24px — 56px trên điện thoại 360px là mất gần một phần ba bề
   ngang.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

	.tgs-sap-ra {
		padding: 110px 0;
	}

	.tgs-sap-ra__trong {
		padding: 0 24px;
	}

	.tgs-sap-ra__dan {
		font-size: 15px;
	}
}