/* ---------------------------------------------------------------------------
 * TOGASHYAMO — HERO 2026 "MỞ BÌA" (cánh cửa có bản lề)
 *
 * NGUỒN: /togashyamo-hieu-ung-mo-rem-v3.html — bản khách duyệt 13/09/2026.
 * Mọi thông số, keyframes, thứ tự lớp đều CHÉP từ bản đó, không sáng tác lại.
 *
 * TÊN TỆP MỚI là bắt buộc: edge cache 7 ngày, tham số `?ver=` không ăn. Sửa
 * hiệu ứng lần sau phải đổi tên tệp lần nữa (hero-2026-2.css…), đừng ghi đè.
 *
 * KHÁC BẢN v3 — ĐÚNG MỘT ĐIỂM KIẾN TRÚC:
 *   v3 khoá cứng khung `aspect-ratio:1200/675`. Hero thật phải full-bleed nên
 *   sân khấu 16:9 được GIỮ NGUYÊN rồi phóng to để phủ kín section (xem
 *   `.tgs-hero26__san`). Nhờ vậy --dep-x/y/w giữ y nguyên số đã chốt.
 *   Khối chữ + 2 nút CTA và tấm bìa nằm NGOÀI sân khấu:
 *     · chữ ngoài sân khấu để luôn đúng lề container dù sân khấu bị cắt;
 *     · bìa ngoài sân khấu vì bìa phải nằm TRÊN chữ (chữ hiện dần ra sau hai
 *       cánh cửa đang mở — đúng như v3, ở đó .chu z-index 5 < .bia z-index 6).
 *       Nếu để bìa trong sân khấu thì ảnh nền đục của sân khấu sẽ che mất chữ.
 * ------------------------------------------------------------------------- */

/* TẮT HERO CŨ.
 * inc/hero-wipe.php vẫn enqueue hero-wipe-2.css / hero-wipe-anim-2.css /
 * hero-wipe-nen.css theo điều kiện is_front_page(). Tệp đó NẰM TRONG DANH SÁCH
 * CẤM SỬA của phiên này, nên không gỡ enqueue được — gỡ enqueue là phải ghi đè
 * cả inc/hero-wipe.php. Markup hero cũ đã bỏ khỏi page-front2026.php rồi; luật
 * dưới đây là chốt chặn phòng khi template-parts/hero-wipe.php còn được gọi ở
 * chỗ khác (front-page.php cũ) và hiện chồng lên hero mới.
 */
.tgs-hero-wipe { display: none !important; }

/* ---------- SECTION ---------- */
.tgs-hero26 {
	--nga: #F3F0E8;
	--son: #D83A22;
	--nhip: cubic-bezier(.16, 1, .3, 1);
	--deu: cubic-bezier(.55, .06, .24, 1);

	--tbia: 6000ms;   /* thời lượng bìa mở — CHỐT */
	--tre: 900ms;     /* trễ trước khi dép hiện — CHỐT */
	--tdep: 4000ms;   /* thời lượng dép + bóng + chữ — CHỐT */

	--dep-x: 52%;     /* toạ độ gốc bản 2 — dép đáp trùng khít bệ đá */
	--dep-y: 29.15%;
	--dep-w: 41.07%;

	--bong-x: 54.5%;
	--bong-y: 60.5%;
	--bong-w: 36%;
	--bong-h: 9%;
	--bong-mo: .62;

	--loc-sang: 1;    /* không lọc — ảnh dép đã đúng sáng của cảnh */
	--loc-tuong: 1;
	--loc-bh: 1;
	--loc-am: 0;

	--logo-w: 64%;    /* bề rộng logo, tính theo bề rộng MỘT cánh */

	position: relative;
	min-height: max(100vh, 720px);
	overflow: hidden;
	background: #14110f;
	color: var(--nga);
	perspective: 1700px;
}

/* SÂN KHẤU 16:9 PHÓNG TO ĐỂ PHỦ KÍN — thay cho object-fit:cover.
 * Màn rộng hơn 16:9  → vế `100%` thắng, sân khấu tràn ngang, thừa trên dưới bị
 *                      overflow:hidden của section cắt đều hai phía.
 * Màn hẹp hơn 16:9   → vế calc thắng, cắt hai bên.
 * Đúng hành vi `cover`, mà tỉ lệ trong sân khấu vẫn là 1200/675 nên mọi toạ độ
 * phần trăm bên trong không phải sửa một dòng.
 */
.tgs-hero26__san {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	aspect-ratio: 1200 / 675;
	width: max(100%, calc(max(100vh, 720px) * 1200 / 675));
	overflow: hidden;
	background: #1a1613;
}

.tgs-hero26__nen {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tgs-hero26__bong {
	position: absolute;
	z-index: 2;
	left: var(--bong-x);
	top: var(--bong-y);
	width: var(--bong-w);
	height: var(--bong-h);
	background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 70%);
	filter: blur(8px);
	opacity: 0;
	transform: scale(.4);
}

