@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@300;400&family=Noto+Serif+JP:wght@300;400&display=swap');

/*
 * TOGASHYAMO World — CSS RIENG cho page-story.php.
 *
 * TEN MOI HOAN TOAN (tien to .tgw-), khong sua mot dong nao trong pages.css,
 * layout.css hay components.css: bay trang kia dang chay tren do.
 *
 * VI SAO CO @import PHONG: Noto Serif Display chi duoc nap trong tg26_assets(),
 * ma ham do CHI chay tren page-front2026.php. Trang nay khong duoc sua
 * inc/tg2026.php nen font phai tu di kem — thieu font that thi trinh duyet
 * tong hop gia, chu day len khac han ban thiet ke.
 */

.tgw {
	--tgw-nen: #F3F0E8;      /* nen nga */
	--tgw-muc: #0B0B0B;      /* muc */
	--tgw-son: #B03A1E;      /* son tren nen sang */
	--tgw-son-toi: #F13708;  /* son tren nen toi */
	--tgw-xam: #4A4741;
	--tgw-serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;

	background: var(--tgw-nen);
	color: var(--tgw-muc);
}

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

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

.tgw-khung {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

/* ===== 12.1 HERO ======================================================== */

.tgw-hero {
	position: relative;
	min-height: max(78vh, 560px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;  /* noi dung can day */
	padding: 0 56px 80px;
	overflow: hidden;
	background: var(--tgw-muc);
}

/* Ken-burns 30s. Ten rieng tgw-drift de khong dung do voi keyframes cua theme. */
.tgw-hero__anh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 66% 50%;
	animation: tgw-drift 30s ease-in-out infinite alternate;
	will-change: transform;
}

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

.tgw-hero__phu {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,11,11,.6) 0%, rgba(11,11,11,.2) 40%, rgba(11,11,11,.9) 100%);
}

.tgw-hero__trong {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

/* Ba phan tu hien dan. forwards de giu trang thai cuoi, khong nhay lai. */
@keyframes tgw-rise {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}

.tgw-len {
	opacity: 0;
	animation: tgw-rise 1.1s cubic-bezier(.16, 1, .3, 1) forwards;
}

.tgw-len--1 { animation-delay: .1s; }
.tgw-len--2 { animation-delay: .28s; }
.tgw-len--3 { animation-delay: .48s; }

.tgw-hero__nhan {
	margin: 0 0 22px;
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--tgw-son-toi);
}

.tgw-hero__h1 {
	margin: 0 0 26px;
	font-family: var(--tgw-serif);
	font-weight: 300;
	font-size: clamp(44px, 6.4vw, 92px);
	line-height: 1;
	color: #F3F0E8;
}

.tgw-hero__dan {
	margin: 0;
	max-width: 52ch;
	font-size: 19px;
	line-height: 1.75;
	color: rgba(243, 240, 232, .82);
}

/* Tat hieu ung that. Phai tra opacity ve 1, khong thi ba phan tu tang hinh. */
@media (prefers-reduced-motion: reduce) {
	.tgw-hero__anh { animation: none; transform: scale(1.06); }
	.tgw-len { opacity: 1; animation: none; }
}

/* ===== 12.2 NARRATIVE =================================================== */

.tgw-truyen { background: var(--tgw-nen); padding: 150px 0; }

.tgw-truyen__dau {
	max-width: 900px;
	margin: 0 auto 56px;
	text-align: center;
}

.tgw-truyen__mat {
	margin: 0 0 18px;
	font-family: var(--tgw-serif);
	font-weight: 300;
	font-size: clamp(24px, 2.8vw, 40px);
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tgw-son);
}

.tgw-truyen__h2 {
	margin: 0;
	font-family: var(--tgw-serif);
	font-weight: 300;
	font-size: clamp(18px, 2.2vw, 30px);
	line-height: 1.3;
	color: var(--tgw-xam);
}

/* MOT cot can giua. Khong timeline, khong so thu tu, khong anh. */
.tgw-truyen__than {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.tgw-truyen__than p {
	margin: 0 0 26px;
	font-size: 19px;
	line-height: 1.75;
	color: rgba(11, 11, 11, .78);
}

/* Mau doan xen ke. */
.tgw-truyen__than p:nth-child(even) { color: var(--tgw-xam); }
.tgw-truyen__than p:last-child { margin-bottom: 0; }

/* ===== 12.3 CAP RETAIL / PRO ============================================ */

#tw-pair {
	margin: 96px auto 0;
	padding-top: 64px;
	border-top: 1px solid rgba(11, 11, 11, .2);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 48px;
	align-items: stretch;
}

