/* =============================================================================
   RETAIL SPACE — catalogue + trang chi tiết sản phẩm (17/09/2026)
   =============================================================================

   Dựng theo gói `design_handoff_togashyamo_retail`. Mọi con số dưới đây đo từ
   thuộc tính `style` trong hai file template của gói, không tự chọn.

   PHẠM VI: chỉ trong `.tgs-rt` — tức chỉ trang dùng page-retailspace.php.
   Nạp qua inc/pro-space.php, chỉ trên template đó.

   KHÔNG NẠP `responsive.css` CỦA GÓI. File đó lẫn luật của toàn site chứ
   không riêng Retail: `main section > div{padding-left:20px !important}`,
   `#tg-nav`, `footer`, và `#tg-foot` — **trùng đúng id chân trang thật** của
   theme này (footer.php dòng `<div class="tgs-chan__cot" id="tg-foot">`).
   Nạp nguyên si là bẻ layout các trang khác. Chỉ lấy đúng 5 luật thật sự của
   Retail (rt-grid, rt-stories, rt-filters, pdp-main, pdp-related), viết lại ở
   cuối file này theo đúng ba mốc 1180 / 1000 / 620 mà README quy định.

   XÁM LÀ #4A4741 ĐẶC, KHÔNG PHẢI ALPHA. README ghi rõ: các bản trước dùng
   `rgba(11,11,11,0.5…0.6)` cho cùng vai trò và trượt AA ở cỡ chữ thân bài;
   #4A4741 trên nền ngà đạt 8.1:1. Trong template của gói vẫn còn sót vài chỗ
   alpha — ở đây theo README, không theo chỗ sót.

   TÊN FILE MỚI mỗi lần sửa lớn: edge cache giữ file tĩnh 7 ngày, `?ver=`
   không ăn. Lần sau đổi thành retail-2026-r2.css, đừng ghi đè.
   ========================================================================== */

.tgs-rt {
	--muc: #0B0B0B;
	--nga: #F3F0E8;
	--washi: #E7E1D5;
	--son: #B03A1E;
	--xam: #4A4741;
	--ke: rgba(11,11,11,.2);
	--ke-mo: rgba(11,11,11,.16);
	--vien-nhat: rgba(11,11,11,.25);
	--nhip: cubic-bezier(.16,1,.3,1);
	--khung: 1440px;
	--le: 56px;

	background: var(--nga);
	color: var(--muc);
	font-family: 'Noto Sans', system-ui, sans-serif;
	font-weight: 300;
	display: block;
	overflow-x: hidden;
}

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

.tgs-rt img { max-width: 100%; display: block; }

.tgs-rt .tgs-rt-khung {
	max-width: var(--khung);
	margin: 0 auto;
	padding-left: var(--le);
	padding-right: var(--le);
}

/* Nút dạng <button> phải bỏ kiểu mặc định của trình duyệt trước đã. */
.tgs-rt button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
}

.tgs-rt :focus-visible { outline: 2px solid var(--son); outline-offset: 3px; }

/* Nhãn mục và câu dẫn dùng lại ở nhiều khối. */
.tgs-rt .tgs-rt-mat {
	font-size: 22px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--son);
	margin: 0;
	font-weight: 300;
}

.tgs-rt .tgs-rt-dan {
	font-size: 19px;
	line-height: 1.75;
	color: var(--xam);
	margin: 18px 0 0;
	max-width: 56ch;
}

/* Chấm màu — 22px ở lưới, 30px ở trang chi tiết. */
.tgs-rt .tgs-rt-cham {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: block;
	box-shadow: inset 0 0 0 1px rgba(11,11,11,.18);
}

.tgs-rt .tgs-rt-cham--to { width: 30px; height: 30px; }

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