/* ĐÔI DÉP: chỉ phóng to, KHÔNG lật (bản 3 đã bỏ rotateX của bản 2) */
.tgs-hero26__bay {
	position: absolute;
	z-index: 3;
	left: var(--dep-x);
	top: var(--dep-y);
	width: var(--dep-w);
	opacity: 0;
	transform-origin: 50% 88%;
}

.tgs-hero26__bay img {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(var(--loc-sang)) contrast(var(--loc-tuong))
		saturate(var(--loc-bh)) sepia(var(--loc-am));
}

/* ---------- CHỮ HERO + 2 NÚT CTA (ngoài sân khấu) ---------- */
.tgs-hero26__chu {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	padding: 0 0 clamp(48px, 7vw, 84px);
	opacity: 0;
	pointer-events: none;
}

/* Container 1440 / padding 0 56px — bám lề chung của trang, thu lại trên máy
   hẹp bằng clamp để chữ không dính mép. */
.tgs-hero26__trong {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp(20px, 3.8vw, 56px);
	pointer-events: auto;
}

.tgs-hero26__nhan {
	margin: 0 0 clamp(10px, 1.4vw, 18px);
	font-size: clamp(8px, .72vw, 10px);
	letter-spacing: .30em;
	text-transform: uppercase;
	color: #F3F0E8B8;
}

.tgs-hero26__tieu {
	margin: 0;
	max-width: 13ch;
	font: 400 clamp(24px, 4.6vw, 66px)/1.06 Georgia, serif;
	text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
}

.tgs-hero26__dan {
	max-width: 34ch;
	margin: clamp(12px, 1.6vw, 20px) 0 0;
	font-size: clamp(11px, 1.05vw, 15px);
	line-height: 1.7;
	color: #F3F0E8D0;
}

/* Hai nút giữ lại từ hero cũ. Kiểu dáng dựng cục bộ chứ không mượn `.tg-nut`:
   luật `.tg-nut` trong tg2026.css bị bọc trong `.tg26`, mà hero nằm ngoài
   `.tg26` (cố ý — `.tg26 img{max-width:100%}` sẽ bóp ảnh dép). */
.tgs-hero26__nut-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: clamp(20px, 2.4vw, 32px) 0 0;
}

.tgs-hero26__nut {
	display: inline-block;
	padding: 14px 30px;
	border: 1px solid var(--nga);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .25s, color .25s;
}

.tgs-hero26__nut--dac {
	background: var(--nga);
	color: #0B0B0B;
}

.tgs-hero26__nut--dac:hover,
.tgs-hero26__nut--dac:focus-visible {
	background: transparent;
	color: var(--nga);
}

.tgs-hero26__nut--vien {
	background: transparent;
	color: var(--nga);
}

.tgs-hero26__nut--vien:hover,
.tgs-hero26__nut--vien:focus-visible {
	background: var(--nga);
	color: #0B0B0B;
}

/* ---------- BÌA: MỘT ẢNH CẮT ĐÔI ---------- */
.tgs-hero26__bia {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}

.tgs-hero26__canh {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	overflow: hidden;
	backface-visibility: hidden;
	background: var(--nga);
}

.tgs-hero26__canh--trai { left: 0; transform-origin: left center; }
.tgs-hero26__canh--phai { right: 0; transform-origin: right center; }

.tgs-hero26__anh-bia {
	position: absolute;
	top: 0;
	width: 200%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tgs-hero26__canh--trai .tgs-hero26__anh-bia { left: 0; }
.tgs-hero26__canh--phai .tgs-hero26__anh-bia { right: 0; }

.tgs-hero26__canh::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(11, 11, 11, .34), rgba(11, 11, 11, .52));
}

.tgs-hero26__canh::after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: 1px;
	z-index: 3;
	background: var(--son);
	opacity: .6;
}

.tgs-hero26__canh--trai::after { right: 0; }
.tgs-hero26__canh--phai::after { left: 0; }

/* LOGO ĐẶT NGAY ĐƯỜNG GẤP — mỗi cánh cắt đúng một nửa nhờ overflow:hidden */
.tgs-hero26__dau {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: var(--logo-w);
	height: auto;
	filter: drop-shadow(0 1px 10px rgba(243, 240, 232, .45));
}

.tgs-hero26__canh--trai .tgs-hero26__dau { right: 0; transform: translate(50%, -50%); }
.tgs-hero26__canh--phai .tgs-hero26__dau { left: 0; transform: translate(-50%, -50%); }

/* bìa sáng (vải noren): bỏ phủ tối, bỏ vệt son vì ảnh đã có khe vải thật */
.bia-sang .tgs-hero26__canh::before {
	background: linear-gradient(180deg, rgba(11, 11, 11, .02), rgba(11, 11, 11, .07));
}