/* Khoi chu chiem phan con lai (flex:1) nen HAI ANH luon can day thang hang. */
.tgw-cot {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tgw-cot__chu { flex: 1; }

.tgw-nhan {
	margin: 0 0 14px;
	font-size: 22px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tgw-son);
}

.tgw-cot h3 {
	margin: 0 0 18px;
	font-family: var(--tgw-serif);
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.14;
	color: var(--tgw-muc);
}

.tgw-nghieng {
	margin: 0 0 22px;
	font-style: italic;
	font-size: 19px;
	line-height: 1.6;
	color: var(--tgw-xam);
}

.tgw-doan {
	margin: 0 0 22px;
	font-size: 19px;
	line-height: 1.75;
	color: rgba(11, 11, 11, .78);
}

.tgw-cot--phai .tgw-doan { max-width: 62ch; }

.tgw-ket {
	margin: 0 0 26px;
	font-size: 19px;
	line-height: 1.75;
	color: var(--tgw-muc);
}

/* CTA. Ban <span> la truong hop trang dich chua ton tai — co tinh khong bam duoc. */
.tgw-nut {
	display: inline-block;
	padding: 16px 28px;
	border: 1px solid rgba(11, 11, 11, .4);
	color: var(--tgw-son);
	background: transparent;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .3s ease, color .3s ease;
}

a.tgw-nut:hover,
a.tgw-nut:focus-visible {
	background: var(--tgw-son);
	color: var(--tgw-nen);
}

span.tgw-nut { opacity: .55; cursor: default; }

.tgw-cot__anh { margin-top: 40px; }

.tgw-cot--trai .tgw-cot__anh img {
	width: 100%;
	max-width: 515px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.tgw-cot--phai .tgw-cot__anh img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 45%;
}

.tgw-nhat {
	margin: 20px 0 0;
	font-family: 'Noto Serif JP', var(--tgw-serif);
	font-weight: 300;
	font-size: 22px;
	line-height: 1.6;
	color: var(--tgw-xam);
}

/* ===== 12.4 DAI ANH ===================================================== */

/* Khong chu, khong chuyen dong. Mep tren tan dan de khong cat ngang nen nga. */
.tgw-dai {
	min-height: max(42vh, 300px);
	background-color: var(--tgw-muc);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 58%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
}

/* ===== 12.5 COMMUNITY SPACE ============================================= */

.tgw-cd { background: var(--tgw-nen); padding: 140px 0; }

.tgw-cd__luoi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.tgw-cd__nhan {
	margin: 0 0 18px;
	font-size: 22px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tgw-son);
}

.tgw-cd__h2 {
	margin: 0;
	font-family: var(--tgw-serif);
	font-weight: 300;
	font-size: clamp(32px, 3.7vw, 52px);
	line-height: 1.08;
	color: var(--tgw-muc);
}

.tgw-cd__dan {
	margin: 0 0 34px;
	max-width: 44ch;
	font-size: 19px;
	line-height: 1.75;
	text-align: justify;
	color: rgba(11, 11, 11, .78);
}

.tgw-nut--cd {
	padding: 22px 42px;
	background: var(--tgw-nen);
	border: 1px solid var(--tgw-muc);
	color: var(--tgw-muc);
}

a.tgw-nut--cd:hover,
a.tgw-nut--cd:focus-visible {
	background: var(--tgw-muc);
	color: var(--tgw-nen);
}

/* ===== RESPONSIVE ======================================================= */

@media (max-width: 1000px) {
	#tw-pair { grid-template-columns: 1fr; gap: 48px; }
	.tgw-cd__luoi { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 860px) {
	.tgw-khung { padding: 0 20px; }
	.tgw-hero { padding: 0 20px 64px; }
}

@media (max-width: 600px) {
	.tgw-truyen { padding: 96px 0; }
	.tgw-cd { padding: 96px 0; }
	#tw-pair { gap: 44px; }
}