.tgs-rt .tgs-rt-nut {
	display: inline-block;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 28px;
	border: 1px solid transparent;
	transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.tgs-rt .tgs-rt-nut--vien { border-color: rgba(11,11,11,.4); color: var(--son); }
.tgs-rt a.tgs-rt-nut--vien:hover,
.tgs-rt a.tgs-rt-nut--vien:focus-visible,
.tgs-rt button.tgs-rt-nut--vien:hover { background: var(--son); border-color: var(--son); color: var(--nga); }

.tgs-rt .tgs-rt-nut--dac { padding: 18px 32px; background: var(--muc); color: var(--nga); }
.tgs-rt a.tgs-rt-nut--dac:hover,
.tgs-rt a.tgs-rt-nut--dac:focus-visible { background: var(--son); color: var(--nga); }

/* Trang đích chưa tồn tại: giữ hình dáng, bỏ con trỏ bàn tay, nhạt đi. */
.tgs-rt .tgs-rt-nut--tat { opacity: .45; cursor: default; }

/* =============================================================================
   1 · HERO
   ========================================================================== */

.tgs-rt .tgs-rt-hero {
	position: relative;
	min-height: max(56vh, 420px);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background: var(--muc);
}

.tgs-rt .tgs-rt-hero__anh-boc { position: absolute; inset: 0; overflow: hidden; }

.tgs-rt .tgs-rt-hero__anh {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	animation: tgs-rt-troi 30s ease-in-out infinite alternate;
}

@keyframes tgs-rt-troi {
	from { transform: scale(1.06); }
	to   { transform: scale(1.16) translateY(-1.4%); }
}

.tgs-rt .tgs-rt-hero__phu {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,11,11,.6) 0%, rgba(11,11,11,.25) 45%, rgba(11,11,11,.9) 100%);
}

.tgs-rt .tgs-rt-hero__trong {
	position: relative;
	max-width: var(--khung);
	margin: 0 auto;
	padding: 0 var(--le) 64px;
	width: 100%;
}

.tgs-rt .tgs-rt-hero__nhan {
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(243,240,232,.72);
	margin: 0;
	animation: tgs-rt-len 1.1s .1s var(--nhip) both;
}

.tgs-rt .tgs-rt-hero__tieu {
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: clamp(40px, 5.6vw, 80px);
	line-height: 1.02;
	margin: 20px 0 0;
	color: var(--nga);
	animation: tgs-rt-len 1.3s .28s var(--nhip) both;
}

.tgs-rt .tgs-rt-hero__dan {
	font-size: 19px;
	line-height: 1.75;
	max-width: 52ch;
	color: rgba(243,240,232,.82);
	margin: 24px 0 0;
	animation: tgs-rt-len 1.3s .46s var(--nhip) both;
}

@keyframes tgs-rt-len {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tgs-rt * { animation: none !important; }
}

/* =============================================================================
   2 · COLOUR STORIES
   ========================================================================== */

.tgs-rt .tgs-rt-chuyen { background: var(--nga); padding: 96px 0 0; }

.tgs-rt .tgs-rt-chuyen__ds {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 20px;
	margin-top: 40px;
}

.tgs-rt .tgs-rt-the-chuyen {
	display: block;
	border: 1px solid var(--ke);
	padding: 28px 26px 30px;
	background: transparent;
	transition: border-color .4s ease, background .4s ease;
}

.tgs-rt .tgs-rt-the-chuyen[aria-pressed="true"] {
	border-color: var(--muc);
	background: rgba(11,11,11,.04);
}

.tgs-rt .tgs-rt-the-chuyen__cham { display: flex; gap: 8px; }

.tgs-rt .tgs-rt-the-chuyen__ten {
	display: block;
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: 24px;
	margin-top: 26px;
}

.tgs-rt .tgs-rt-the-chuyen__mo {
	display: block;
	font-size: 13px;
	line-height: 1.6;
	color: var(--xam);
	margin-top: 10px;
}

/* =============================================================================
   3 · THANH LỌC
   =============================================================================
   `top` là 80px chứ không phải 92px của bản thiết kế: đầu trang của theme này
   là `position:fixed` và CAO ĐÚNG 80px (đo trên trình duyệt). Lấy 92px thì
   chừa một khe 12px, cuộn qua sẽ thấy hàng thẻ chui lên trong khe đó.
   ========================================================================== */

.tgs-rt .tgs-rt-kho { background: var(--nga); padding: 72px 0 140px; }

.tgs-rt .tgs-rt-loc {
	position: sticky;
	top: 80px;
	z-index: 20;
	background: var(--nga);
	border-top: 1px solid var(--ke);
	border-bottom: 1px solid var(--ke);
}

.admin-bar .tgs-rt .tgs-rt-loc { top: 112px; }

