/* =============================================================
   LANDING PAGE TOTO — CSS bổ sung
   Nạp riêng cho trang /thiet-bi/toto/ (xem inc/toto-landing.php)
   ============================================================= */

.eyebrow {
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: .7rem;
	font-weight: 500;
}

.hairline {
	height: 1px;
	background: linear-gradient(90deg, transparent, #C8A24A, transparent);
}

/* -------- Hiệu ứng reveal khi cuộn -------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
	            transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }


/* =============================================================
   SECTION 6 CỘT DỌC — EXPAND ON HOVER
   Kỹ thuật: dùng flex-grow thay vì width để trình duyệt chỉ
   phải tính lại layout của 1 hàng flex → mượt hơn animate width.
   ============================================================= */

.cat-strip { display: flex; }

/*
 * Ngôn ngữ thẻ (Card) lấy từ Section So sánh: bo góc, viền mảnh, bóng đổ mờ.
 *
 * LƯU Ý: KHÔNG dùng class .archi-card-lux ở đây. Thẻ đó có hiệu ứng nâng
 * (translateY) khi hover, sẽ xung đột với hiệu ứng nở rộng (flex-grow) riêng
 * của dải 6 cột — hai chuyển động chồng lên nhau nhìn rất rối. Ở đây chỉ lấy
 * phần TẠO HÌNH của card, giữ nguyên tương tác vốn có.
 */
.cat-col {
	flex: 1 1 0%;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .10);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06),
	            0 10px 28px -14px rgba(15, 23, 42, .28);
	transition: flex-grow .7s cubic-bezier(.16, 1, .3, 1),
	            border-color .4s ease,
	            box-shadow .4s ease;
	will-change: flex-grow;
}

@media (hover: hover) {
	.cat-col:hover {
		border-color: rgba(200, 162, 74, .55);   /* champagne gold */
		box-shadow: 0 2px 4px rgba(15, 23, 42, .08),
		            0 26px 52px -20px rgba(200, 162, 74, .38);
	}
}

@media (min-width: 1024px) {
	/* Khi rê vào strip: tất cả các cột co nhẹ lại... */
	.cat-strip:hover .cat-col { flex-grow: .82; }
	/* ...riêng cột đang hover nở ra */
	.cat-strip .cat-col:hover { flex-grow: 1.9; }
}

.cat-col img {
	transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}
.cat-col:hover img { transform: scale(1.06); filter: none; }

/* Mô tả ẩn — trượt xuống khi hover */
.cat-reveal {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .6s ease, opacity .5s ease .1s;
}
.cat-col:hover .cat-reveal { max-height: 120px; opacity: 1; }

/* Số thứ tự mờ dần khi hover */
.cat-num { transition: opacity .4s ease; }
.cat-col:hover .cat-num { opacity: 0; }

/* Hỗ trợ điều hướng bàn phím (Tab) */
.cat-col:focus-visible { outline: 2px solid #C8A24A; outline-offset: -2px; }
.cat-col:focus-visible .cat-reveal { max-height: 120px; opacity: 1; }
.cat-col:focus-visible .cat-num { opacity: 0; }

/* -------- Mobile / Tablet: chuyển sang cuộn ngang có snap -------- */
@media (max-width: 1023px) {
	.cat-strip {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.cat-strip::-webkit-scrollbar { display: none; }

	.cat-col {
		flex: 0 0 68%;
		scroll-snap-align: center;
	}
	/* Trên cảm ứng không có hover → luôn hiện mô tả */
	.cat-reveal { max-height: 120px; opacity: 1; }
	.cat-num { opacity: 0; }
}

/* =============================================================
   HERO — hợp nhất về bảng màu luxury navy/gold của toàn trang
   (trước đây dùng gradient xanh nhạt riêng theo thương hiệu TOTO —
   nay đổi sang nền off-white trung tính để đồng bộ với các section
   còn lại, chữ và điểm nhấn chuyển sang navy/gold thay vì xanh).
   ============================================================= */

.toto-hero {
	min-height: 640px;
	background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 55%, #F8FAFC 100%);
}

@media (min-width: 1024px) { .toto-hero { min-height: 78vh; } }

/* Trên di động ảnh nền dễ làm chữ khó đọc → làm mờ bớt */
@media (max-width: 1023px) {
	.toto-hero > img { opacity: .35; }
}


/* =============================================================
   SECTION GÓI COMBO
   ============================================================= */

/* -------- Ruy băng chiết khấu chéo góc thẻ -------- */
.ribbon {
	position: absolute;
	top: 18px;
	right: -46px;
	width: 180px;
	transform: rotate(45deg);
	text-align: center;
	padding: 7px 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
	z-index: 20;
	overflow: hidden;
}

/* Ánh sáng quét qua ruy băng khi hover — dùng transform (GPU) thay vì background-position */
.ribbon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
	transform: translateX(-130%);
	transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.combo-card:hover .ribbon::after { transform: translateX(130%); }

/* -------- Thẻ combo -------- */
.combo-card {
	transition: transform .5s cubic-bezier(.16, 1, .3, 1),
	            box-shadow .5s ease,
	            border-color .4s ease;
}
.combo-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 32px 64px -20px rgba(11, 27, 43, .30);
}

.combo-card img { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.combo-card:hover img { transform: scale(1.07); }

/* Gói nổi bật — đổ bóng ánh vàng khi hover */
.combo-featured { box-shadow: 0 24px 48px -18px rgba(11, 27, 43, .28); }
.combo-featured:hover { box-shadow: 0 40px 72px -20px rgba(200, 162, 74, .42); }

/* -------- Mobile: cuộn ngang có snap -------- */
@media (max-width: 1023px) {
	.combo-grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: .5rem;
	}
	.combo-grid::-webkit-scrollbar { display: none; }

	.combo-card {
		flex: 0 0 86%;
		scroll-snap-align: center;
	}
	/* Bỏ hiệu ứng nâng trên cảm ứng — gây giật khi cuộn */
	.combo-card:hover { transform: none; box-shadow: none; }
}


/* -------- Tôn trọng thiết lập giảm chuyển động của người dùng -------- */
@media (prefers-reduced-motion: reduce) {
	.cat-col,
	.cat-col img,
	.cat-reveal,
	.combo-card,
	.combo-card img,
	.ribbon::after,
	.reveal {
		transition: none !important;
	}
	.reveal { opacity: 1; transform: none; }
	.cat-reveal { max-height: 120px; opacity: 1; }
	.combo-card:hover { transform: none; }
}