/* =============================================================================
   TOGASHYAMO — TRANG CHỦ 2026, BẢN R2 (13/09/2026)
   =============================================================================

   THAY CHO assets/css/tg2026.css. Tệp cũ GIỮ NGUYÊN trên đĩa, không xoá:
   edge cache giữ tệp tĩnh 7 ngày, khách nào đang có bản cũ trong cache vẫn
   phải tải được nó cho tới khi hết hạn. Đổi TÊN TỆP là cách duy nhất để bản
   mới tới được trình duyệt ngay — `?ver=` không ăn với edge cache này.
   Lần sửa sau cũng phải đổi tên (tg2026-r3.css…), đừng ghi đè tệp này.

   NGUỒN: `TOGASHYAMO-Website.dc.html` trong gói Claude Design mới — MÃ, không
   phải README. README trong gói còn mô tả bản cũ ở bảng typography (nhãn mục
   10px, thân bài 15.5px) trong khi mã đang vẽ nhãn mục 22px và thân bài 19px.
   Mọi con số dưới đây đo từ thuộc tính `style` trong mã đó.

   KHÁC BẢN CŨ, tóm tắt: bỏ toàn bộ trục thời gian Our Story, bỏ section
   Signature Collection, bỏ hàng chip màu, bỏ ô nhập email; nền Community đổi
   sang washi; cỡ chữ nhãn mục và thân bài tăng; thân bài căn đều hai bên.

   PHẠM VI: chỉ áp trong `.tg26` — tức chỉ trang dùng page-front2026.php.

   MÀU NHẤN theo NỀN, không phải theo hai màu thương hiệu:
     · nền tối  → #F13708 (4.96:1 — đúng màu logo)
     · nền sáng → #B03A1E (5.9:1 — cùng tông, đậm hơn)
   #D83A22 chỉ còn ở vật trang trí không mang chữ.

   BÁN KÍNH BO: 0 ở mọi nơi trừ hình tròn.
   ========================================================================== */