.tgs-rt .tgs-rt-loc__trong {
	padding-top: 14px;
	padding-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.tgs-rt .tgs-rt-loc__nhom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tgs-rt .tgs-rt-xo { position: relative; }

.tgs-rt .tgs-rt-xo__nut {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	letter-spacing: .1em;
	padding: 10px 14px;
	white-space: nowrap;
	border: 1px solid var(--vien-nhat);
	color: var(--xam);
	transition: border-color .3s ease, color .3s ease;
}

.tgs-rt .tgs-rt-xo__nut[aria-expanded="true"],
.tgs-rt .tgs-rt-xo.dang .tgs-rt-xo__nut { border-color: var(--muc); color: var(--muc); }

.tgs-rt .tgs-rt-xo__mui { font-size: 13px; line-height: 1; transition: transform .3s ease; }
.tgs-rt .tgs-rt-xo__nut[aria-expanded="true"] .tgs-rt-xo__mui { transform: rotate(180deg); }

.tgs-rt .tgs-rt-xo__bang {
	position: absolute;
	z-index: 30;
	left: 0;
	top: calc(100% + 6px);
	min-width: 100%;
	white-space: nowrap;
	background: var(--nga);
	border: 1px solid var(--muc);
	box-shadow: 0 14px 34px rgba(11,11,11,.14);
	display: flex;
	flex-direction: column;
}

.tgs-rt .tgs-rt-xo__dong {
	display: block;
	padding: 11px 18px;
	font-size: 12.5px;
	color: var(--xam);
	background: transparent;
	transition: background .25s ease;
}

.tgs-rt .tgs-rt-xo__dong:hover { background: rgba(11,11,11,.06); }
.tgs-rt .tgs-rt-xo__dong.dang { background: rgba(11,11,11,.06); color: var(--muc); }

.tgs-rt .tgs-rt-xoa {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	border-bottom: 1px solid;
	padding-bottom: 3px;
	color: var(--xam);
	transition: color .3s ease;
}

.tgs-rt .tgs-rt-xoa.dang { color: var(--son); }

.tgs-rt .tgs-rt-dem {
	font-size: 13px;
	color: var(--xam);
	white-space: nowrap;
	margin: 0;
}

/* =============================================================================
   4 · LƯỚI SẢN PHẨM
   ========================================================================== */

.tgs-rt .tgs-rt-luoi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 40px 24px;
	padding-top: 56px;
}

.tgs-rt .tgs-rt-the[hidden] { display: none; }

.tgs-rt .tgs-rt-the__khung {
	display: block;
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
	background: var(--washi);
	cursor: zoom-in;
	transition: box-shadow .5s ease;
}

.tgs-rt .tgs-rt-the__khung--trong { cursor: pointer; }

.tgs-rt .tgs-rt-the:hover .tgs-rt-the__khung { box-shadow: 0 18px 46px rgba(11,11,11,.16); }

.tgs-rt .tgs-rt-the__anh {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .5s ease, transform 1.2s var(--nhip);
}

.tgs-rt .tgs-rt-the:hover .tgs-rt-the__anh { filter: brightness(1.04); transform: scale(1.03); }

.tgs-rt .tgs-rt-the__nhan {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 8px 12px;
	background: rgba(11,11,11,.82);
	color: var(--nga);
}

/* Ô chờ ảnh — dùng chung cho lưới và trang chi tiết. */
.tgs-rt .tgs-rt-cho {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--washi);
}

.tgs-rt .tgs-rt-cho__cham { display: flex; gap: 10px; }

.tgs-rt .tgs-rt-cho__chu {
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--xam);
	text-align: center;
}

.tgs-rt .tgs-rt-the__chu { display: block; margin-top: 18px; }

