/**
 * Go Thao Dien — landing homepage (mockup layout)
 */

:root {
	--landing-bg:     #f7f6f4;
	--landing-dark:   #2b2a27;
	--landing-dark-2: #3a3834;
	--landing-border: #e8e6e2;
	--landing-muted:  #6b6560;
}

body.landing-page {
	background: var(--landing-bg);
	background-color: var(--landing-bg);
}

body.landing-page .top-bar {
	display: none;
}

body.landing-page .site-header__main {
	padding-block: 18px;
}

body.landing-page .header-search {
	display: none;
}

body.landing-page .header-actions__account,
body.landing-page .header-actions__cart {
	display: none;
}

body.landing-page .site-logo__sub {
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--landing-muted);
}

body.landing-page .category-nav__inner,
body.landing-page .category-nav__list,
body.landing-page .category-nav .menu {
	justify-content: center;
	align-items: center;
}

body.landing-page .category-nav__list {
	gap: 4px;
}

body.landing-page .category-nav__link {
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--landing-dark);
	border-bottom: 0;
	border-radius: 8px;
}

body.landing-page .category-nav__link:hover,
body.landing-page .category-nav__list li.current-menu-item > a {
	background: rgba(43, 42, 39, .06);
	color: var(--landing-dark);
}

/* ── Hero ───────────────────────────────────────────── */
.landing-hero__wrap {
	min-height: auto;
}

.landing-hero__track {
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		125deg,
		var(--color-rose-50) 0%,
		var(--color-sky-50) 48%,
		var(--gtd-white) 100%
	);
}

.landing-hero__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(48px, 8vw, 88px) clamp(20px, 4vw, 40px);
}

.landing-hero__title {
	font-family: var(--gtd-font-head);
	font-size: clamp(32px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	color: var(--landing-dark);
	margin: 0 0 20px;
}

.landing-hero__subtitle {
	font-size: clamp(15px, 2vw, 18px);
	line-height: 1.65;
	color: var(--landing-muted);
	margin: 0 auto 32px;
	max-width: 640px;
}

.landing-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

body.landing-page .landing-hero .gtd-btn--primary {
	background: var(--landing-dark);
	color: #fff;
	box-shadow: none;
}

body.landing-page .landing-hero .gtd-btn--primary:hover {
	background: var(--landing-dark-2);
	transform: translateY(-1px);
}

body.landing-page .landing-hero .gtd-btn--outline {
	border: 2px solid var(--landing-dark);
	color: var(--landing-dark);
	background: transparent;
	box-shadow: none;
}

body.landing-page .landing-hero .gtd-btn--outline:hover {
	background: rgba(43, 42, 39, .06);
}

/* ── Section titles ───────────────────────────────── */
.landing-section-title {
	font-family: var(--gtd-font-head);
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 700;
	color: var(--landing-dark);
	text-align: center;
	margin: 0 0 36px;
	line-height: 1.2;
}

.landing-section-title--left {
	text-align: left;
	margin-bottom: 20px;
}

.landing-intro {
	padding-block: clamp(40px, 6vw, 72px);
	background: var(--landing-bg);
}

.landing-intro__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.landing-intro__title {
	font-family: var(--gtd-font-head);
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 700;
	color: var(--landing-dark);
	margin: 0 0 16px;
}

.landing-intro__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--landing-muted);
	margin: 0;
}

/* ── Featured categories ──────────────────────────── */
.landing-categories {
	padding-block: clamp(32px, 5vw, 56px);
	background: var(--landing-bg);
}

.landing-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 991px) {
	.landing-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	.landing-cat-grid { grid-template-columns: 1fr; }
}

.landing-cat-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px 24px;
	background: #fff;
	border: 1px solid var(--landing-border);
	border-radius: var(--gtd-radius-lg);
	text-decoration: none;
	color: var(--landing-dark);
	transition: box-shadow .25s, transform .25s, border-color .25s;
}

.landing-cat-card:hover {
	box-shadow: 0 12px 32px rgba(43, 42, 39, .08);
	transform: translateY(-3px);
	border-color: #d8d4ce;
}

.landing-cat-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--color-teal-100) 55%, #fff);
	color: var(--color-teal-700);
}

