/* =============================================================================
   GABO — DARK LUXURY DESIGN SYSTEM
   Nạp riêng cho trang /thiet-bi/gabo/ (xem inc/gabo-landing.php)

   ─────────────────────────────────────────────────────────────────────────
   VÌ SAO TẤT CẢ CLASS ĐỀU CÓ TIỀN TỐ .gabo- VÀ BỌC TRONG .gabo-page?

   Toàn bộ site (kể cả trang TOTO) đang dùng bảng màu SÁNG. Nếu định nghĩa
   biến màu tối ở :root hoặc ghi đè trực tiếp lên thẻ h1/p/button, style tối
   sẽ rò rỉ sang mọi trang khác. Ở đây mọi thứ nằm dưới .gabo-page nên trang
   GABO có thể tối hoàn toàn mà không đụng một pixel nào của TOTO.
   ─────────────────────────────────────────────────────────────────────────
   ============================================================================= */

.gabo-page {
	/* --- Nền --- */
	--gabo-black:    #0A0A0A;   /* Deep Black — nền chính */
	--gabo-graphite: #141414;   /* Graphite — nền thẻ */
	--gabo-carbon:   #1C1C1C;   /* Carbon — nền nổi/hover */
	--gabo-line:     #2A2A2A;   /* Viền mảnh mặc định */

	/* --- Kim loại --- */
	--gabo-gold:     #C9A961;   /* Champagne Gold — điểm nhấn chính */
	--gabo-gold-lt:  #E3CC93;   /* Gold sáng — dùng cho gradient/hover */
	--gabo-titan:    #8A8A8A;   /* Titanium Grey */
	--gabo-rose:     #B76E79;   /* Rose Gold — nhấn phụ */

	/* --- Chữ --- */
	--gabo-text:     #F2F2F2;
	--gabo-muted:    #9A9A9A;
	--gabo-faint:    #5E5E5E;

	background-color: var(--gabo-black);
	color: var(--gabo-text);
}

/* Kéo dài nền đen ra toàn khung nhìn, kể cả vùng trên/dưới của template */
.gabo-page section { background-color: transparent; }

/* =============================================================================
   1. TYPOGRAPHY
   ============================================================================= */

.gabo-page h1, .gabo-page h2, .gabo-page h3 { color: var(--gabo-text); }

/* Nhãn nhỏ in hoa giãn rộng — dấu ấn của phong cách châu Âu cao cấp */
.gabo-eyebrow {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .34em;
	color: var(--gabo-gold);
}

/* Tiêu đề section: serif mảnh, vế nhấn tô gradient kim loại */
.gabo-title {
	font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
	font-weight: 300;
	line-height: 1.28;              /* đủ chỗ cho dấu tiếng Việt chồng tầng */
	letter-spacing: -.01em;
}
.gabo-title em {
	font-style: italic;
	/* Chữ ánh kim: gradient champagne gold chạy qua nét chữ */
	background: linear-gradient(100deg, var(--gabo-gold) 0%, var(--gabo-gold-lt) 45%, var(--gabo-gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.gabo-sub { color: var(--gabo-muted); line-height: 1.8; }

/* Đường kẻ kim loại thay cho hairline vàng của bản sáng */
.gabo-rule {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gabo-gold), transparent);
}

/* Chữ chìm khổng lồ — trên nền đen phải sáng hơn nền mới thấy */
.gabo-watermark {
	position: absolute;
	top: -1rem;
	left: 0; right: 0;
	text-align: center;
	font-size: 17vw;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
	color: rgba(255, 255, 255, .028);
	pointer-events: none;
	user-select: none;
}

/* =============================================================================
   2. NÚT
   ============================================================================= */

.gabo-btn,
.gabo-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 52px;
	padding: .875rem 2rem;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .12em;
	line-height: 1.35;              /* KHÔNG dùng 1 — sẽ cắt cụt dấu chữ hoa */
	transition: all .35s cubic-bezier(.16, 1, .3, 1);
	-webkit-tap-highlight-color: transparent;
}

/* Nút chính: viền kim loại + quầng sáng vàng mờ */
.gabo-btn {
	position: relative;
	color: var(--gabo-gold);
	background: transparent;
	border: 1px solid var(--gabo-gold);
	box-shadow: 0 0 0 rgba(201, 169, 97, 0);
}
.gabo-btn:hover {
	color: var(--gabo-black);
	background: var(--gabo-gold);
	box-shadow: 0 0 28px -4px rgba(201, 169, 97, .45);
}
.gabo-btn:active { transform: scale(.98); }

/* Nút phụ: viền xám titan */
.gabo-btn-ghost {
	color: var(--gabo-text);
	background: transparent;
	border: 1px solid var(--gabo-line);
}
.gabo-btn-ghost:hover { border-color: var(--gabo-titan); background: var(--gabo-carbon); }
.gabo-btn-ghost:active { transform: scale(.98); }