.tgs-rt .tgs-rt-the__hang {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.tgs-rt .tgs-rt-the__ten {
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 1.2;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

.tgs-rt .tgs-rt-the__gia {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--xam);
	white-space: nowrap;
	margin: 0;
}

.tgs-rt .tgs-rt-the__mo {
	font-size: 14px;
	line-height: 1.6;
	color: var(--xam);
	margin: 8px 0 0;
}

.tgs-rt .tgs-rt-the__tao {
	display: inline-block;
	margin-top: 18px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid;
	padding-bottom: 4px;
	color: var(--xam);
	transition: color .35s ease;
}

.tgs-rt .tgs-rt-the:hover .tgs-rt-the__tao { color: var(--son); }
.tgs-rt .tgs-rt-the__tao.tgs-rt-nut--tat { opacity: .45; cursor: default; }

/* Trạng thái rỗng */
.tgs-rt .tgs-rt-rong {
	border: 1px solid var(--ke);
	padding: 72px 48px;
	text-align: center;
	margin-top: 56px;
}

.tgs-rt .tgs-rt-rong[hidden] { display: none; }

.tgs-rt .tgs-rt-rong__tieu {
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: 28px;
	line-height: 1.3;
	margin: 0;
}

.tgs-rt .tgs-rt-rong__dan {
	font-size: 16px;
	line-height: 1.75;
	color: var(--xam);
	margin: 16px auto 0;
	max-width: 44ch;
}

.tgs-rt .tgs-rt-rong .tgs-rt-nut { margin-top: 32px; }

/* =============================================================================
   5 · DẢI ẢNH
   ========================================================================== */

.tgs-rt .tgs-rt-dai {
	min-height: max(42vh, 300px);
	background: var(--muc) center 58% / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}

/* =============================================================================
   6 · SIZING
   ========================================================================== */

.tgs-rt .tgs-rt-size { background: var(--washi); padding: 140px 0; }

.tgs-rt .tgs-rt-size__doi {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 80px;
	align-items: center;
}

.tgs-rt .tgs-rt-size__tieu {
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.08;
	margin: 24px 0 0;
	text-transform: none;
}

.tgs-rt .tgs-rt-size__dan {
	font-size: 19px;
	line-height: 1.75;
	color: var(--xam);
	margin: 0;
	max-width: 46ch;
}

.tgs-rt .tgs-rt-size .tgs-rt-nut { margin-top: 32px; }

/* =============================================================================
   TRANG CHI TIẾT SẢN PHẨM
   ========================================================================== */

.tgs-rt .tgs-rt-sp { background: var(--nga); padding: 132px 0 0; }

.tgs-rt .tgs-rt-duong {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--xam);
}

.tgs-rt .tgs-rt-duong a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(11,11,11,.3);
	padding-bottom: 3px;
	transition: color .3s ease;
}

.tgs-rt .tgs-rt-duong a:hover { color: var(--son); }

.tgs-rt .tgs-rt-sp__doi {
	margin-top: 36px;
	display: grid;
	grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
	gap: 72px;
	align-items: start;
	padding-bottom: 132px;
}

.tgs-rt .tgs-rt-sp__khung {
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
	background: var(--washi);
}

.tgs-rt .tgs-rt-sp__anh { width: 100%; height: 100%; object-fit: cover; }

.tgs-rt .tgs-rt-sp__nho {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 12px;
	margin-top: 12px;
}

.tgs-rt .tgs-rt-sp__o {
	width: 100%;
	aspect-ratio: 1/1;
	background-size: cover;
	background-position: 50% 50%;
	display: block;
	opacity: .62;
	outline: 1px solid transparent;
	outline-offset: -1px;
	transition: opacity .35s ease, outline-color .35s ease;
}

.tgs-rt .tgs-rt-sp__o.dang { opacity: 1; outline-color: var(--muc); }

.tgs-rt .tgs-rt-sp__bo {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--son);
	margin: 0;
}

.tgs-rt .tgs-rt-sp__ten {
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: clamp(32px, 3.8vw, 52px);
	line-height: 1.06;
	margin: 18px 0 0;
	text-transform: none;
}

.tgs-rt .tgs-rt-sp__mo {
	font-size: 17px;
	line-height: 1.7;
	color: var(--xam);
	margin: 18px 0 0;
	max-width: 46ch;
}

.tgs-rt .tgs-rt-sp__ke {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
	padding: 18px 0;
	border-top: 1px solid var(--ke);
	border-bottom: 1px solid var(--ke);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--xam);
}

.tgs-rt .tgs-rt-sp__vach { width: 1px; height: 18px; background: var(--ke); display: block; }

.tgs-rt .tgs-rt-sp__nhan-co {
	font-size: 9.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--xam);
	margin: 34px 0 0;
}

.tgs-rt .tgs-rt-sp__co { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }

/*
 * 44px là NGƯỠNG BẮT BUỘC, không phải cho đẹp: README ghi "44px minimum
 * targets". Ô cỡ giày là thứ người ta bấm trên điện thoại.
 */
