/* ==========================================================================
   FRONT-PAGE.CSS — Homepage specific sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO (full-bleed, 560px)
   -------------------------------------------------------------------------- */
.home-hero {
	position:   relative;
	height:     560px;
	overflow:   hidden;
	display:    flex;
	align-items: center;
}

.hero-bg {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
	z-index:             0;
	transition:          transform 8s ease;
}
.home-hero:hover .hero-bg { transform: scale(1.03); }

.hero-overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(180deg, rgba(16,30,51,.78) 0%, rgba(16,30,51,.30) 100%);
	z-index:    1;
}

.hero-content {
	position:       relative;
	z-index:        2;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            20px;
	max-width:      780px;
}

.hero-badge {
	display:       flex;
	align-items:   center;
	gap:           8px;
	background:    rgba(255,255,255,.12);
	backdrop-filter: blur(8px);
	border:        1px solid rgba(255,255,255,.2);
	border-radius: var(--radius-xl);
	padding:       6px 16px;
}
.hero-badge-dot {
	width:  8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	flex-shrink: 0;
}
.hero-badge-txt {
	font-size:   .8125rem;
	font-weight: 600;
	color:       rgba(255,255,255,.9);
	letter-spacing: .5px;
}

.hero-title {
	font-size:      4rem;
	font-weight:    800;
	color:          #fff;
	line-height:    1.1;
	letter-spacing: -.5px;
}

.hero-sub {
	font-size:   1.125rem;
	color:       rgba(255,255,255,.85);
	line-height: 1.6;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
	display:   flex;
	gap:       0;
	margin-top: 8px;
}
.stat-item { padding: 0 24px; text-align: center; }
.stat-item:first-child { padding-left: 0; }
.stat-item h4 {
	font-size:   1.75rem;
	font-weight: 800;
	color:       #fff;
	line-height: 1;
}
.stat-item p {
	font-size:   .8125rem;
	color:       rgba(255,255,255,.7);
	margin-top:  3px;
}
.stat-div {
	width:  1px;
	background: rgba(255,255,255,.25);
	margin: 4px 0;
}

/* --------------------------------------------------------------------------
   HOME SEARCH BAR
   -------------------------------------------------------------------------- */
.home-search {
	background:  #fff;
	box-shadow:  var(--shadow-md);
	position:    relative;
	z-index:     10;
}

.search-box { border-bottom: 1px solid var(--color-border); }

.search-tabs {
	display:    flex;
	border-bottom: 1px solid var(--color-border);
}

.tab-btn {
	padding:     14px 28px;
	background:  none;
	border:      none;
	font-size:   .9375rem;
	font-weight: 600;
	color:       var(--color-text-muted);
	cursor:      pointer;
	transition:  var(--transition);
	position:    relative;
}
.tab-btn::after {
	content:    '';
	position:   absolute;
	bottom:     -1px;
	left:       0;
	right:      0;
	height:     2px;
	background: var(--color-primary);
	transform:  scaleX(0);
	transition: transform .2s ease;
}
.tab-btn.active,
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active::after { transform: scaleX(1); }

.search-form {
	display:   flex;
	align-items: stretch;
	gap:       0;
}

.search-field {
	flex:       1;
	padding:    18px 20px;
	display:    flex;
	flex-direction: column;
	gap:        4px;
	border-right: 1px solid var(--color-border);
}
.search-field label {
	font-size:   .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color:       var(--color-text-muted);
}
.search-field input,
.search-field select {
	border:     none;
	outline:    none;
	background: transparent;
	font-size:  .9375rem;
	font-family: var(--font-base);
	color:      var(--color-text-primary);
	padding:    0;
}

.search-btn {
	padding:   18px 32px;
	background: var(--color-accent);
	color:     #fff;
	border:    none;
	font-size: 1rem;
	font-weight: 700;
	cursor:    pointer;
	display:   flex;
	align-items: center;
	gap:       8px;
	transition: var(--transition);
	white-space: nowrap;
	border-radius: 0;
}
.search-btn:hover { background: var(--color-accent-light); }
.search-btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   HOME SECTIONS
   -------------------------------------------------------------------------- */
.home-featured {
	padding:    60px 0;
	background: var(--color-bg-light);
}

