/* =============================================================================
   PRO SPACE — LỚP SỬA BỐ CỤC R2 (15/09/2026)
   =============================================================================

   Nạp SAU pro-space-2026.css, CHỈ trên template page-prospace.php /
   page-retailspace.php (xem inc/pro-space.php). Tệp gốc giữ nguyên trên đĩa vì
   edge cache giữ tệp tĩnh 7 ngày; lần sửa sau phải đổi tên tệp lần nữa (r3),
   đừng ghi đè tệp này.

   VÌ SAO CẦN LỚP NÀY: trang Pro Space nhúng nguyên thân hai trang cũ
   (The Signature Collection + Made Personal) nên nó thừa hưởng luôn hai lưới
   "phá nhịp" của bản gốc. Trên trang gộp, hai lưới đó đo ra như sau (đo thật
   trên trình duyệt, không phải cảm giác):

     1440px · 4 thẻ phối màu : 310 · 310 · 645 · 1313  → thẻ "Earth" chiếm trọn
              một hàng riêng, chữ chỉ nằm ở 1/5 bên trái, còn lại trống trơn.
      980px · 4 thẻ phối màu : 203 · 203 · 431 ·  885  → y hệt, lệch hơn.
     1440px · 4 ô hoạ tiết   : 363 · 174 · 174 ·  237  → ô thứ tư rớt xuống
              hàng hai một mình.
      980px · 4 ô hoạ tiết   : 234 · 110 · 110 ·  152  → ô 110px không đủ chỗ
              cho chữ "Asanoha Hemp Leaf".

   Nhịp lệch đó do `.tgs-luoi-4` / `.tgs-luoi-4--doi-nhip` trong layout.css cố
   tình đặt (span 6/3/3/4 và 3/3/6/12). Trên trang GỐC nó là dụng ý; trên trang
   gộp, bốn phối màu và bốn hoạ tiết là bốn lựa chọn NGANG HÀNG — người dùng
   phải so sánh chúng với nhau — nên lưới đều mới đúng chức năng.

   KHÔNG SỬA layout.css: hai lớp đó dùng chung cho nhiều trang khác. Ở đây chỉ
   đè trong phạm vi trang Pro Space.

   ĐỘ ƯU TIÊN: layout.css dùng `.tgs-luoi-4--doi-nhip > :nth-child(4)` (0,2,0).
   Dưới đây chồng ba lớp / dùng id để chắc chắn thắng, không cần !important.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1 · BỐN THẺ PHỐI MÀU — về lưới đều 4 cột
   Chỉ từ 961px trở lên. Dưới mốc đó layout.css đã tự hạ xuống 2 cột rồi 1 cột
   (đo: 760px → 1 cột, 712px mỗi thẻ) — không đụng vào.
-------------------------------------------------------------------------- */

@media (min-width: 961px) {

	.tgs-col-02__ds.tgs-luoi-4.tgs-luoi-4--doi-nhip > * {
		grid-column: span 3;
	}
}

/* -----------------------------------------------------------------------------
   2 · BỐN Ô HOẠ TIẾT (bước 3 của bộ cấu hình) — về lưới đều
   Từ 1200px: 4 ô bằng nhau (mỗi ô ~174px ở 1440px — đúng bằng bề ngang các ô
   span 3 hiện có, nên chữ không bị bóp thêm).
   961–1199px: 2 ô mỗi hàng. Chia 4 ở khổ này ra ô ~107px, chữ
   "Asanoha Hemp Leaf" sẽ vỡ thành ba dòng.
-------------------------------------------------------------------------- */

@media (min-width: 1200px) {

	#tgs-cau-hinh .tgs-personal__luoi-ht > * {
		grid-column: span 3;
	}
}

@media (min-width: 961px) and (max-width: 1199px) {

	#tgs-cau-hinh .tgs-personal__luoi-ht > * {
		grid-column: span 6;
	}
}

/* -----------------------------------------------------------------------------
   3 · MỐI NỐI GIỮA HAI NỬA TRANG
   Nửa trên (Collection) kết bằng dải đỏ #D83A22; nửa dưới (Made Personal) mở
   bằng nền ngà. Giữa hai nửa, `.tgs-main--hero` chừa `padding-bottom: 96px`
   → hiện ra một vệt nền mực 96px kẹp giữa dải đỏ và nền ngà, đọc như lỗi dựng
   chứ không như khoảng thở.

   Bỏ hẳn vệt đó: nửa dưới đã tự có `padding-top: 92px` nên vẫn đủ khoảng thở,
   và dải đỏ ăn thẳng vào nền ngà.

   Chỉ áp trên trang Pro Space (tệp này chỉ nạp ở đó) — `.tgs-main--hero` còn
   dùng ở trang khác, không được đụng tới.
-------------------------------------------------------------------------- */

#tgs-trang-collection.tgs-main--hero {
	padding-bottom: 0;
}