/* =============================================================================
   3. THẺ (CARD)
   ============================================================================= */

.gabo-card {
	background: var(--gabo-graphite);
	border: 1px solid var(--gabo-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
	.gabo-card:hover {
		border-color: rgba(201, 169, 97, .55);
		box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .9),
		            0 0 24px -10px rgba(201, 169, 97, .30);
		transform: translateY(-6px);
	}
}

.gabo-card__head { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--gabo-line); }
.gabo-card__foot { padding: 1rem 1.25rem; background: rgba(255, 255, 255, .022); border-top: 1px solid var(--gabo-line); }

/* Khung ảnh sản phẩm — nền tối hơn thân thẻ để đồ mạ PVD nổi lên */
.gabo-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	background: #0F0F0F;
	overflow: hidden;
}
.gabo-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.gabo-card:hover .gabo-thumb img { transform: scale(1.06); }

/* =============================================================================
   4. BADGE
   ============================================================================= */

.gabo-badge {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .3125rem .625rem;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1.4;
}
.gabo-badge--gold  { background: rgba(201, 169, 97, .12); color: var(--gabo-gold); border: 1px solid rgba(201, 169, 97, .3); }
.gabo-badge--solid { background: var(--gabo-gold); color: var(--gabo-black); }
.gabo-badge--sale  { background: #B3122B; color: #fff; }

/* =============================================================================
   5. DẢI 6 DANH MỤC DỌC
   Cùng cơ chế flex-grow như bản TOTO (mượt hơn animate width), nhưng
   hiệu ứng hover là ÁNH KIM bừng lên thay vì chỉ phóng to ảnh.
   ============================================================================= */

.gabo-strip { display: flex; gap: .75rem; }

.gabo-col {
	position: relative;
	flex: 1 1 0%;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--gabo-line);
	background: var(--gabo-graphite);
	transition: flex-grow .7s cubic-bezier(.16, 1, .3, 1),
	            border-color .5s ease,
	            box-shadow .5s ease;
	will-change: flex-grow;
}

@media (min-width: 1024px) {
	.gabo-strip:hover .gabo-col { flex-grow: .82; }
	.gabo-strip .gabo-col:hover { flex-grow: 1.9; }
}

.gabo-col img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .5;
	filter: grayscale(45%);
	transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, filter .6s ease;
}
.gabo-col:hover img,
.gabo-col:focus-visible img { transform: scale(1.06); opacity: .78; filter: grayscale(0); }

/* Lớp phủ tối để chữ luôn đọc được trên mọi ảnh */
.gabo-col__veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10,10,10,.96) 0%, rgba(10,10,10,.45) 45%, rgba(10,10,10,.15) 100%);
}

/* Viền ánh kim chạy dọc mép trái khi hover */
.gabo-col::before {
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--gabo-gold), transparent);
	opacity: 0;
	transition: opacity .5s ease;
	z-index: 2;
}
.gabo-col:hover::before,
.gabo-col:focus-visible::before { opacity: 1; }

@media (hover: hover) {
	.gabo-col:hover { border-color: rgba(201,169,97,.5); box-shadow: 0 0 32px -12px rgba(201,169,97,.35); }
}

.gabo-col__reveal {
	max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height .6s ease, opacity .5s ease .1s;
}
.gabo-col:hover .gabo-col__reveal,
.gabo-col:focus-visible .gabo-col__reveal { max-height: 140px; opacity: 1; }

.gabo-col__num { transition: opacity .4s ease; }
.gabo-col:hover .gabo-col__num { opacity: 0; }

.gabo-col:focus-visible { outline: 2px solid var(--gabo-gold); outline-offset: -2px; }

/* Mobile: cuộn ngang có điểm dừng */
@media (max-width: 1023px) {
	.gabo-strip {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.gabo-strip::-webkit-scrollbar { display: none; }
	.gabo-col { flex: 0 0 68%; scroll-snap-align: center; }
	.gabo-col__reveal { max-height: 140px; opacity: 1; }
	.gabo-col__num { opacity: 0; }
}

/* =============================================================================
   6. HERO
   ============================================================================= */

.gabo-hero { position: relative; min-height: 640px; background: var(--gabo-black); }
@media (min-width: 1024px) { .gabo-hero { min-height: 86vh; } }

/* Ánh sáng điểm (spotlight) rọi từ trên xuống thiết bị */
.gabo-hero__spot {
	position: absolute;
	top: -20%; left: 50%;
	transform: translateX(-50%);
	width: 90rem; height: 90rem;
	pointer-events: none;
	background: radial-gradient(circle, rgba(201,169,97,.14) 0%, rgba(201,169,97,.05) 30%, transparent 62%);
}

/* Phủ tối hai bên để chữ nổi bật trên ảnh nền */
.gabo-hero__veil {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.82) 42%, rgba(10,10,10,.35) 100%);
}