.property-grid,
.news-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}

/* Solution Section */
.home-solution {
	padding:    60px 0;
	background: var(--color-bg-light);
}
.home-solution__inner {
	display:     flex;
	gap:         64px;
	align-items: center;
}
.home-solution__img {
	flex:          1;
	border-radius: var(--radius-lg);
	overflow:      hidden;
	min-height:    400px;
}
.home-solution__img img {
	width:      100%;
	height:     100%;
	min-height: 400px;
	object-fit: cover;
}
.home-solution__content { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.home-solution__features { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.solution-feature {
	display:     flex;
	align-items: flex-start;
	gap:         20px;
	padding:     0 0 0 20px;
	border-left: 2px solid var(--color-accent);
}
.solution-feature + .solution-feature { margin-top: 0; }
.solution-feature__icon { display: none; }
.solution-feature__title { font-size: .9375rem; font-weight: 700; margin-bottom: 4px; color: var(--color-text-primary); }
.solution-feature__desc  { font-size: .875rem; color: var(--color-text-secondary); line-height: 1.6; }

/* Estimate Section */
.home-estimate {
	padding:    60px 0;
	background: var(--color-bg-white);
}
.home-estimate__inner { display: flex; gap: 64px; align-items: center; }
.home-estimate__content { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.estimate-note {
	padding:       16px 20px;
	background:    rgba(224,112,48,.08);
	border-left:   3px solid var(--color-accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.estimate-note p { font-size: .9rem; color: var(--color-text-secondary); line-height: 1.6; }
.home-estimate__img {
	flex:          1;
	border-radius: var(--radius-lg);
	overflow:      hidden;
	min-height:    400px;
}
.home-estimate__img img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; }

/* About Story */
.home-about {
	padding:    60px 0;
	background: var(--color-bg-light);
}
.home-about__inner { display: flex; align-items: center; gap: 60px; }

.home-about__images {
	position: relative;
	width:    440px;
	height:   340px;
	flex-shrink: 0;
}
.about-img {
	position:      absolute;
	border-radius: var(--radius-md);
	object-fit:    cover;
	box-shadow:    var(--shadow-md);
}
.about-img-sm { width: 200px; height: 280px; bottom: 0; left: 0; }
.about-img-lg { width: 220px; height: 200px; top: 0; right: 0; }

.home-about__content { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.about-mini-stats  { display: flex; gap: 32px; }
.about-mini-stat   {}
.about-mini-num    { font-size: 2rem; font-weight: 800; color: var(--color-primary); }
.about-mini-label  { font-size: .875rem; color: var(--color-text-secondary); }

/* Awards Stats */
.home-awards {
	padding:    60px 0;
	background: var(--color-primary);
}
.home-awards__inner { display: flex; gap: 60px; align-items: flex-start; }
.home-awards__left  { flex: 1; }
.home-awards__right { display: flex; flex-direction: column; gap: 12px; flex: 1; }

.awards-heading { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.awards-desc    { font-size: .9375rem; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 24px; }

.award-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.award-icon { color: #F5C842; flex-shrink: 0; margin-top: 2px; }
.award-icon svg { width: 22px; height: 22px; }
.award-title { font-size: .9375rem; font-weight: 600; color: #fff; display: block; }
.award-org   { font-size: .8125rem; color: rgba(255,255,255,.6); }

.awards-stat-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   12px;
}
.awards-stat-card {
	padding:       24px;
	background:    rgba(255,255,255,.1);
	border-radius: var(--radius-md);
}
.awards-stat-card--light   { background: rgba(255,255,255,.2); }
.awards-stat-card--accent  { background: var(--color-accent); }
.awards-stat-num   { font-size: 2.5rem; font-weight: 800; color: #fff; }
.awards-stat-label { font-size: .875rem; color: rgba(255,255,255,.75); margin-top: 4px; }

/* Partners */
.home-partners { padding: 72px 0; background: #fff; text-align: center; }
.partners-label  { display: block; font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; }
.partners-heading { font-size: 1.75rem; font-weight: 800; margin-bottom: 40px; }
.partners-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.partner-logo {
	height:    56px;
	width:     auto;
	max-width: 140px;
	object-fit: contain;
	filter:    grayscale(1);
	opacity:   .5;
	transition: var(--transition);
}
.partner-logo:hover { filter: grayscale(0); opacity: 1; }

/* Projects */
.home-projects {
	padding:    60px 0;
	background: var(--color-surface);
}
.project-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
}

/* News */
.home-news { padding: 60px 0; background: var(--color-bg); }

/* CTA Banner */
.home-cta { padding: 0; }

/* ==========================================================================
   INVESTOR LOGOS SLIDESHOW — home-investors section
   Auto-scrolling marquee with CSS animation + JS clone for infinite loop
   ========================================================================== */

.home-investors {
	padding:    56px 0 48px;
	background: var(--color-bg-white, #fff);
	border-top:    1px solid var(--color-border, #E6E1D6);
	border-bottom: 1px solid var(--color-border, #E6E1D6);
	overflow:      hidden;
}

/* Header block */
.investors-header {
	text-align:    center;
	margin-bottom: 36px;
}
.investors-label {
	display:        inline-block;
	font-size:      .6875rem;
	font-weight:    700;
	color:          var(--color-accent);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-bottom:  8px;
}
.investors-heading {
	font-size:   1.625rem;
	font-weight: 800;
	color:       var(--color-primary);
	margin:      0 0 8px;
	line-height: 1.2;
}
.investors-desc {
	font-size: .9375rem;
	color:     var(--color-text-muted);
	margin:    0;
}

/* Marquee wrapper — full-width, clips overflow with fade edges */
.investors-marquee {
	position:   relative;
	width:      100%;
	overflow:   hidden;
	/* Fade edges — iOS Safari safe: dùng -webkit-mask-image đúng chuẩn */
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	/* iOS Safari: tắt -webkit-overflow-scrolling để tránh conflict */
	-webkit-overflow-scrolling: auto;
}

/* Track — flex row, animated */
.investors-track {
	display:     flex;
	align-items: center;
	gap:         32px;
	/* iOS Safari fix: dùng min-width thay max-content để tránh layout bug */
	min-width:   -webkit-max-content;
	min-width:   max-content;
	width:       -webkit-max-content;
	width:       max-content;
	/* iOS GPU acceleration: dùng translate3d thay translate2d */
	-webkit-animation: investorsScroll 28s linear infinite;
	animation:         investorsScroll 28s linear infinite;
	/* Bỏ will-change: gây flicker/clipping trên iOS Safari */
	-webkit-transform: translateZ(0);
	transform:         translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
/* Pause on hover — desktop only, không áp dụng touch */
@media (hover: hover) and (pointer: fine) {
	.investors-track:hover { animation-play-state: paused; }
}

@-webkit-keyframes investorsScroll {
	0%   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@keyframes investorsScroll {
	0%   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

/* Individual logo card */
.investor-logo {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           180px;
	height:          72px;
	background:      var(--color-surface, #F8F6F0);
	border:          1px solid var(--color-border, #E6E1D6);
	border-radius:   8px;
	padding:         10px 16px;
	flex-shrink:     0;
	transition:      border-color .25s, box-shadow .25s, transform .25s;
	cursor:          default;
}
.investor-logo:hover {
	border-color: var(--color-accent);
	box-shadow:   0 4px 16px rgba(242,101,34,.15);
	transform:    translateY(-2px);
}
.investor-logo img {
	max-width:  100%;
	max-height: 48px;
	object-fit: contain;
	display:    block;
	filter:     grayscale(1) opacity(.65);
	transition: filter .3s, opacity .3s;
}
.investor-logo:hover img {
	filter:  grayscale(0) opacity(1);
}

/* Text fallback when SVG not found */
.investor-logo__text {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	font-size:       .9375rem;
	font-weight:     700;
	color:           var(--color-primary);
	letter-spacing:  .5px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media ( max-width: 768px ) {
	.investors-header { margin-bottom: 24px; }
	.investors-heading { font-size: 1.25rem; }
	.investor-logo     { width: 140px; height: 60px; }
	.investors-track   { gap: 20px; animation-duration: 22s; }
}
@media ( max-width: 480px ) {
	.investor-logo  { width: 120px; height: 56px; }
	.investors-track { gap: 14px; }
}