.landing-cat-card__name {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.landing-cat-card__desc {
	font-size: 13px;
	line-height: 1.55;
	color: var(--landing-muted);
	margin: 0;
}

/* ── Why us (landing) ─────────────────────────────── */
.landing-why-us {
	padding-block: clamp(48px, 6vw, 80px);
	background: #fff;
}

.landing-why-us .landing-section-title {
	margin-top: 8px;
}

.landing-why-us__mark {
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto 12px;
	background: var(--color-teal-500);
	border-radius: 3px;
}

.landing-why-us .why-us-card {
	background: var(--landing-bg);
	border: 1px solid var(--landing-border);
	box-shadow: none;
}

.landing-why-us .why-us-card__icon {
	color: var(--color-teal-600);
}

/* ── Showcase tabs ────────────────────────────────── */
.landing-showcase {
	padding-block: clamp(40px, 5vw, 64px);
	background: var(--landing-bg);
}

.landing-showcase__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.landing-showcase__tab {
	font-family: var(--gtd-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: lowercase;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--landing-border);
	background: #fff;
	color: var(--landing-muted);
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}

.landing-showcase__tab.is-active,
.landing-showcase__tab:hover {
	background: var(--landing-dark);
	border-color: var(--landing-dark);
	color: #fff;
}

.landing-showcase__panel {
	display: none;
	background: #fff;
	border: 1px solid var(--landing-border);
	border-radius: var(--gtd-radius-xl);
	padding: clamp(28px, 4vw, 48px);
	animation: heroIn .35s ease;
}

.landing-showcase__panel.is-active {
	display: block;
}

.landing-showcase__title {
	font-family: var(--gtd-font-head);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	color: var(--landing-dark);
	margin: 0 0 14px;
}

.landing-showcase__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--landing-muted);
	max-width: 720px;
	margin: 0 0 28px;
}

.landing-showcase__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

@media (max-width: 768px) {
	.landing-showcase__gallery { grid-template-columns: 1fr; }
}

.landing-showcase__figure {
	margin: 0;
	border-radius: var(--gtd-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--landing-bg);
}

.landing-showcase__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.landing-showcase__cta-wrap {
	margin: 0;
}

body.landing-page .landing-showcase .gtd-btn--primary {
	background: var(--landing-dark);
	box-shadow: none;
}

/* ── Assistance (dark) ────────────────────────────── */
.landing-assistance {
	padding-block: clamp(48px, 6vw, 72px);
	background: var(--landing-dark);
	color: #fff;
}

.landing-assistance__inner {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.landing-assistance__title {
	font-family: var(--gtd-font-head);
	font-size: clamp(26px, 4vw, 38px);
	font-weight: 700;
	margin: 0 0 14px;
}

.landing-assistance__text {
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 28px;
}

.landing-assistance__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.gtd-btn--wa {
	background: #25d366;
	color: #fff;
	border: 0;
}

.gtd-btn--wa:hover {
	background: #1fb855;
	color: #fff;
}

.gtd-btn--zalo {
	background: #0068ff;
	color: #fff;
	border: 0;
}

.gtd-btn--zalo:hover {
	background: #0056d6;
	color: #fff;
}

/* ── About + Contact ──────────────────────────────── */
.landing-about,
.landing-contact {
	padding-block: clamp(48px, 6vw, 72px);
	background: var(--landing-bg);
}

.landing-about__text,
.landing-contact__text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--landing-muted);
	max-width: 900px;
	margin: 0;
}

.landing-contact__head {
	margin-bottom: 28px;
}

.landing-contact__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

@media (max-width: 768px) {
	.landing-contact__grid { grid-template-columns: repeat(2, 1fr); }
}

.landing-contact__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 100px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--landing-border);
	border-radius: var(--gtd-radius-lg);
	text-decoration: none;
	color: var(--landing-dark);
	font-weight: 700;
	font-size: 14px;
	transition: box-shadow .2s, transform .2s;
}

.landing-contact__card:hover {
	box-shadow: 0 8px 24px rgba(43, 42, 39, .08);
	transform: translateY(-2px);
}

.landing-contact__icon {
	width: 28px;
	height: 28px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.landing-contact__icon--whatsapp {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347'/%3E%3C/svg%3E");
}

.landing-contact__icon--zalo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230068FF'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
}

.landing-contact__icon--email {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232b2a27'%3E%3Cpath stroke-width='1.5' d='M3 8l9 6 9-6M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z'/%3E%3C/svg%3E");
}

.landing-contact__icon--instagram {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232b2a27'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='4' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Footer on landing — same theme gradient tokens as shop */
body.landing-page .site-footer {
	background: var(--gtd-grad-footer);
}