/* =============================================================================
   7. FORM
   ============================================================================= */

.gabo-field {
	width: 100%;
	min-height: 48px;
	padding: .75rem 1rem;
	background: var(--gabo-carbon);
	border: 1px solid var(--gabo-line);
	color: var(--gabo-text);
	transition: border-color .3s ease, box-shadow .3s ease;
}
.gabo-field::placeholder { color: var(--gabo-faint); }
.gabo-field:focus {
	outline: none;
	border-color: var(--gabo-gold);
	box-shadow: 0 0 0 1px rgba(201,169,97,.35);
}
.gabo-label { display: block; margin-bottom: .375rem; font-size: 13px; font-weight: 500; color: var(--gabo-muted); }

/* Bỏ mũi tên mặc định của select, dùng chevron riêng */
.gabo-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.75rem; }

/* =============================================================================
   8. SPOTLIGHT SẢN PHẨM BIỂU TƯỢNG
   ============================================================================= */

.gabo-spec {
	display: flex;
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--gabo-line);
}
.gabo-spec:last-child { border-bottom: 0; }
.gabo-spec__key {
	flex: 0 0 8.5rem;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--gabo-gold);
	padding-top: .125rem;
}
.gabo-spec__val { color: var(--gabo-muted); font-size: 15px; line-height: 1.7; }

/* =============================================================================
   9. POPUP QUICK VIEW — PHIÊN BẢN TỐI
   Modal dùng chung với trang TOTO (inc/quick-view.php) nên KHÔNG nằm trong
   .gabo-page. Vì vậy phải gắn cờ .gabo-qv lên thẻ <html> bằng JS nhỏ ở cuối
   trang GABO, rồi đổi màu modal theo cờ đó.
   ============================================================================= */

.gabo-qv .archi-qv__box {
	background: var(--gabo-graphite, #141414);
	border-top-color: var(--gabo-gold, #C9A961);
	color: #F2F2F2;
}
.gabo-qv .archi-qv__overlay { background: rgba(0, 0, 0, .82); }

/* Cột ảnh + các mảng nền sáng bên trong popup */
.gabo-qv .archi-qv__box .bg-mist { background: #0F0F0F !important; }
.gabo-qv .archi-qv__box .bg-white { background: #1C1C1C !important; }

/* Chữ */
.gabo-qv .archi-qv__box h2,
.gabo-qv .archi-qv__box h3 { color: #F2F2F2 !important; }
.gabo-qv .archi-qv__box .text-slate-800,
.gabo-qv .archi-qv__box .text-slate-700,
.gabo-qv .archi-qv__box .text-navy { color: #F2F2F2 !important; }
.gabo-qv .archi-qv__box .text-gray-600,
.gabo-qv .archi-qv__box .text-slate-600 { color: #9A9A9A !important; }
.gabo-qv .archi-qv__box .text-slate-400,
.gabo-qv .archi-qv__box .text-slate-500 { color: #5E5E5E !important; }

/* Đường kẻ */
.gabo-qv .archi-qv__box .border-gray-100,
.gabo-qv .archi-qv__box .divide-gray-100 > * + * { border-color: #2A2A2A !important; }

/* Nút đóng */
.gabo-qv .archi-qv__box [data-archi-qv-close] {
	background: rgba(20,20,20,.92) !important;
	border-color: #2A2A2A !important;
	color: #9A9A9A !important;
}

/* Mô tả trong popup — căn đều 2 bên như yêu cầu, dòng cuối vẫn về trái */
.gabo-qv .archi-qv-desc p {
	text-align: justify;
	text-justify: inter-word;
	text-align-last: left;
	-moz-text-align-last: left;
}
@media (max-width: 480px) {
	.gabo-qv .archi-qv-desc p { text-align: left; }
}

/* Nút CTA trong popup đổi sang kiểu viền kim loại của GABO */
.gabo-qv .archi-qv__box .archi-btn-primary {
	background: transparent;
	border: 1px solid var(--gabo-gold, #C9A961);
	color: var(--gabo-gold, #C9A961);
}
.gabo-qv .archi-qv__box .archi-btn-primary:hover {
	background: var(--gabo-gold, #C9A961);
	color: #0A0A0A;
}
.gabo-qv .archi-qv__box .archi-btn-outline {
	border-color: #2A2A2A;
	color: #F2F2F2;
}
.gabo-qv .archi-qv__box .archi-btn-outline:hover { background: #1C1C1C; color: #F2F2F2; }

/* =============================================================================
   10. TÔN TRỌNG THIẾT LẬP GIẢM CHUYỂN ĐỘNG
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.gabo-col, .gabo-col img, .gabo-col__reveal,
	.gabo-card, .gabo-thumb img, .gabo-btn, .gabo-btn-ghost {
		transition: none !important;
	}
	.gabo-card:hover { transform: none; }
	.gabo-col__reveal { max-height: 140px; opacity: 1; }
}