.tg26 {
	--ink: #0B0B0B;
	--ivory: #F3F0E8;
	--washi: #E7E1D5;
	--nhan-toi: #F13708;
	--nhan-sang: #B03A1E;
	--vermilion: #D83A22;
	--chu-sang: rgba(11,11,11,.78);
	--chu-toi: rgba(243,240,232,.78);
	--mo-sang: #4A4741;
	--mo-chang: #6B675F;
	--nen-khung: #141311;
	--vach-sang: rgba(11,11,11,.2);
	--nhip: cubic-bezier(.16,1,.3,1);
	--khung: 1440px;
	--le: 56px;

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

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

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

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

/* --- Chữ ------------------------------------------------------------------
   Thân bài căn đều hai bên + tự gạch nối, đúng bản thiết kế (mọi thẻ <p> thân
   bài trong mã đều có text-align:justify;hyphens:auto).
   -------------------------------------------------------------------------- */

.tg26 .tg-h2,
.tg26 .tg-lon,
.tg26 .tg-nghieng,
.tg26 .tg-story__hieu,
.tg26 .tg-story__phu { font-family: 'Noto Serif Display', Georgia, serif; font-weight: 300; }

.tg26 .tg-h2 {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.06;
	text-transform: uppercase;
	margin: 26px 0 0;
}

.tg26 .tg-h2--retail { font-size: clamp(34px, 4vw, 58px); line-height: 1.04; white-space: nowrap; }
.tg26 .tg-h2--pro    { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.08; }
.tg26 .tg-h2--cd     { font-size: clamp(32px, 3.7vw, 52px); }

.tg26 .tg-h2--dong {
	font-size: clamp(46px, 6.8vw, 96px);
	line-height: 1;
	letter-spacing: -.01em;
	margin: 0;
}

/* Nhãn mục. 22px là con số của bản thiết kế mới — bản cũ 10px. */
.tg26 .tg-mat {
	font-size: 22px;
	font-weight: 300;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0;
	max-width: none;
	text-align: left;
}

.tg26 .tg-nghieng {
	font-style: italic;
	font-size: 21px;
	line-height: 1.5;
	margin: 22px 0 0;
	max-width: none;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.tg26 .tg-nghieng--to { font-size: 22px; }

.tg26 p {
	font-size: 19px;
	line-height: 1.75;
	margin: 26px 0 0;
	max-width: 52ch;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.tg26 .tg-tren-toi { color: var(--chu-toi); }
.tg26 .tg-tren-sang { color: var(--chu-sang); }

/* Câu kết / câu khoá đặt bằng serif, cỡ lớn. */
.tg26 .tg-lon {
	font-size: 26px;
	line-height: 1.42;
	margin: 44px 0 0;
	max-width: none;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.tg26 .tg-lon--khoa { font-size: 28px; line-height: 1.38; margin: 36px 0 0; max-width: 24ch; }
.tg26 .tg-lon--ket  { font-size: 24px; margin: 40px 0 0; max-width: 30ch; }

/* Dòng chú nhỏ dưới nút Pro Space. */
.tg26 .tg-chu-nho {
	font-size: 12px;
	line-height: 1.7;
	color: rgba(243,240,232,.6);
	margin: 26px 0 0;
	max-width: 42ch;
}

/* --- Nút ------------------------------------------------------------------
   Trang chưa tồn tại → template in <span class="… --tat"> thay cho <a>. Ở đó
   nút vẫn giữ hình dáng nhưng nhạt đi và không có con trỏ bàn tay: khách nhìn
   là biết chưa bấm được, thay vì bấm vào một link chết.
   -------------------------------------------------------------------------- */

.tg26 .tg-nut {
	display: inline-block;
	margin-top: 40px;
	padding: 17px 32px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.tg26 .tg-nut--muc { background: var(--ink); color: var(--ivory); }
.tg26 a.tg-nut--muc:hover,
.tg26 a.tg-nut--muc:focus-visible { background: var(--vermilion); }

.tg26 .tg-nut--cam { background: var(--nhan-toi); color: var(--ink); }
.tg26 a.tg-nut--cam:hover,
.tg26 a.tg-nut--cam:focus-visible { background: var(--ivory); color: var(--ink); }

.tg26 .tg-nut--dac { margin-top: 38px; background: var(--ivory); color: var(--ink); }
.tg26 a.tg-nut--dac:hover,
.tg26 a.tg-nut--dac:focus-visible { background: var(--nhan-toi); color: var(--ink); }

/* Nút Community: to hơn hẳn, viền mảnh trên nền washi. */
.tg26 .tg-nut--vong {
	margin-top: 36px;
	padding: 22px 42px;
	font-size: 15px;
	letter-spacing: .2em;
	border-color: rgba(11,11,11,.4);
	color: var(--nhan-sang);
	background: transparent;
}

.tg26 a.tg-nut--vong:hover,
.tg26 a.tg-nut--vong:focus-visible { background: var(--nhan-sang); border-color: var(--nhan-sang); color: var(--ivory); }

.tg26 .tg-nut--tat { opacity: .45; cursor: default; }

/* Liên kết gạch chân ở cuối TOGASHYAMO World. */
.tg26 .tg-lien-ket {
	display: inline-block;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	border-bottom: 1px solid rgba(11,11,11,.4);
	padding-bottom: 7px;
	transition: color .4s ease, border-color .4s ease;
}

.tg26 a.tg-lien-ket:hover,
.tg26 a.tg-lien-ket:focus-visible { color: var(--nhan-sang); border-color: var(--nhan-sang); }

.tg26 .tg-lien-ket--tat { opacity: .45; cursor: default; }

/* --- Hiện dần khi cuộn ----------------------------------------------------
   Chỉ giấu khi JS đã gắn `.tg26-co-js`. Không có JS thì nội dung hiện bình
   thường — nội dung không được phụ thuộc vào một tệp script.
   -------------------------------------------------------------------------- */

.tg26-co-js .tg26 [data-hien] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.05s var(--nhip), transform 1.05s var(--nhip);
}

.tg26-co-js .tg26 [data-hien].da-hien { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.tg26-co-js .tg26 [data-hien] { opacity: 1 !important; transform: none !important; }
	.tg26 * { animation: none !important; }
}

/* =============================================================================
   2. TOGASHYAMO WORLD (Text 1) — một cột giữa trang
   =============================================================================
   Bản cũ dựng trục thời gian 4 chặng, hai cột so le, mỗi chặng một ảnh vuông.
   Bản mới bỏ hết: một cột chữ rộng 900px giữa trang. Nhan đề mục LỚN HƠN dòng
   dưới nó (40px so với 30px) — cố ý trong bản thiết kế, không phải nhầm.
   ========================================================================== */

.tg26 .tg-story { background: var(--ivory); color: var(--ink); padding: 96px 0 150px; }

.tg26 .tg-story__dau { text-align: center; margin: 0 auto; }

.tg26 .tg-story__hieu {
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nhan-sang);
	margin: 0;
	max-width: none;
	text-align: center;
}

.tg26 .tg-story__phu {
	font-size: clamp(18px, 2.2vw, 30px);
	line-height: 1.3;
	color: var(--mo-sang);
	margin: 20px 0 0;
	text-transform: none;
}

.tg26 .tg-story__than { max-width: 900px; margin: 44px auto 0; }

.tg26 .tg-chang__doan {
	font-size: 19px;
	line-height: 1.75;
	margin: 0 0 12px;
	max-width: none;
	text-align: center;
	text-wrap: balance;
	color: rgba(11,11,11,.82);
	transition: color .6s ease;
}

/* Chặng đang đọc giữ màu đậm, các chặng khác nhạt đi. Chỉ làm khi có JS —
   không có JS thì mọi đoạn đều ở màu đậm, đọc vẫn đủ tương phản. */
.tg26-co-js .tg26 .tg-chang:not(.dang-xem) .tg-chang__doan { color: var(--mo-chang); }

.tg26 .tg-story__ket { margin: 44px auto 0; text-align: center; }

.tg26 .tg-story__ket p {
	font-size: clamp(18px, 2vw, 28px);
	line-height: 1.5;
	letter-spacing: .01em;
	margin: 0;
	max-width: none;
	text-align: center;
}

.tg26 .tg-story__ket--mo { color: var(--mo-sang); }

.tg26 .tg-story__di { text-align: center; margin: 56px auto 0; }

/* =============================================================================
   3. RETAIL SPACE (Text 2)
   ========================================================================== */

.tg26 .tg-retail { background: var(--washi); color: var(--ink); padding: 170px 0; }
.tg26 .tg-retail .tg-mat { color: var(--nhan-sang); }
.tg26 .tg-retail .tg-nghieng { color: var(--nhan-sang); }

.tg26 .tg-doi {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
	gap: 96px;
	align-items: center;
}

.tg26 .tg-retail__anh-boc { position: relative; }

.tg26 .tg-retail__anh { width: 100%; height: 760px; object-fit: cover; object-position: 50% 42%; }

.tg26 .tg-retail__tron {
	position: absolute;
	left: -34px;
	bottom: 56px;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--vermilion);
}

/* =============================================================================
   4. PRO SPACE (Text 3) — khảm 5 ô
   ========================================================================== */

.tg26 .tg-pro { background: var(--ink); padding: 170px 0; }
.tg26 .tg-pro .tg-mat { color: var(--nhan-toi); }
.tg26 .tg-pro .tg-nghieng { color: var(--nhan-toi); }

.tg26 .tg-doi--pro { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: 64px; }

.tg26 .tg-kham {
	display: grid;
	grid-template-columns: repeat(5, minmax(0,1fr));
	grid-template-rows: 1.2fr 1.2fr 1fr;
	gap: 14px;
	aspect-ratio: 5/4;
}

.tg26 .tg-kham img { width: 100%; height: 100%; object-fit: cover; }

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

.tg26 .tg-dai {
	min-height: max(42vh, 300px);
	background: var(--ink) 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. CREATE YOUR OWN (Text 4) — băng chuyền mờ chồng
   =============================================================================
   BỎ hàng chip màu so với bản cũ: bản thiết kế mới chỉ còn hàng vạch (pip)
   dưới khung ảnh. Dữ liệu màu đế / màu quai cũng đã gỡ khỏi template.
   ========================================================================== */

.tg26 .tg-create { background: var(--ink); padding: 150px 0; }
.tg26 .tg-create .tg-mat { color: var(--nhan-toi); }
.tg26 .tg-create .tg-nghieng { color: var(--nhan-toi); }
.tg26 .tg-doi--create { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 80px; }

.tg26 .tg-bang {
	position: relative;
	aspect-ratio: 4/5;
	background: var(--nen-khung);
	overflow: hidden;
}

.tg26 .tg-bang img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .9s var(--nhip);
}

.tg26 .tg-bang img.dang { opacity: 1; }

.tg26 .tg-bang__chu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 60px 24px 26px;
	background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,.72) 42%, rgba(11,11,11,.9) 100%);
	z-index: 2;
}