.bia-sang .tgs-hero26__canh::after { opacity: 0; }

/* ---------- HOẠT CẢNH ----------
 * Chạy MẶC ĐỊNH bằng CSS, không chờ JS: máy tắt JS vẫn xem được đủ hiệu ứng.
 * JS chỉ làm một việc là HẠ xuống trạng thái cuối khi phiên này đã xem rồi
 * (xem assets/js/hero-2026.js).
 */
.tgs-hero26 .tgs-hero26__canh--trai { animation: rem-trai var(--tbia) var(--deu) forwards; }
.tgs-hero26 .tgs-hero26__canh--phai { animation: rem-phai var(--tbia) var(--deu) forwards; }

/* Kiểu đã chốt: CÁNH CỬA có bản lề. Chỉ đổi animation-name, giữ nguyên phần còn lại. */
.tgs-hero26.kieu-cua .tgs-hero26__canh--trai { animation-name: cua-trai; }
.tgs-hero26.kieu-cua .tgs-hero26__canh--phai { animation-name: cua-phai; }

.tgs-hero26 .tgs-hero26__bay { animation: phong var(--tdep) var(--deu) var(--tre) both; }
.tgs-hero26 .tgs-hero26__bong { animation: bong var(--tdep) var(--nhip) var(--tre) both; }
.tgs-hero26 .tgs-hero26__chu {
	animation: chu var(--tdep) var(--nhip) calc(var(--tre) + var(--tdep) * .5) both;
}

/* KIỂU 1 — RÈM VẢI: GIỮ LẠI THEO YÊU CẦU nhưng KHÔNG dùng (markup luôn có
   class `kieu-cua` nên hai keyframes dưới đây bị đè ngay). Để sẵn cho lần
   khách muốn đổi lại kiểu mà không phải dựng lại. */
@keyframes rem-trai {
	0%   { transform: translateX(0) skewY(0) rotateY(0); }
	18%  { transform: translateX(-6%) skewY(1.1deg) rotateY(-5deg); }
	80%  { transform: translateX(-99%) skewY(2.6deg) rotateY(-16deg); }
	100% { transform: translateX(-104%) skewY(1.6deg) rotateY(-16deg); opacity: 0; visibility: hidden; }
}

@keyframes rem-phai {
	0%   { transform: translateX(0) skewY(0) rotateY(0); }
	18%  { transform: translateX(6%) skewY(-1.1deg) rotateY(5deg); }
	80%  { transform: translateX(99%) skewY(-2.6deg) rotateY(16deg); }
	100% { transform: translateX(104%) skewY(-1.6deg) rotateY(16deg); opacity: 0; visibility: hidden; }
}

/* KIỂU 2 — CÁNH CỬA (đang dùng): bản lề ở mép ngoài */
@keyframes cua-trai {
	0%   { transform: rotateY(0); }
	84%  { transform: rotateY(-112deg); }
	100% { transform: rotateY(-118deg); opacity: 0; visibility: hidden; }
}

@keyframes cua-phai {
	0%   { transform: rotateY(0); }
	84%  { transform: rotateY(112deg); }
	100% { transform: rotateY(118deg); opacity: 0; visibility: hidden; }
}

@keyframes phong {
	0%   { opacity: 0; transform: translateY(5%) scale(.22); }
	18%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bong {
	0%, 22% { opacity: 0; transform: scale(.4); }
	88%     { opacity: var(--bong-mo); transform: scale(1.05); }
	100%    { opacity: var(--bong-mo); transform: scale(1); }
}

@keyframes chu {
	0%   { opacity: 0; transform: translateY(14px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ---------- TRẠNG THÁI CUỐI ----------
 * Phiên này đã xem rồi: bìa ẩn hẳn, dép + bóng + chữ hiện sẵn, không hoạt cảnh.
 */
.tgs-hero26--da-xem .tgs-hero26__canh { display: none; animation: none; }
.tgs-hero26--da-xem .tgs-hero26__bay { opacity: 1; transform: none; animation: none; }
.tgs-hero26--da-xem .tgs-hero26__bong { opacity: var(--bong-mo); transform: none; animation: none; }
.tgs-hero26--da-xem .tgs-hero26__chu { opacity: 1; transform: none; animation: none; }

/* Người tắt hiệu ứng chuyển động: vào thẳng trạng thái cuối, bỏ mọi animation. */
@media (prefers-reduced-motion: reduce) {
	.tgs-hero26 .tgs-hero26__canh { display: none; animation: none; }
	.tgs-hero26 .tgs-hero26__bay { opacity: 1; transform: none; animation: none; }
	.tgs-hero26 .tgs-hero26__bong { opacity: var(--bong-mo); transform: none; animation: none; }
	.tgs-hero26 .tgs-hero26__chu { opacity: 1; transform: none; animation: none; }
}