/* ===== Hero full-bg ===== */
.hero-full {
	position: relative;
	min-height: 40vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.hero-full-bg {
	position: absolute;
	inset: 0;
	border-radius: 0;
	background: linear-gradient(115deg, #FBDDD4 0%, #F7C9A8 45%, #F3B677 100%);
    display: flex;
}
.hero-full-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.05) 75%);
}
.hero-full-content {
	position: relative;
	z-index: 1;
	padding: 56px 24px;
	max-width: 640px;
}
.hero-full-content h1 {
	font-size: 44px;
	font-weight: 800;
	color: var(--text-dark);
	margin: 0 0 12px;
}
.hero-full-content > p {
	font-size: 17px;
	color: var(--text-body);
	margin: 0 0 28px;
}

/* ===== Buttons (page-specific variants) ===== */
.btn.btn-ghost {
	background: transparent;
	color: var(--primary);
	border: none;
	padding: 8px 0;
	font-weight: 600;
}
.btn.btn-ghost:hover { gap: 12px; }
.btn-outline-light {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,0.7);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* ===== Giới thiệu intro (3 col native: ảnh / nội dung / 2 thẻ sứ mệnh-tầm nhìn) ===== */
.intro-image .img-fill { height: 100%; min-height: 200px; border-radius: var(--radius-md); }
.intro-text h2 { font-size: 24px; font-weight: 800; color: var(--text-dark); margin: 4px 0 4px; }
.intro-sub { font-size: 14px; color: var(--text-body); margin: 0 0 12px; font-weight: 500; }
.intro-text p { font-size: 13px; line-height: 1.55; margin: 0 0 10px; }
.intro-cards .col-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}
.mission-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 16px;
	box-shadow: var(--shadow-card);
	flex: 1;
}
.mission-card .icon-circle { margin: 0 0 8px; width: 50px; height: 50px; }
.mission-card .icon-circle svg { width: 25px; height: 25px; }
.mission-card h4 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin: 0 0 5px; }
.mission-card p { font-size: 15px; line-height: 1.45; color: var(--text-muted); margin: 0; }

/* ===== Văn hóa doanh nghiệp (3 col native: text / ảnh / quote-card) ===== */
.culture-text { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.culture-text h2 { font-size: 28px; font-weight: 800; color: var(--text-dark); margin: 6px 0 12px; line-height: 1.3; }
.culture-text p { font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.culture-image .img { height: 100%; min-height: 260px; border-radius: var(--radius-md);overflow: hidden; }
.quote-card .col-inner{
	background: #FBF1DD;
	border-radius: var(--radius-md);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.quote-mark {
	font-family: Georgia, serif;
    font-size: 80px;
    color: var(--secondary);
    line-height: 1;
    position: absolute;
    top: 10px;
	left: 10px;
}
.quote-card h4 { font-size: 22px; font-weight: 800; color: var(--text-dark); margin: 0 0 10px; }
.quote-card p { font-size: 16px; line-height: 1.6; margin: 0 0 8px; color: var(--text-body); }
.quote-attr { font-size: 15px; font-weight: 700; color: var(--primary); margin-top: 8px; display: block; }

/* ===== Tổng quan dịch vụ (image-top card w/ icon badge) ===== */
.service-overview-card .col-inner{
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform .25s ease, box-shadow .25s ease;
	height: 100%;
}
.service-overview-card .col-inner:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.service-overview-img {
    margin-bottom: 0 !important;
}
.service-overview-icon {
	width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.35);
    border: 3px solid #fff;
    transition: .3s;
    transform: translate(20px, -50%);
}
.service-overview-icon svg { width: 30px; height: 30px; }
.service-overview-card .col-inner:hover .service-overview-icon{background: var(--primary);}
.service-overview-body { padding: 10px 18px 16px; margin-top: -20px; }
.service-overview-body h3 { font-size: 20px; font-weight: 700; color: var(--text-dark); margin: 0 0 5px; }
.service-overview-body p { font-size: 16px; line-height: 1.5; margin: 0 0 8px; }

/* ===== Quy trình đồng hành — .process-steps chỉ còn giữ vị trí cho đường nối chấm;
layout cột do native [col] đảm nhiệm ===== */
.process-steps {
	position: relative;
}
.process-steps::before {
	content: '';
	position: absolute;
	top: 50px;
	left: 8%;
	right: 8%;
	height: 0;
	border-top: 2px dashed #F0C9C7;
	z-index: 0;
}
.process-step .col-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.process-icon {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #F3C9C7;
	color: var(--secondary);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 10px;
}
.process-icon svg { width: 40px; height: 40px; }
.process-num {
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.process-label { font-size: 18px; font-weight: 600; color: var(--text-dark); line-height: 1.35; }

/* ===== Văn phòng gallery item ===== */
.gallery-img { aspect-ratio: 2/1; border-radius: var(--radius-md); font-size: 12px; }

/* ===== CTA banner gold variant (2 col native: nội dung / nút) ===== */
.cta-banner-gold {
	background: linear-gradient(100deg, #E8A33D 0%, var(--secondary) 60%, #C99A2E 100%);
	padding: 20px 28px;
}
.cta-banner-gold.row { align-items: center; }
.cta-banner-gold .cta-content h3 { font-size: 19px; margin: 0 0 6px; line-height: 1.3; }
.cta-banner-gold .cta-content p { font-size: 12.5px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Contact strip ===== */
.contact-strip {
	background: #fff;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 20px 0;
}
.contact-strip-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.contact-strip-item svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.contact-strip-label { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.contact-strip-item strong { font-size: 13.5px; font-weight: 700; color: var(--text-dark); line-height: 1.4; }

/* ===== Scroll-to-top button ===== */
.scroll-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(229,57,53,0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	z-index: 90;
}
.scroll-top svg { width: 20px; height: 20px; }
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
	.hero-full-content { max-width: 100%; }
	.hero-full-overlay { background: linear-gradient(180deg, rgba(255,255,255,0.92) 20%, rgba(255,255,255,0.75) 100%); }
	.process-steps::before { display: none; }
}

@media (max-width: 600px) {
	.cta-banner-gold.row { text-align: center; justify-content: center; }
	.hero-full-content h1 { font-size: 30px; }
	.quote-mark{font-size: 60px;}
	.quote-card .col-inner{
		padding-top: 40px;
	}
}