.tg26 .tg-bang__so { display: block; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ivory); }

.tg26 .tg-bang__ten {
	display: block;
	font-family: 'Noto Serif Display', Georgia, serif;
	font-size: 19px;
	font-weight: 300;
	color: var(--ivory);
	margin-top: 7px;
}

.tg26 .tg-cham-hang { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 22px; }

.tg26 .tg-cham {
	height: 2px;
	width: 12px;
	background: rgba(243,240,232,.32);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width .45s var(--nhip), background .45s ease;
}

.tg26 .tg-cham.dang { width: 30px; background: var(--nhan-toi); }

/* =============================================================================
   7. COMMUNITY (Text 6)
   =============================================================================
   Nền đổi từ mực sang washi so với bản cũ, và ô nhập email bị bỏ — bản thiết
   kế mới chỉ còn một nút trỏ sang trang Contact.
   ========================================================================== */

.tg26 .tg-cong-dong { background: var(--washi); color: var(--ink); padding: 140px 0; }
.tg26 .tg-cong-dong .tg-mat { color: var(--nhan-sang); }
.tg26 .tg-doi--cd { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 80px; }
.tg26 .tg-cd__dan { margin: 0; max-width: 44ch; }

/* =============================================================================
   8. BĂNG KẾT (Text 7)
   ========================================================================== */