.tgs-rt .tgs-rt-sp__so {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	font-size: 12.5px;
	border: 1px solid var(--vien-nhat);
	color: var(--xam);
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.tgs-rt .tgs-rt-sp__so:hover { border-color: var(--muc); color: var(--muc); }
.tgs-rt .tgs-rt-sp__so[aria-pressed="true"] { background: var(--muc); border-color: var(--muc); color: var(--nga); }

.tgs-rt .tgs-rt-sp__giu {
	font-size: 13px;
	line-height: 1.7;
	color: var(--xam);
	margin: 18px 0 0;
	max-width: 46ch;
}

.tgs-rt .tgs-rt-sp__nut-hang { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.tgs-rt .tgs-rt-sp__nut-hang .tgs-rt-nut { margin-top: 0; }

/* Accordion */
.tgs-rt .tgs-rt-xep { margin-top: 44px; border-top: 1px solid var(--ke); }

.tgs-rt .tgs-rt-xep__dau {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px solid var(--ke-mo);
	font-size: 14.5px;
	color: var(--xam);
	transition: color .3s ease;
}

.tgs-rt .tgs-rt-xep__muc.dang .tgs-rt-xep__dau { color: var(--muc); }

.tgs-rt .tgs-rt-xep__dau-cong {
	font-size: 17px;
	line-height: 1;
	color: var(--son);
	transition: transform .3s ease;
}

.tgs-rt .tgs-rt-xep__muc.dang .tgs-rt-xep__dau-cong { transform: rotate(45deg); }

.tgs-rt .tgs-rt-xep__than p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--xam);
	margin: 0;
	padding: 18px 0 24px;
	border-bottom: 1px solid var(--ke-mo);
	max-width: 52ch;
}

/* Phối màu khác */
.tgs-rt .tgs-rt-khac { background: var(--washi); padding: 120px 0; }

.tgs-rt .tgs-rt-khac__ds {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 24px;
	margin-top: 40px;
}

.tgs-rt .tgs-rt-khac__muc { display: block; text-decoration: none; color: inherit; }

.tgs-rt .tgs-rt-khac__khung {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	aspect-ratio: 1/1;
	overflow: hidden;
	background: var(--nga);
}

.tgs-rt .tgs-rt-khac__khung img { width: 100%; height: 100%; object-fit: cover; }

.tgs-rt .tgs-rt-khac__ten {
	display: block;
	font-family: 'Noto Serif Display', Georgia, serif;
	font-weight: 300;
	font-size: 20px;
	margin-top: 16px;
}

.tgs-rt .tgs-rt-khac__mo { display: block; font-size: 13.5px; color: var(--xam); margin-top: 7px; }

/* =============================================================================
   ĐÁP ỨNG — ba mốc của README (1180 / 1000 / 620), cộng mốc 860 của theme
   ========================================================================== */

@media (max-width: 1180px) {
	.tgs-rt .tgs-rt-luoi { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1000px) {
	/* Thanh lọc thôi dính: ở khổ này nó chiếm quá nhiều chiều cao màn hình. */
	.tgs-rt .tgs-rt-loc { position: static; top: auto; }
	.admin-bar .tgs-rt .tgs-rt-loc { top: auto; }

	.tgs-rt .tgs-rt-chuyen__ds { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.tgs-rt .tgs-rt-sp__doi { grid-template-columns: minmax(0,1fr); gap: 48px; }
	.tgs-rt .tgs-rt-size__doi { grid-template-columns: minmax(0,1fr); gap: 48px; }
}

@media (max-width: 860px) {
	.tgs-rt { --le: 20px; }

	.tgs-rt .tgs-rt-chuyen { padding-top: 72px; }
	.tgs-rt .tgs-rt-kho { padding: 48px 0 96px; }
	.tgs-rt .tgs-rt-size { padding: 96px 0; }
	.tgs-rt .tgs-rt-sp { padding-top: 104px; }
	.tgs-rt .tgs-rt-sp__doi { padding-bottom: 96px; }
	.tgs-rt .tgs-rt-khac { padding: 96px 0; }

	/* Đếm kết quả xuống hàng riêng, nếu không hàng nút bị ép vỡ. */
	.tgs-rt .tgs-rt-loc__trong { flex-wrap: wrap; gap: 12px; }
	.tgs-rt .tgs-rt-mat { font-size: 16px; letter-spacing: .16em; }
	.tgs-rt .tgs-rt-dan { font-size: 17px; }
}

@media (max-width: 620px) {
	.tgs-rt .tgs-rt-luoi,
	.tgs-rt .tgs-rt-chuyen__ds,
	.tgs-rt .tgs-rt-khac__ds { grid-template-columns: minmax(0,1fr); }

	.tgs-rt .tgs-rt-rong { padding: 48px 24px; }
}