.tg26 .tg-ket {
	position: relative;
	min-height: max(88vh, 620px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ink);
}

.tg26 .tg-ket__anh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
	animation: tg-troi 30s ease-in-out infinite alternate;
}

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

.tg26 .tg-ket__phu {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(11,11,11,.9) 0%, rgba(11,11,11,.55) 48%, rgba(11,11,11,.2) 100%);
}

.tg26 .tg-ket__trong { position: relative; z-index: 2; max-width: var(--khung); margin: 0 auto; width: 100%; padding: 0 var(--le); }

.tg26 .tg-ket__vach { width: 88px; height: 1px; background: var(--nhan-toi); margin: 34px 0 0; }

.tg26 .tg-ket__cap {
	font-family: 'Noto Serif Display', Georgia, serif;
	font-size: clamp(19px, 2.1vw, 26px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--ivory);
	margin: 32px 0 0;
	max-width: none;
	text-align: left;
}

.tg26 .tg-ket__cap--mo { color: rgba(243,240,232,.75); margin: 8px 0 0; }

/* =============================================================================
   ĐÁP ỨNG
   =============================================================================
   Hai mốc của bản thiết kế (1000px, 860px) cộng mốc điện thoại bản thiết kế
   còn thiếu. Lưu ý `!important` ở khối khảm: template in `grid-area` thẳng vào
   thuộc tính `style` của từng <img>, mà style trong thẻ mạnh hơn mọi luật
   trong file CSS — không có `!important` thì ở khổ hẹp trình duyệt vẫn sinh ra
   5 cột, ba trong số đó rộng 0px và ba ảnh coi như mất. Đã đo ở 375px.
   ========================================================================== */

@media (max-width: 1000px) {
	.tg26 .tg-doi,
	.tg26 .tg-doi--pro,
	.tg26 .tg-doi--create,
	.tg26 .tg-doi--cd { grid-template-columns: 1fr; gap: 48px; }

	.tg26 .tg-retail__anh { height: 520px; }
	.tg26 .tg-kham { aspect-ratio: 4/5; }
}

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

	.tg26 .tg-story { padding: 80px 0 90px; }
	.tg26 .tg-retail,
	.tg26 .tg-pro { padding: 110px 0; }
	.tg26 .tg-create { padding: 100px 0; }
	.tg26 .tg-cong-dong { padding: 96px 0; }

	/* Bản thiết kế để H2 Retail nowrap — ở khổ hẹp sẽ tràn ngang. Cho ngắt. */
	.tg26 .tg-h2--retail { white-space: normal; }

	/* Căn đều hai bên ở cột hẹp tạo khe trắng rất xấu. Về căn trái. */
	.tg26 p,
	.tg26 .tg-nghieng,
	.tg26 .tg-lon { text-align: left; }

	.tg26 .tg-chang__doan,
	.tg26 .tg-story__ket p { text-align: center; }

	.tg26 .tg-kham { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3,1fr); aspect-ratio: 3/4; gap: 12px; }
	.tg26 .tg-kham img:nth-child(1) { grid-area: 1 / 1 / 2 / 3 !important; }
	.tg26 .tg-kham img:nth-child(2) { grid-area: 2 / 1 / 3 / 2 !important; }
	.tg26 .tg-kham img:nth-child(3) { grid-area: 2 / 2 / 3 / 3 !important; }
	.tg26 .tg-kham img:nth-child(4) { grid-area: 3 / 1 / 4 / 2 !important; }
	.tg26 .tg-kham img:nth-child(5) { grid-area: 3 / 2 / 4 / 3 !important; }

	/* Nhãn mục 22px trên điện thoại chiếm gần hết bề ngang — hạ xuống. */
	.tg26 .tg-mat { font-size: 16px; letter-spacing: .16em; }

	.tg26 .tg-nut--vong { font-size: 13px; padding: 18px 30px; }
}

/* Vùng bấm trên điện thoại: vạch chuyển màu cao đúng 2px, ngón tay không bấm
   trúng. Không đổi hình thức — chỉ nới vùng bấm bằng một lớp phủ trong suốt. */
@media (max-width: 860px) {
	.tg26 .tg-cham { position: relative; }

	.tg26 .tg-cham::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -15px;
		bottom: -15px;
	}

	.tg26 .tg-cham-hang { padding: 15px 0; }
}